مولّد تدرجات CSS
ابنِ تدرجًا بصريًا وانسخ CSS.
- يعمل في متصفحك — ولا يُرسل نصك إلى أي مكان
- دون تسجيل، ودون حصص، ومجاني بالقدر الذي تريده
كيف يعمل
تُكتب التدرجات في CSS تصريحًا واحدًا يسهل تذكّر صياغته خطأً، خصوصًا اصطلاح الزاوية وموضع نقاط توقف الألوان. ومشاهدة النتيجة أثناء الضبط أسرع من إعادة تحميل صفحة للتحقق.
اصطلاح الزاوية يوقع الناس في الخطأ
في CSS، 0 درجة تشير إلى الأعلى وتزداد الزاوية في اتجاه عقارب الساعة، لذا فـ 90 درجة تمتد من اليسار إلى اليمين و180 درجة من الأعلى إلى الأسفل. وهذا يختلف عن الاصطلاح الرياضي وعن عدة أدوات تصميم، ولهذا كثيرًا ما يخرج تدرج منسوخ من مكان آخر مدوَّرًا.
الأنواع الثلاثة
يمتد الخطي على طول خط مستقيم ويغطي كل الاستخدامات الفعلية تقريبًا. ويتوسع الشعاعي إلى الخارج من نقطة، وهو ما يناسب التوهج والأضواء الكاشفة. ويدور المخروطي حول مركز، وهو ما تُبنى منه المخططات الدائرية وعجلات الألوان.
التدرج صورة لا لون
هذا هو الأمر الآخر الذي يوقع الناس. يعامل CSS التدرج كصورة خلفية، فيعمل في background وbackground-image لا في color أو border-color أو أي شيء آخر يتوقع لونًا عاديًا. وتحتاج تدرجات النص إلى background-clip، وهي تقنية منفصلة.
إضافة لون أوسط
تعطي نقطتا توقف مزجًا نظيفًا. وتتيح الثالثة تمرير الانتقال عبر صبغة أخرى، مما يتجنب الرمادي الباهت الذي يظهر حين يمتزج لونان متضادان مباشرةً.
مولّد تدرجات CSS — أسئلة
إلى أين تتجه الزاوية؟
0 درجة تشير إلى الأعلى وتزداد الزوايا في اتجاه عقارب الساعة، لذا فـ 90 درجة من اليسار إلى اليمين.
لماذا لا يعمل تدرجي على النص؟
التدرج صورة خلفية لا لون. وتحتاج تدرجات النص إلى background-clip كخطوة منفصلة.
متى أستخدم الشعاعي أو المخروطي؟
الشعاعي للتوهج والأضواء الكاشفة، والمخروطي لتأثيرات المخطط الدائري وعجلة الألوان. ويغطي الخطي معظم الحالات الأخرى.