التدرجات في CSS
الألوان المصمتة والصور تغطي كثيراً من الخلفيات. أحياناً تريد مزجاً ناعماً بين الألوان — لافتة هادئة، بطاقة متوهجة، سماء بلا ملف صورة ضخم. ذلك المزج تدرج يرسمه CSS كنوع خاص من background-image.
ما هو تدرج CSS؟
التدرج صورة يولّدها المتصفح — لا JPG تحمّله. تصفه بدوال مثل linear-gradient() وradial-gradient() ثم تضعه في background-image (أو اختصار background). النتيجة تُرسَم خلف المحتوى كخلفية صورة.
الأنواع بنظرة
ابدأ بهذين. التدرج المخروطي يمكن أن ينتظر.
📊 أنواع تدرج CSS اليومية
| النوع | الدالة | استخدام يومي |
|---|---|---|
| خطي | linear-gradient(…) |
لافتات، أزرار، غسيل قسم يسار→يمين أو أعلى→أسفل |
| شعاعي | radial-gradient(…) |
بطاقات ضوء ناعم، تلاشي دائري من المركز |
| كلمات الاتجاه | to right، to bottom |
اتجاه خطي مقروء بلا زوايا |
| زاوية | 45deg، 90deg |
ميل دقيق حين لا تكفي الكلمات |
| نقاط لونية | teal 0%، navy 100% |
أين يجلس كل لون على المزج |
خطي: لونان، من اليسار لليمين
أبسط تدرج خطي يحتاج اتجاهاً ولونين على الأقل. CSS يمزج بينهما.
تدرج خطي بسيط يسار→يمين
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}اقرأ الدالة
to right هو الاتجاه. #0f766e يبدأ؛ #0f172a ينتهي. المتصفح يملأ ما بينهما.
زوايا ونقاط أكثر
استخدم زاوية لغسيل قطري، وأضف نقاطاً وسطى لمزج أغنى.
خطي بزاوية وثلاث نقاط
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}عادة النقطة
نقطة اللون تعني «هذا اللون هنا.» النسب المئوية سهلة القراءة. يمكن حذف المواضع ليوزّع المتصفح الألوان بالتساوي.
شعاعي: تلاشي من المركز
radial-gradient() يمتد من نقطة مركزية — مفيد لبطاقات ناعمة وتوهج تركيز.
بطاقة شعاعية ناعمة
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}تلميح الدائرة
circle at center يبقي الشكل مستديراً ومركّزاً. لاحقاً at top أو at 20% 30% لضوء في موضع آخر.
التدرجات تعيش على background-image
لا تضع دالة تدرج في color — تلك الخاصية تلوّن النص. التدرجات صور خلفية؛ عادات التباين مع النص ما زالت مهمة.
اختصار مع لون احتياطي
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}جرّبها بنفسك
.bannerبـlinear-gradient(to right, #0f766e, #0f172a)ونص فاتح.- غيّر الاتجاه إلى
to bottom— محور المزج ينقلب. .heroبـ135degوثلاث نقاط (تركواز → وسط → كحلي)..cardبـradial-gradient(circle at center, #ccfbf1, #0f766e).- اختياري: ضع لوناً مصمتاً احتياطياً قبل التدرج في اختصار
background.
أخطاء شائعة
- كتابة
color: linear-gradient(…)— التدرج ليس لون نص - نقطة لونية واحدة فقط — تحتاج لونين على الأقل للمزج
- نسيان أنه
background-image(التباين والطبقات ما زالا يهمّان) - قوس قزح صاخب على كل قسم — غسيل ناعم بنقطتين أو ثلاث يبدو أكثر احترافية
- توقع أن يحل التدرج محل صور ذات معنى (صور المنتج تبقى صوراً حقيقية)
باختصار
- التدرجات صور يصنعها المتصفح للخلفيات
linear-gradient()يمزج على خط؛radial-gradient()من مركز- كلمات الاتجاه والزوايا ونقاط اللون تتحكم بالمظهر
- صلّها بـ
background-imageأو اختصارbackground - أبقِ تباين النص قوياً فوق التدرج
- تمرّن على لافتة خطية وبطاقة شعاعية قبل الحيل الأثقل
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى