السلام عليكم، سنرى في هذا الدرس الألوان و الشفافية في CSS.
تسمى الخاصية Property المسؤولة عن تغيير الألوان في CSS بـ 'COLOR'، و لديها ثلاث أنواع قيم :
* قيمة بإسم اللون
* قيمة بنظام Hexadecimal
* قيمة بـ RGB و RGBa
قيمة الخاصية COLOR بأسماء الألوان
ليس جميع أسماء الألوان تكتب في قيمة الخاصية 'COLOR' تلقى دعم متصفحات الإنترنت، بل هناك عدد محدود تدعمه، هذا الجدول يوضح جميع أسماء الألوان المدعومة من أكبر متصفحات الإنترنت.
قيمة الخاصية COLOR بنظام Hexadecimal
ما هو نظام Hexadecimal ؟
نظام Hexadecimal و المصطلح عليه عربياً بنظام العد الست عشري هو نظام عد على أساس صحيح هو 16، فنظام العد المتداول بين الناس يسمى نظام العد العشري (Decimal) حيث أساسه هو 10 حيث يستعمل فيه العد من 0 إلى 9 ثم 0 و 1 الذي هو عشرة ثم 1 و 1 الذي هو إحدى عشر و ما إلى ذلك.. أما نظام العد الست عشري يستعمل فيه العد من 0 إلى 9 ثم A ثم B ثم C ثم D ثم E ثم F ثم 0 و 1 ثم 1 و 1 إلى 9 و 1 ثم A و 1 ثم B و 1 إلى F و 1 ثم 0 و 2 إلى F و F حيث يصنف العدد FF هو العدد الأخير في الأعداد المكونة من عددين، بعده يأتي 0 و 0 و 1 الذي هو مئة و إلى ما لا نهاية.
تنسيق قيمة الخاصية COLOR بنظام Hexadecimal
تكتب قيمة الخاصية COLOR بنظام Hexadecimal بالتنسيق التالي :
علامة Sharp (#) ثم عدد من 00 إلى FF يُحدِّد اللون الأحمر، ثم عدد من 00 إلى FF يحدد اللون الأخضر، ثم عدد من 00 إلى FF يحدد اللون الأزرق، ليكون التنسيق كالآتي nnnnnn#
اختصار القيمة
تختصر القيمة إذا كانت جميع أعداد الألوان في القيمة تتكون من عددين متشابهين، حينئذ يكتب العدد المتشابه مرة واحدة، مثلا يمكن لهذه القيمة AABBCC# أن تختصر و تصبح هكذا ABC#
الحصول على الألوان
الألوان الرئيسية
- للحصول على اللون الأحمر يجب إعطاء عدد كبير يصل إلى FF في عدد اللون الأحمر في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 00 في عدد اللون الأخضر و عدد اللون الأزرق في القيمة.
- للحصول على اللون الأخضر يجب إعطاء عدد كبير يصل إلى FF في عدد اللون الأخضر في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 00 في عدد اللون الأحمر و عدد اللون الأزرق في القيمة.
- للحصول على اللون الأزرق يجب إعطاء عدد كبير يصل إلى FF في عدد اللون الأزرق في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 00 في عدد اللون الأحمر و عدد اللون الأخضر في القيمة.
الأبيض و الأسود
- للحصول على اللون الأبيض يجب إعطاء عدد FF في أعداد الألوان الثلاثة في القيمة.
- للحصول على اللون الأسود يجب إعطاء عدد 00 في أعداد الألوان الثلاثة في القيمة.
إذن يعبر عن اللون الأبيض بأعلى قيمة أي FFFFFF# و يعبر عن اللون الأسود بأخفض قيمة أي 000000#، و بالتالي فإعطاء عدد مرتفع للون في القيمة سيُنتَج لون فاقع أو فاتح، أما بإعطاء عدد منخفض للون في القيمة سيُنتَج لون غامق أو داكن، و بمعنى أدق كلما اقتربنا من FF كان اللون فاقع، و كلما اقتربنا من 00 كان اللون غامق.
الألوان الثانوية
للحصول على لون ثانوي يجب معرفة مكانه نسبة إلى الألوان الرئيسية، و لمعرفة أمكنة الألوان يمكن الإستعانة بـ Chromatic Palette، فمثلاً نريد الحصول على اللون البنفسجي، يوجد هذا الأخير بين اللون الأحمر و الأزرق، و بالتالي يجب إعطاء عدد بين 01 و FF في عدد اللون الأحمر و اللون الأزرق في القيمة و تجاهل اللون الأخضر بإعطاءه 00، مع الأخذ بعين الإعتبار حدة اللون البنفسجي، يعني مثلاً إذا كان قريباً شيئاً ما من اللون الأحمر، يجب إعطاء عدد اللون الأحمر أكبر من عدد اللون الأزرق في القيمة.
الفيديو التوضيحي للدرس
قيمة الخاصية COLOR بـ RGB و RGBa
تنسيق قيمة الخاصية COLOR بـ RGB
RGB تعني Red Green Blue أي الأحمر الأخضر الأزرق، و هم الألوان الرئيسية التي رأيناها في قيمة الخاصية COLOR بـ Hexadecimal، حيث في هذه الأخيرة يقحم عدد اللون من 00 إلى FF، أما قيمة الخاصية COLOR بـ RGB فيقحم عدد اللون بنظام العد العشري، أي من 0 إلى 255، غير أن القيمة بـ RGB تكتب بتنسيق مغاير عن تنسيق القيمة بـ Hexadecimal و هو كالآتي :
تكتب RGB ثم يفتح القوس ثم عدد اللون الأحمر ثم عدد اللون الأخضر ثم عدد اللون الأزرق مفروقين بفاصلة ليكون التنسيق كالتالي :
(عدد اللون الأزرق , عدد اللون الأخضر , عدد اللون الأحمر)RGB
الحصول على الألوان
الألوان الرئيسية
- للحصول على اللون الأحمر يجب إعطاء عدد كبير يصل إلى 255 في عدد اللون الأحمر في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 0 في عدد اللون الأخضر و عدد اللون الأزرق في القيمة.
- للحصول على اللون الأخضر يجب إعطاء عدد كبير يصل إلى 255 في عدد اللون الأخضر في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 0 في عدد اللون الأحمر و عدد اللون الأزرق في القيمة.
- للحصول على اللون الأزرق يجب إعطاء عدد كبير يصل إلى 255 في عدد اللون الأزرق في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 0 في عدد اللون الأحمر و عدد اللون الأخضر في القيمة.
الأبيض و الأسود
- للحصول على اللون الأبيض يجب إعطاء عدد 255 في أعداد الألوان الثلاثة في القيمة.
- للحصول على اللون الأسود يجب إعطاء عدد 0 في أعداد الألوان الثلاثة في القيمة.
إذن يعبر عن اللون الأبيض بأعلى قيمة أي (255,255,255)RGB و يعبر عن اللون الأسود بأخفض قيمة أي (0,0,0)RGB، و بالتالي فإعطاء عدد مرتفع للون في القيمة سيُنتَج لون فاقع أو فاتح، أما بإعطاء عدد منخفض للون في القيمة سيُنتَج لون غامق أو داكن، و بمعنى أدق كلما اقتربنا من 255 كان اللون فاقع، و كلما اقتربنا من 0 كان اللون غامق.
الألوان الثانوية
للحصول على لون ثانوي يجب معرفة مكانه نسبة إلى الألوان الرئيسية، و لمعرفة أمكنة الألوان يمكن الإستعانة بـ Chromatic Palette، فمثلاً نريد الحصول على اللون البرتقالي، يوجد هذا الأخير بين اللون الأحمر و الأخضر، و بالتالي يجب إعطاء عدد بين 1 و 255 في عدد اللون الأحمر و اللون الأخضر في القيمة و تجاهل اللون الأزرق بإعطاءه 0، مع الأخذ بعين الإعتبار حدة اللون البرتقالي، يعني مثلاً إذا كان قريباً شيئاً ما من اللون الأحمر، يجب إعطاء عدد اللون الأحمر أكبر من عدد اللون الأخضر في القيمة.
الشفافية
يمكن الحصول بقيمة RGB و Hexadecimal على ما يقرب من 15 مليون لون، إلا أن RGB تمتاز بميزة إعطاء للون الشفافية حيث يضاف عدد رابع داخل القوسين مفروق هو الآخر بفاصلة في القيمة، و هو عدد الشفافية حيث يُحدَّد من 0 إلى 1 بالأعشار حسب النظام Anglosaxon حيث تُستبدل الفاصلة العشرية بنقطة في الأعداد العشرية، فكلما اقتربنا من 0 كان اللون أكثر شفافية، و كلما اقتربنا من 1 كان اللون أقل شفافية، ثم يجب استبدال كلمة RGB بـ RGBa.
هناك خاصية Property تُحدِّد الشفافية اسمها 'OPACITY' و يكتب في قيمتها نفس ما يكتب في عدد الشفافية لقيمة الخاصية 'COLOR' بـ RGBa.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس