على عكس خصائص التخطيط المنطقية مثل margin-inline-start التي تنعكس تلقائيًا في الصفحات ذات الاتجاه من اليمين إلى اليسار، فإن زوايا واتجاهات التدرجات في CSS ثابتة فيزيائيًا — وهذا فرق يستحق الانتباه عند بناء واجهة عربية.
ثلاث هندسات لانتقال اللون
يمدّ linear-gradient(45deg, red, blue) اللون على طول خط مستقيم بزاوية محددة، وهو الأكثر شيوعًا في خلفيات الأزرار واللافتات والبطاقات. يوزّع radial-gradient(circle, yellow, orange) اللون في دوائر أو أشكال بيضاوية من نقطة إلى الخارج، مناسب لمحاكاة بقعة ضوء. أما conic-gradient(red, yellow, green, blue, red) فيدوّر اللون حول نقطة مركزية كعقرب الساعة، وهو النوع الوحيد القادر على رسم مخطط دائري أو مؤشر تقدّم حلقي دون رسومات إضافية.
لماذا "to left" لا يصبح "يمينًا" في صفحة عربية
عند كتابة linear-gradient(to left, red, blue) فإن الاتجاه يبقى نحو الحافة اليسرى الفعلية للعنصر دائمًا، بصرف النظر عن اتجاه النص (dir="rtl") أو قيمة direction في CSS. الزوايا والكلمات المفتاحية للاتجاه في التدرجات هي خصائص هندسية فيزيائية بحتة، على عكس خصائص مثل padding-inline-start التي تتبع منطق الكتابة وتنعكس تلقائيًا في الصفحات العربية. لذلك يحتاج المصمم أحيانًا إلى عكس الزاوية يدويًا — أو استخدام calc() على متغيّر اتجاه — إذا أراد أن يبدو التدرج متسقًا بصريًا بين نسختي الموقع اليسارية واليمينية.
نقاط توقف اللون والتكرار
يمكن ربط كل لون بموضع محدد بالنسبة المئوية، مثل linear-gradient(red 0%, yellow 50%, blue 100%)، للتحكم بمدى حدة الانتقال. تعيد دالتا repeating-linear-gradient() وrepeating-radial-gradient() تكرار سلسلة نقاط التوقف تلقائيًا حتى تملأ العنصر، فتنشئان نمطًا مخططًا أو شطرنجيًا بسطر CSS واحد.
لماذا نحتاج هذا
- اختيار ونسخ كود CSS جاهز لتدرج بسرعة دون ضبط الزوايا والألوان يدويًا.
- فهم أي نوع من التدرج يناسب تأثيرًا بصريًا معينًا.
- ضبط مواضع نقاط توقف اللون بدقة للانتقال المطلوب، مع مراعاة اتجاه الصفحة.