CSS - Shadows الظلال

CSS - الظلال (Shadows)

🔸 في CSS3 يمكنك استخدام نوعين من الظلال:

• text-shadow: لإضافة ظل للنصوص.
• box-shadow: لإضافة ظل للعناصر (مثل البطاقات، الأزرار، الصور...)

---

🔹 text-shadow – ظل النصوص

h1 {
  text-shadow: 2px 2px 4px #555;
}

📌 تُستخدم لإضافة تأثير ظل على النصوص. الصيغة: offset-x offset-y blur-radius color

🧪 مثال عملي:

<h1 style="text-shadow: 3px 3px 5px gray;">
  ظل للنص
</h1>

---

🔹 box-shadow – ظل العناصر

.box {
  width: 300px;
  height: 150px;
  background-color: white;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

📌 تُستخدم لإضافة ظل خارجي للصناديق. الصيغة: offset-x offset-y blur-radius spread-radius color

🧪 مثال عملي:

<div style="width:200px; height:100px; background:#eee; box-shadow: 10px 10px 20px gray;">
  عنصر بظل خارجي
</div>

---

🔸 إضافة ظل داخلي (inset)

.inset-box {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

📌 باستخدام inset، يُعرض الظل داخل العنصر بدلًا من خارجه.

---

🔸 إضافة أكثر من ظل

div {
  box-shadow: 2px 2px 4px red, -2px -2px 4px blue;
}

📌 يمكنك فصل أكثر من ظل بفاصلة لإنشاء تأثيرات متعددة.

---

💡 ملاحظات هامة

• text-shadow لا تدعم inset أو spread.
• استخدام rgba بدلاً من hex يتيح لك التحكم في شفافية الظل.
• يفضل عدم المبالغة في الظلال حتى لا تؤثر على الأداء والمظهر العام.