الدرس37 : إضافة box-shadow وtext-shadow ب css

إضافة مربع الظل box-shadow :

box-shadow تسمح لنا بعمل ظل عن طريق أربع قيم تعطى لوسم معين بواسطة css3:

1- إزاحة أفقية.

2- إزاحة عمودية.

3- تدريج الظل.

4- لون الظل.

لتطبيق  box-shadow بحجم 6px على اليمين و 6px تحت و لونه يكون أسود، يعني بعده عن الجسم نكتب:

p{
box-shadow: 6px 6px 0px black;
}

و هكذا يجب أن تظهر لكم النتيجة، للعلم فقط فقد أضفت border أسود للنص كما تلاحظون لكي يكون الظل واضحا:

الآن أريد إضافة تدريج ل box-shadow لكي يصبح أقل حدة من حوافه، فبكل بساطة نضيف نسبة الحدة في القيمة الثالثة:

p{
box-shadow: 6px 6px 6px black;
}

و يوجد أيضا inset هذا الأخير نضيفه إذا ما أردنا أن يكون الظل للداخل بدل الخارج .

p{
box-shadow: 6px 6px 6px black inset;
}

 عمل ظل للنص text-shadow ب css :

مع text-shadow يمكنك إضافة ظل مباشرة للحروف نص معين. و هي تعمل بنفس طريقة التي اخذناها في box-shadow  يعني بعد الظل و الحدة و اللون.

p
{
text-shadow: 2px 2px 4px black;
}

و يصبح الخط هكذا :

 بالنسبة ل box-shadow فهو مدعومة من طرف معظم المتصفحات الجديدة إبتداءا من IE9. أما text-shadow فهو مدعوم إبتداءا من IE10 و ليصبح متوافق مع المتصفحات القديمة التي يستعملها خصوصا الناس الكبار فسنرى هذا لاحقا.