ما هو تدرّج CSS؟
أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان قابلة للسحب، وأوضاع مزج، وCSS جاهز للاستخدام.
تدرّج CSS هو صورة ينشئها المتصفح من انتقال سلس بين الألوان. بما أنه يُحسب أثناء العرض، فإنه يتدرج بسلاسة لأي حجم دون تشوّه ولا يحتاج إلى ملفات صور.
هناك ثلاثة أنواع: خطي (اتجاه أو زاوية)، شعاعي (دائرة أو بيضوي من مركز)، ومخروطي (مسح حول مركز). يُعرَّف كل تدرّج بنقاط توقف لونية؛ ويمكن لكل نقطة تحديد الموضع والشفافية للتحكم في المزج.
يمكن تكديس عدة تدرجات بفصلها بفواصل في background-image، ودمجها عبر background-blend-mode للحصول على أنسجة أغنى. يدعم CSS أيضًا الاستيفاء في فضاءات لونية مثل oklch للحصول على انتقالات أكثر سلاسة إدراكيًا.
- التدرجات الخطية مناسبة للإضاءة والعمق الاتجاهي.
- التدرجات الشعاعية والمخروطية مفيدة للإضاءات الدائرية والحلقات وعجلات الألوان.
- اضبط مواضع نقاط التوقف لجعل الانتقال أكثر حدة أو نعومة.