تدرجات وظلال CSS

التدرجات

التدرجات تُنشئ انتقالات سلسة بين الألوان. CSS يوفر دالتين رئيسيتين للتدرج.

linear-gradient

يُنشئ تدرجاً خطاً:

مثال

<style>
.gradient-1 {
  background: linear-gradient(to right, #3498db, #2ecc71);
  height: 80px;
  margin-bottom: 10px;
}
.gradient-2 {
  background: linear-gradient(135deg, #e74c3c, #f39c12, #2ecc71);
  height: 80px;
}
</style>
<div class="gradient-1">تدرج من اليسار لليمين</div>
<div class="gradient-2">تدرج قطري متعدد الألوان</div>

radial-gradient

يُنشئ تدرجاً دائرياً/بيضاوياً:

مثال

<style>
.radial {
  background: radial-gradient(circle, #3498db, #2c3e50);
  height: 150px;
  border-radius: 50%;
}
</style>
<div class="radial">دائرة بتدرج شعاعي</div>

الظلال

box-shadow

يضيف تأثيرات ظل للعناصر:

مثال

<style>
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  background: white;
  border-radius: 8px;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
</style>
<div class="card">بطاقة بظل</div>

text-shadow

يضيف ظلاً للنص:

مثال

<style>
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>
<h1>عنوان بظل</h1>

❓ أسئلة شائعة

📖 ملخص

• التدرجات والظلال أداتان قويتان للجودة البصرية
• linear-gradient هو الأكثر شيوعاً للأزرار والخلفيات والتراكبات
• box-shadow يضيف عمقاً؛ ظلال hover للبطاقات هي الاستخدام الأكثر شيوعاً
• text-shadow يُزيّن النص؛ drop-shadow يتبع خطوط العنصر الفعلية
• دمج الاثنين يُنشئ تصاميم أكثر صقلاً وطبقات

📝 تمارين

1. أنشئ زراً متدرجاً — انتقال لون من اليسار لليمين، الاتجاه يتغير عند hover.
2. أنشئ "بطاقة عائمة" — ظل خفيف افتراضياً، ظل أعمق + ارتفاع عند hover.
3. استخدم repeating-linear-gradient لإنشاء نمط خلفية مخطط.
4. أضف text-shadow أو drop-shadow تأثير توهج لأيقونة PNG أو نص.