18. ألوان متقدمة: HSL والشفافية

إلى جانب RGB، يقدم CSS نماذج ألوان قوية مثل HSL، والتي غالباً ما يُفضل استخدامها لسهولة قراءتها ومعالجتها.

HSL (Hue, Saturation, Lightness)

يصف HSL الألوان بطريقة أكثر بديهية للبشر من RGB:

1. صبغة اللون (Hue) (0-360): الدرجة الفعلية للون (مثلاً: 0/360 هو الأحمر، 120 هو الأخضر، 240 هو الأزرق).
2. التشبع (Saturation) (0%-100%): مدى حيوية اللون (0% رمادي، 100% لون كامل).
3. الإضاءة (Lightness) (0%-100%): مدى سطوع اللون (0% أسود، 100% أبيض، 50% اللون 'الحقيقي').

HSLA تضيف قناة Alpha (الشفافية).

css /* التنسيق: HSL(Hue, Saturation, Lightness) / .vibrant-blue { color: hsl(220, 80%, 45%); / أزرق عميق متوسط */ }

/* أخضر فاتح وباهت بشفافية 75% */ .semi-transparent { background-color: hsla(100, 30%, 80%, 0.75); }

الميزة: تغيير التشبع أو الإضاءة للون HSL سهل دون التأثير على صبغة اللون، مما يجعله مثالياً لإنشاء لوحات الألوان (مثل إنشاء حالة فاتحة عند تمرير الماوس).

خاصية Opacity

تحدد خاصية opacity مستوى الشفافية لـ العنصر بأكمله، بما في ذلك محتواه وأطفاله وخلفيته.

• تتراوح القيمة من 0.0 (شفاف تماماً/غير مرئي) إلى 1.0 (معتم تماماً).

css .faded-element { background-color: black; opacity: 0.5; /* ستكون الخلفية السوداء والنص الموجود بداخلها شفافين بنسبة 50% */ }

ملاحظة: إذا كنت تريد أن تكون الخلفية فقط شفافة ويظل النص معتماً، فاستخدم دائماً rgba() أو hsla() بدلاً من خاصية opacity العامة.