دليل CSS

قواعد CSS (RULES)

مجمل الخصائص في CSS

دالة hsl() في CSS

يمكن استخدام دالة hsl() في CSS لتقديم قيم الألوان. إنها تسمح لك بتحديد قيمة اللون من خلال تحديد مكونات اللون الألوان،التشبع،إضاءة.

وظائف CSS

مثال عبر الإنترنت

تعريف لون HSL:

مثال

<!DOCTYPE html>
<title>دليل الأساسيات(oldtoolbag.com)</title>　
<style>
body {
　　　　background: hsl(30, 100%, 50%);
　　　　color: hsl(30, 100%, 75%);
　　　　font-size: 1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>سيأخذ بعض الوقت للقيام بأشياء لم نقم بها من قبل...</p>

التحقق من ذلك لمعرفة ‹/›

التعريف والاستخدام

يستخدم دالة hsl() اللون،التشبع،إضاءة لتعريف اللون.

HSL هو اللون،التشبع،إضاءة (باللغة الإنجليزية: Hue, Saturation, Lightness).

اللون (H)هي الخاصية الأساسية للألوان،وهي ما يُقال عادة عن اسم اللون،مثل الأحمر والأصفر وما إلى ذلك.
التشبع (S)تعني نقاء الألوان،كلما زادت النقاء كلما أصبحت الألوان أكثر نقاء،أقل نقاء تدريجياً تصبح الألوان رمادية،تُقاس بنسبة 0-100%.
إضاءة (L)،تُقاس من 0-100%،زيادة الإضاءة تجعل الألوان تتحول نحو البياض؛تقليل الإضاءة يجعل الألوان تتحول نحو السواد。

HSL هو طريقة لتمثيل نقطة في نموذج اللون RGB في نظام الإحداثيات الأفقية. هذان التمثيلان يحاولان أن يكونا أكثر وضوحًا من RGB القائم على بنية الجيومترية للإحداثيات الكارتيزية.

إصدار الدعم: CSS3

توافق المتصفحات

الرقم في الجدول يُمثل إصدار المتصفح الأول الذي يدعم هذه الوظيفة.

الوظيفة
hsl()	1.0	9.0	1.0	3.1	9.5

قواعد اللغة CSS

hsl(hue, saturation, lightness)

القيمة	الوصف
لون - لون	تحديد اللون (من 0 إلى 360) - 0 (أو 360) كأحمر، 120 كأخضر، 240 كأزرق
كثافة - كثافة	تحديد الكثافة؛ 0% كرمادي، 100% كامل اللون
إضاءة - إضاءة	تحديد الإضاءة 0% كداكنة، 50% كمعتدلة، 100% كبيضاء

مثال على تغيير اللون

في الرسم البياني أدناه، جميع العينات للون والضوء متطابقة تمامًا. الفرق الوحيد هو الكثافة.

`hsl(240, 100%, 50%)`
`hsl(240, 90%, 50%)`
`hsl(240, 80%, 50%)`
`hsl(240, 70%, 50%)`
`hsl(240, 60%, 50%)`
`hsl(240, 50%, 50%)`
`hsl(240, 40%, 50%)`
`hsl(240, 30%, 50%)`
`hsl(240, 20%, 50%)`
`hsl(240, 10%, 50%)`
`hsl(240, 0%, 50%)`

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

`hsl(240, 100%, 100%)`
`hsl(240, 100%, 90%)`
`hsl(240, 100%, 80%)`
`hsl(240, 100%, 70%)`
`hsl(240, 100%, 60%)`
`hsl(240, 100%, 50%)`
`hsl(240, 100%, 40%)`
`hsl(240, 100%, 30%)`
`hsl(240, 100%, 20%)`
`hsl(240, 100%, 10%)`

وظائف CSS

قاعدة CSS @charset وظائف CSS