منحدرات

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

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

قد تعتقد في البداية أنك ستحتاج إلى تصدير صورة من أداة التصميم الخاصة بك لهذا، ولكن يمكنك استخدام 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 للتدرجات اللونية
• أداة إنشاء التدرج

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

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