خاصية التدرجات اللونية (Gradients) في CSS تُستخدم لإنشاء خلفيات متدرجة الألوان، أي خلفيات تنتقل فيها الألوان بسلاسة من لون إلى آخر. تُعتبر هذه الخاصية قوية جدًا في تصميم واجهات المستخدم الحديثة، حيث تُضفي جمالية وعمقًا على العناصر.

يتم استخدام التدرجات اللونية مع الخاصية background-image، حيث تُعتبر التدرجات نوعًا من أنواع الصور في CSS.

هناك ثلاثة أنواع رئيسية من التدرجات اللونية في CSS:

1. التدرج الخطي (Linear Gradients):

  • ينتقل اللون بشكل خطي من نقطة إلى أخرى.

  • يتم استخدام الدالة linear-gradient() لإنشاء هذا النوع من التدرجات.

  • بنية linear-gradient():

CSS
linear-gradient(direction, color-stop1, color-stop2, ...);

  • direction: يُحدد اتجاه التدرج. يمكن أن يكون:

    • زاوية بالدرجات (مثل 45deg، -90deg).
    • كلمات مفتاحية (مثل to top، to bottom، to left، to right، to top left، to bottom right، إلخ).

  • color-stop: يُحدد لون التوقف وموقعه. يتكون من لون اختياريًا يليه موقع التوقف (نسبة مئوية أو قيمة مطلقة).

  • أمثلة:

CSS
/* تدرج من الأعلى إلى الأسفل (افتراضي) */
background-image: linear-gradient(red, blue);

/* تدرج من اليسار إلى اليمين */
background-image: linear-gradient(to right, red, blue);

/* تدرج بزاوية 45 درجة */
background-image: linear-gradient(45deg, red, blue);

/* تدرج بثلاثة ألوان */
background-image: linear-gradient(red, yellow, green);

/* تدرج مع تحديد مواقع التوقف */
background-image: linear-gradient(to right, red 20%, yellow 60%, green);

2. التدرج القطري (Radial Gradients):

  • ينتقل اللون بشكل دائري من نقطة مركزية.

  • يتم استخدام الدالة radial-gradient() لإنشاء هذا النوع من التدرجات.

  • بنية radial-gradient():

CSS
radial-gradient(shape size at position, color-stop1, color-stop2, ...);

  • shape: يُحدد شكل التدرج. يمكن أن يكون circle (دائرة) أو ellipse (قطع ناقص، افتراضي).

  • size: يُحدد حجم التدرج. يمكن أن يكون:

    • closest-side
    • farthest-side
    • closest-corner
    • farthest-corner
    • قيمة مطلقة أو نسبة مئوية.

  • at position: يُحدد موقع مركز التدرج.

  • color-stop: نفس تعريف color-stop في التدرج الخطي.

  • أمثلة:

CSS
/* تدرج دائري من المركز */
background-image: radial-gradient(red, blue);

/* تدرج دائري مع تحديد الحجم */
background-image: radial-gradient(circle farthest-corner, red, blue);

/* تدرج قطري مع تحديد الموقع */
background-image: radial-gradient(ellipse at top left, red, blue);

3. التدرج المخروطي (Conic Gradients):

  • ينتقل اللون حول نقطة مركزية بشكل دائري، مثل مخروط.

  • يتم استخدام الدالة conic-gradient() لإنشاء هذا النوع من التدرجات.

  • بنية conic-gradient():

CSS
conic-gradient(from angle at position, color-stop1, color-stop2, ...);

  • from angle: يُحدد زاوية البداية.

  • at position: يُحدد موقع مركز التدرج.

  • color-stop: نفس تعريف color-stop في التدرج الخطي.

  • أمثلة:

CSS
/* تدرج مخروطي من المركز */
background-image: conic-gradient(red, blue);

/* تدرج مخروطي بزاوية بداية */
background-image: conic-gradient(from 90deg, red, blue);

/* تدرج مخروطي مع تحديد الموقع */
background-image: conic-gradient(at top left, red, blue);

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

  • يُمكن استخدام أكثر من لون في التدرج.
  • يُمكن التحكم في مواقع توقف الألوان بدقة باستخدام النسب المئوية أو القيم المطلقة.
  • يُمكن استخدام التدرجات مع خصائص أخرى مثل background-size و background-repeat.
  • يُمكن استخدام دوال التدرج بشكل متكرر باستخدام الدوال repeating-linear-gradient(), repeating-radial-gradient(), و repeating-conic-gradient().

أمثلة إضافية:

CSS
/* تدرج خطي متكرر */
background-image: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);

/* تدرج قطري متكرر */
background-image: repeating-radial-gradient(circle, red, red 10%, blue 10%, blue 20%);

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