منحدرات

The CSS Podcast - 021: Gradients

لنفترض أنّ لديك موقعًا إلكترونيًا تريد إنشاؤه، وبجانبه في أعلى الصفحة، تظهر مقدمة تتضمّن عنوانًا وملخّصًا وزرًا. قدّم المصمّم تصميمًا يتضمّن خلفية أرجوانية لهذه المقدمة. المشكلة الوحيدة هي أنّ الخلفية تعرض لونَين من اللون الأرجواني على شكل تدرّج. كيف يتم ذلك؟

قد تعتقد في البداية أنّك ستحتاج إلى تصدير صورة من أداة التصميم لإجراء ذلك، ولكن يمكنك استخدام linear-gradient بدلاً من ذلك.

التدرّج هو صورة ويمكن استخدامه في أي مكان يمكن فيه استخدام الصور، ولكن يتم إنشاؤه باستخدام CSS ويتكون من ألوان وأرقام وزوايا. تتيح لك تدرجات CSS إنشاء أي شيء بدءًا من تدرج سلس بين لونَين وحتى عمل فني مثير للإعجاب من خلال مزج تدرجات متعددة وتكرارها.

منحدر خطي

تنشئ الدالة linear-gradient() صورة من لونَين أو أكثر بشكل تدريجي. يأخذ هذا الدالة عدة وسيطات، ولكن في أبسط إعداداته، يمكنك تمرير بعض الألوان على النحو التالي، وسيتم تقسيمها تلقائيًا بالتساوي مع مزجها.

.my-element {
    background: linear-gradient(black, white);
}

يمكنك أيضًا تمرير زاوية أو كلمات رئيسية تمثّل زاوية. إذا اخترت استخدام الكلمات الرئيسية، حدِّد اتجاهًا بعد الكلمة الرئيسية to. وهذا يعني أنّه إذا كنت تريد تدرّجًا باللونَين الأسود والأبيض، يمتد من اليسار (أسود) إلى اليمين (أبيض)، عليك تحديد الزاوية على أنّها to right كوسيطة أولى.

.my-element {
    background: linear-gradient(to right, black, white);
}

قيمة نقطة توقف اللون التي يتم تحديدها عند توقف لون معيّن واختلاطه بالألوان المجاورة بالنسبة إلى التدرّج الذي يبدأ بظلّ داكن من اللون الأحمر بزاوية 45 درجة، عند 30% من حجم التدرّج يتغيّر إلى لون أحمر أفتح: سيظهر على النحو التالي.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

يمكنك إضافة أي عدد تريده من الألوان ونقاط اللون في linear-gradient()، ويمكنك وضع تدرّجات الألوان فوق بعضها البعض عن طريق الفصل بين كل تدرّج بفاصلة.

منحدر شعاعي

لإنشاء انتقال شعاعي بشكل دائري، يمكنك استخدام الدالة radial-gradient(). وهو مشابه لعنصر linear-gradient()، ولكن بدلاً من تحديد زاوية، يمكنك اختياريًا تحديد موضع وشكل نهاية. إذا حدّدت الألوان فقط، سيختار الرمز radial-gradient() تلقائيًا الموضع على أنّه center ويختار إما دائرة أو بيضاوية، استنادًا إلى حجم المربّع.

.my-element {
    background: radial-gradient(white, black);
}

يكون موضع التدرّج مشابهًا لـ background-position باستخدام الكلمات الرئيسية و/أو القيم الرقمية. يحدّد حجم التدرّج الشعاعي حجم الشكل النهائي للتدرّج (دائرة أو بيضاوية)، وسيكون تلقائيًا farthest-corner، ما يعني أنّه يتلاقى تمامًا مع أبعد زاوية من المربّع عن المركز. يمكنك أيضًا استخدام الكلمات الرئيسية التالية:

• سيلتقي closest-corner بأقرب زاوية إلى مركز التدرج اللوني.
• سيلتقي closest-side بجانب المربّع الأقرب إلى مركز التدرّج.
• سيؤدي farthest-side إلى العكس من closest-side.

يمكنك إضافة أي عدد تريده من نقاط اللون، تمامًا كما هو الحال مع linear-gradient. وبالمثل، يمكنك إضافة أي عدد تريده من radial-gradients.

التدرّج المخروطي

يتضمّن التدرّج المخروطي نقطة مركزية في المربّع ويبدأ من الأعلى (تلقائيًا)، ويدور في دائرة بزاوية 360 درجة.

.my-element {
    background: conic-gradient(white, black);
}

تقبل الدالة conic-gradient() وسيطات الموضع والزاوية.

تكون الزاوية تلقائيًا 0 درجة، وتبدأ من أعلى الشاشة في منتصفها. إذا ضبطت الزاوية على 45deg، سيكون ذلك في أعلى يسار الشاشة. تقبل وسيطة الزاوية أي نوع من قيم الزاوية، مثل التدرجات اللونية الخطية والشعاعية.

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

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

التكرار والاختلاط

ولكل نوع من أنواع التدرجات نوع متكرر أيضًا. وهي رمزَا repeating-linear-gradient() و repeating-radial-gradient() و repeating-conic-gradient(). وهي مشابهة للدوالّ غير المتكرّرة وتستخدِم الوسيطات نفسها. الفرق هو أنّه إذا كان من الممكن تكرار التدرّج المحدّد لملء المربّع، سيتم تكراره استنادًا إلى حجمَي المربّعَين.

إذا لم يظهر لك أنّ التدرّج اللوني يتكرر، من المحتمل أنّك لم تضبط طولًا لأحد نقاط اللون. على سبيل المثال، يمكنك إنشاء خلفية مخططة باستخدام repeating-linear-gradient من خلال ضبط أطوال نقاط اللون.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

يمكنك أيضًا مزج دوالّ التدرّج في background السمات، بالإضافة إلى تحديد أي عدد تريده من التدرّجات، تمامًا كما تفعل مع صورة الخلفية. على سبيل المثال، يمكنك مزج عدة تدرّجات خطية معًا، أو تدرّجَين خطيَّين مع تدرّج شعاعي.

الموارد

• Conic.css: مجموعة مفيدة من التدرجات اللونية المخروطية
• دليل MDN حول التدرجات
• أداة إنشاء التدرّجات

التحقّق من فهمك

اختبِر معلوماتك حول التدرجات اللونية