مولّد التدرّجات

تدرّج CSS صورة يرسمها المتصفّح لا ينزّلها. ولهذا يتمدّد إلى أي مقاس بلا ضبابية، ولا يكلّف طلب شبكة، ويمكن تحريكه بتغيير الأرقام.

الخطّي يجري على زاوية، حيث 0deg تشير إلى الأعلى وتزيد الزوايا باتجاه عقارب الساعة — فـ90deg تجري من اليسار إلى اليمين و180deg من الأعلى إلى الأسفل. وهذا يوقع الناس لأنه عكس الصياغة القديمة ذات بادئة المورّد، حيث كانت الزاوية تصف من أين جاء التدرّج.

والدائري ينتشر خارجًا من نقطة. فالدائرة تبقى مستديرة مهما كان شكل الصندوق؛ والقطع الناقص يتمدّد ليتبعه، وهو ما تريده عادةً في لافتة عريضة.

والمخروطي يمسح حول نقطة كعقرب ساعة. وهو ما تُصنع منه الرسوم الدائرية وعجلات الألوان، ومع محطّات حادّة — محطّتان عند الموضع نفسه — ينتج قطاعات مسطّحة لا مزجًا.

الوسط الموحل، وكيف تصلحه. ضع أزرق مشبَعًا عند 0% وأصفر مشبَعًا عند 100%. يصير الوسط أخضر رماديًّا بلا حياة. وليس ذلك علّة — فالمتصفّح يستوفي في sRGB، مارًّا مباشرةً بوسط مكعّب الألوان، ووسط المكعّب رمادي. أضف محطّة ثالثة عند 50% بالصبغة التي توقّعت أن يمرّ بها الانتقال فيدبّ التدرّج كله حيًّا.

والمحطّات الحادّة تصنع خطوطًا. اضبط محطّتين على الموضع نفسه، لنقل كلتيهما عند 50%، فيتغيّر اللون فورًا بدل أن يمتزج. وكرّر النمط فيكون لديك خلفية مخطّطة بلا ملف صورة — نافعة لأشرطة التقدّم وشريط التحذير والتظليل القطري الذي يعلّم منطقة معطَّلة.

والتدرّج الخفيّ يتفوّق على لون مسطّح على الأسطح الكبيرة. فمحطّتان بينهما بضع نقاط مئوية في الإضاءة تعطيان خلفية صفحة عمقًا لا يعطيه ملء صلب، وعند تلك المسافة لا يسجّله أحد واعيًا تدرّجًا. أما تدرّج اللونين الزاهيين البديهي فموضة؛ وهذا ليس كذلك.

وما ينبغي الانتباه له. النص فوق تدرّج له نسبة تباين مختلفة عند كل طرف. افحص الطرفين المتطرّفين في فاحص التباين، لا نقطة الوسط وحدها — فنصّ عنوان مقروء أعلى قسم رئيسي وغير مرئي أسفله إخفاق شائع ويمكن تفاديه كليًا.