منحدرات

بودكاست CSS - 021: التدرجات

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

خلفية متدرجة باللون الأرجواني الداكن مع عنوان أو فقرة ورابط

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

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

منحدر خطي

دعم المتصفح

  • 26
  • 12
  • 16
  • 7

المصدر

تُنشئ الدالة 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()، ويمكنك وضع التدرجات فوق بعضها عن طريق الفصل بين كل تدرج بفاصلة.

منحدر شعاعي

دعم المتصفح

  • 26
  • 12
  • 16
  • 7

المصدر

لإنشاء تدرج يشعّ في شكل دائري، تساعدك الدالة 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.

متدرج مخروطي

دعم المتصفح

  • 69
  • 79
  • 83
  • 12.1

المصدر

يشتمل التدرج المخروطي على نقطة مركزية في المربع الخاص بك ويبدأ من الأعلى (افتراضيًا)، ويدور في دائرة بزاوية 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، بالإضافة إلى تحديد أي عدد من التدرجات كما تريد، تمامًا كما تفعل مع صورة خلفية. على سبيل المثال، يمكنك مزج عدة تدرجات خطية معًا، أو تدرجين خطيين مع تدرج شعاعي.

المراجِع

التحقّق من استيعابك

اختبر معلوماتك حول التدرجات

ما الحد الأدنى لعدد الألوان المطلوبة لإنشاء تدرج؟

1
يُرجى اختيار إجابة أخرى.
2
يمكن أن تكون بنفس اللون وتبدو خالصة، ولكن نعم، يلزم لونين على الأقل.
3
يُرجى اختيار إجابة أخرى.
4
يُرجى اختيار إجابة أخرى.

هل يمكن أن تحتوي العناصر على تدرجات متعددة كخلفية؟

صحيح
تسمح السمة background-image بالعديد من التدرجات، ما عليك سوى الفصل بينها بفاصلة.
خطأ
أوه، لكن يمكنهم!