دليل مرجعي لـ CSS

قواعد CSS (RULES)

دليل الخصائص الكاملة لـ CSS

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

دالة hsla() في CSS

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

تحديد لون HSL، وإعداد الشفافية:

مثال

<!DOCTYPE html>
<title>دليل الأساسيات(oldtoolbag.com)</title>　
<style>
body {
　　　　background: url('/run/images/bg2.png') beige;
　　　　color: hsla(0, 0%, 0%, 1);
　　　　font-size: 2em;
　}
article {　
　　　　background-color: hsla(30, 100%, 50%, 0.5);
　　　　border: 5px solid darkorange;
　　　　margin: 20px;
　　　　text-align: center;
　　　　}
</style>
</head>
<body>
<article>
<h1>Stars</h1>
</article>
</body>
</html>

التحقق من ذلك <‹/›

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

استخدام دالة hsla() اللون، والسماكة، والإضاءة، والشفافية لتحديد اللون.

HSL هو اللون، والسماكة، والإضاءة، والشفافية (باللغة الإنجليزية: Hue, Saturation, Lightness, Alpha).

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

الإصدارات المدعومة: CSS3

مروحة التطبيق المتوافق

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

الدوال
hsla()	1.0	9.0	1.0	3.1	9.5

نحو CSS

hsla(hue, saturation, lightness, alpha)

القيمة	الوصف
لون - اللون	تحديد اللون (من 0 إلى 360) - 0 (أو 360) للأحمر، 120 للخضر، 240 للأزرق
سطوع - السطوع	تحديد السطوع; 0% للرمادي، 100% للنقي
لمعان - اللمعان	تحديد اللمعان 0% للداكن، 50% للمعتدل، 100% للبياض
alpha - الشفافية	تحديد الشفافية 0 (شفاف تمامًا) ~ 1 (غير شفاف تمامًا)

التغيرات في Alpha

إليك مثال على نفس اللون يتكرر عدة مرات (على الصورة الخلفية) ولكن لديها قيم alpha مختلفة.

جميع القيم الأخرى متشابهة (أي، جميع الأطوال اللونية، السواتر والضوء متشابهة)، فقط قناة alpha ستتغير.

هذا يعني أن مع زيادة قيمة alpha، تصبح الصورة الخلفية أقل وضوحًا (النجوم هي الصورة الخلفية).

الأزرق

`hsla(240, 100%, 50%, 0)`
`hsla(240, 100%, 50%, 0.1)`
`hsla(240, 100%, 50%, 0.2)`
`hsla(240, 100%, 50%, 0.3)`
`hsla(240, 100%, 50%, 0.4)`
`hsla(240, 100%, 50%, 0.5)`
`hsla(240, 100%, 50%, 0.6)`
`hsla(240, 100%, 50%, 0.7)`
`hsla(240, 100%, 50%, 0.8)`
`hsla(240, 100%, 50%, 0.9)`
`hsla(240, 100%, 50%, 1)`

ضبط HSL

على عكس نموذج RGB، نموذج اللون HSL أكثر وضوحًا في ضبط الألوان. خاصةً عندما تعرف كيف يعمل HSL.

لقد كتبت بالفعل عن hsl() محتوى الدالة، التي توضح hsla()وظائفها أكثر تفصيلاً مما كتب هنا. إذا كنت غير متأكد من كيفية ضبط وتعديل اللون الأساسي، يرجى التحقق من ذلك.

دوال CSS

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