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

كيفية الاستخدام مولّد التدرّجات CSS

1. اختر نوع التدرّج وحدّد نقاط التوقّف اللونية.
2. اضبط الزاوية أو المركز، واختر فضاء الاستيفاء عند الحاجة.
3. انسخ الشيفرة الجاهزة.

الاتجاه في التخطيطات العربية

نقطة تفوت كثيرًا: التدرّج لا يتبع اتجاه الكتابة.

فالقيمة to right تعني اليمين الفيزيائي دائمًا، سواء كانت الصفحة من اليسار إلى اليمين أو العكس. وهذا يخالف بقية التخطيط الذي ينعكس مع dir="rtl".

والنتيجة أن تدرّجًا مصمَّمًا ليبدأ من بداية السطر يبدأ في التصميم العربي من نهايته. وهو خطأ لا يظهر في المعاينة إن كانت المعاينة بالإنجليزية.

وليس في CSS حتى الآن قيمة منطقية مباشرة لاتجاه التدرّج مدعومة على نطاق واسع. والحل العملي: استخدم زاوية صريحة، أو اقلب اتجاه التدرّج داخل قاعدة [dir="rtl"]. والقاعدة الثانية بضعة أسطر ومقبولة، لأن التدرّجات قليلة عادةً.

لماذا يتّسخ منتصف التدرّج؟

لأن الاستيفاء يجري افتراضيًا في فضاء sRGB، والطريق بين لونين مشبعين يمرّ هناك بمنطقة باهتة.

والمثال المعتاد أزرق إلى أصفر: يظهر في المنتصف رمادي موحل بدل أخضر حيوي. والأمر نفسه في أحمر إلى أخضر.

والحل تغيير فضاء الاستيفاء: in oklch أو in lch يمرّ بالمسار المشبع فيحفظ حيوية اللون على المسافة كلها.

وحيث يلزم دعم متصفحات قديمة يفيد إضافة نقطة توقّف وسيطة يدويًا: لون ثالث في المنتصف يجرّ التدرّج إلى حيث يجب أن يمرّ.

الأنواع الثلاثة والأداء

التدرّج الخطي يسير على محور، والشعاعي من نقطة إلى الخارج، والمخروطي يدور حول نقطة.

والمخروطي أسهل طريق إلى مخطط دائري بلا مكتبة: نقاط توقّف حادة عند النسب المطلوبة. ومع قناع يصلح لحلقات التقدّم.

وعن الأداء: التدرّجات الثابتة رخيصة. والمكلف تحريكها، لأن التدرّج يُعاد رسمه في كل إطار. وللتدرّج المتحرّك الأفضل إزاحة تدرّج أكبر ثابت عبر background-position.

الأسئلة الشائعة