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

آخر تحديث: 2026-10-13

خصائص هذا القسم: text-shadow box-shadow

1. التدرجات

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

(1) linear-gradient

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

▶ مثال

▶ جرّب الكود

(2) radial-gradient

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

▶ مثال

▶ جرّب الكود

2. الظلال

(1) box-shadow

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

▶ مثال

▶ جرّب الكود

(2) text-shadow

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

▶ مثال

▶ جرّب الكود

خصائص هذا القسم: text-shadow box-shadow

❓ أسئلة شائعة

س أي أدوات لإنشاء التدرجات؟

ج مُوصى به: cssgradient.io وwebgradients.com — مُولّدات تدرج بالسحب والإفلات. انسخ الكود مباشرة. دراسة مخططات تدرج الآخرين تبني حدسك للزوايا ونقاط التوقف اللونية.

س هل يمكن لـ box-shadow أن يحتوي على ظلال متعددة؟

ج نعم، افصل بفواصل: box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08); يُنشئ تأثير ظل مزدوج. الظلال تتكدس بترتيب الإعلان — الأولى في الأعلى.

س ما الفرق بين text-shadow وbox-shadow؟

ج text-shadow يعمل على النص فقط، بدون معامل انتشار، بدون دعم inset. box-shadow يعمل على صندوق العنصر بالكامل، لديه انتشار، يدعم inset. بنية متشابهة لكن قدرات مختلفة.

📖 ملخص

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

📝 تمارين

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

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن