التعامل مع الخلفيات (Backgrounds) والحدود (Borders)

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

هناك نوعان رئيسيان من التدرجات (gradients) في CSS: التدرجات الخطية (linear gradients) والتدرجات الشعاعية (radial gradients).

يعمل التدرج الخطي (linear gradient) على الانتقال بين الألوان على طول خط مستقيم، ويمكنك تحديد الاتجاه (direction) والألوان المستخدمة.

إليك الصيغة الأساسية (basic syntax) :

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

في هذا المثال، نستخدم خاصية CSS المسماة background بقيمة تدرج خطي linear-gradient.

يُحدِّد هذا الخيار اتجاه التدرج؛ إذ يمكن أن يكون زاوية (مثل 45deg)، أو كلمة مفتاحية (مثل to right أو to bottom)، أو جانباً أو زاوية (side/corner).

تُحدِّد color-stop الألوان والمواقع التي تحدث عندها انتقالات التدرج اللوني (gradient transitions).

لفهم كيفية عمل التدرجات الخطية (linear gradients) بشكل أفضل، دعنا نلقي نظرة على المثال التالي:

<link rel="stylesheet" href="styles.css">

<div class="linear-gradient"></div>
          

.linear-gradient {
 background: linear-gradient(to right, red, yellow);
 height: 40vh;
}
          

معاينة:

ينشئ كود CSS هذا تدرجاً لونياً خطياً (linear gradient) ينتقل من اللون الأحمر red على اليسار left إلى اللون الأصفر yellow على اليمين right. يُطبَّق هذا التدرج على عنصر يبلغ ارتفاعه 40% من ارتفاع منطقة العرض (viewport). وسوف تتعرف أكثر على وحدات vh في درس قادم.

يعني الاتجاه "إلى اليمين" to right أن التدرج (gradient) يمتد أفقياً من اليسار إلى اليمين.

نوع آخر من التدرجات هو التدرج الشعاعي (radial gradient).

يُحدث التدرج الشعاعي (radial gradient) انتقالاً لونياً (transitions colors) ينطلق من نقطة أصل (عادةً ما تكون المركز) نحو الخارج، متخذاً شكلاً دائرياً أو إهليلجياً (circular or elliptical shape).

إليك الصيغة الأساسية (basic syntax) :

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

فيما يتعلق بالصيغة، يحدد المعامل shape شكل التدرج، والذي يمكن أن يكون دائرياً circle أو بيضاوياً ellipse.

يُحدِّد الحجمُ size أبعادَ الشكل النهائي للتدرج، والذي يمكن أن يكون الجانب الأقرب closest-side ، أو الزاوية الأقرب closest-corner ، أو الجانب الأبعد farthest-side ، أو الزاوية الأبعد farthest-corner.

تُحدِّد الخاصية position موقع مركز التدرج، والذي يمكن تعيينه باستخدام كلمات مفتاحية (مثل center أو top left أو bottom right) أو قيم دقيقة (مثل 50% 50% أو 10px 20px).

وأخيراً، تُعد "نقاط توقف اللون" (color stops) قائمةً بالألوان التي يمر عبرها التدرج اللوني؛ ويمكن لكل نقطة منها أن تتضمن - اختيارياً - قيمةً للموقع (سواء كانت نسبة مئوية أو وحدة قياس طول) تحدد الموضع الذي يجب وضع اللون فيه.

على سبيل المثال:

<link rel="stylesheet" href="styles.css">

<div class="radial-gradient"></div>
          

.radial-gradient {
 background: radial-gradient(circle closest-side at center, red, yellow 50%, green);
 height: 60vh;
}
          

معاينة:

ينشئ كود CSS هذا تدرجاً شعاعياً دائرياً (circular radial gradient) يتمركز في العنصر؛ إذ يبدأ باللون الأحمر red في المركز، وينتقل إلى اللون الأصفر yellow عند 50% من نصف القطر، وينتهي باللون الأخضر green.

تجعل الكلمة المفتاحية closest-side الشكل النهائي للتدرج اللوني يتناسب مع أقرب جانب من جوانب العنصر. ويُطبَّق التدرج على عنصر يبلغ ارتفاعه 60% من ارتفاع منطقة العرض (viewport).

إن فهم كيفية التعامل مع التدرجات اللونية في CSS يمكن أن يعزز تصاميمك بشكل كبير، وذلك من خلال توفير خلفيات جذابة بصرياً دون الحاجة إلى استخدام الصور.

مع توفر خيارات مثل التدرجات الخطية (linear gradients) للانتقالات السلسة والتدرجات الشعاعية (radial gradients) لتأثيرات دائرية، فإنها تتيح المرونة والإبداع في تصميم الويب.