فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

الألوان في لغة CSS

 
 
 

في لغة CSS الألوان هي لغة العيون التي تجعل الموقع يتحدث عن جمالة او عكس ذلك , فيمكنك أن تستخدم الألوان لأنشاء موقع جميل , مناسب للمستخدم وعين المستخدم , لأننا في حالة تحدثنا عن الألوان يجب أن نتحدث عن العين الذي تري ألوان مريحة وهادئة او عكس ذلك ,وبالتأكيد أنت  قمت بزيارة العديد من المواقع وكان منهم مواقع جميلة ومريحة ومواقع لم تتصفح بداخلها اكثر من دقائق معدودة بسبب التصميم والألوان الغير مناسبة والغير مريحة في نفس الوقت ,ولذلك يفضل أستخدام الوان مناسبة للموقع لأكتساب الزوار بشكل جيد.

يمكن التعامل مع الألوان بشكل سهل جداً في لغة CSS, سوف نقوم بتحديد العنصر الذي نريد تلوينة ومن ثم نستخدم الخواص التالية لتحديد الجزء الذي نريد تلوينة في العنصر

  • Background-color : هي مسئولة عن تلوين خلفية العنصر
  • color : مسؤولة عن تحديد لون الخط

نظم الألوان في CSS

في لغة CSS يوجد ما يسمي بوحدات قياس الألوان ويطلق عليها مسمي أخر وهو نظم الألوان بحيث هي وحدة قياس درجة اللون التي نريدها في التصميم الخاص بنا , ولكن كيف يتم قياس درجة اللون وما هي وحدات قياس الألوان المسخدمة في لغة CSS,

  • كما يوجد وحدات قياس المسافات (متر سنتيمتر,مللي متر ) , يوجد ايضاً وحدات قياس الألوان الذي سنتعرف عليها الأن
  • سبب تنوع وحدات قياس الألوان هو استخدام الوحدة التي تجعلك تصل الي اللون المناسب الذي تحتاجة

نظام RGB

هو النظام العالمي الأساسي في أختيار الألوان , اي لون وقعت عينك علية هو مكون من عدد ثلاثة الوان اساسية Red ,Green ,Blue 

"الأحمر","الأخضر","الأزرق" ,

يتم كتابة الكود كالتالي

rgb(0, 0, 0)
  • الصفر الأول خاص بقيمة اللون الأحمر
  • الصفر الثاني خاص بقيمة اللون الأخضر
  • الصفر الثالث خاص بقيمة اللون الأزرق

كما قلنا بأن اي لون يمكن تكوينة بأستخدام الثلاثة الوان الأساسية "الأحمر","الأخضر","الأزرق" , سوف نقوم الأن ببعض الأمثلة التي سيتم أختيار عدد من الألوان بأستخدام درجات لون مختلفة  من الألوان الأساسية

درجة لون مكونة من 255 أحمر و 102 أخضر و 102 أزرق             rgb(255, 102, 102)

درجة لون مكونة من 204 أحمر و 255 أخضر و 255 أزرق             rgb(204, 255, 255)

درجة لون مكونة من 255 أحمر و 255 أخضر و 153 أزرق             rgb(255, 255, 153)

بتلك الطريق يتم أختيار الألوان داخل لغة CSS , الأن يمكنك أختيار الألوان المناسبة وبداية تلوين عالمك الجديد بنظام الــ RGB  ,وللتعمق أكثر في انظمة الألوان قم بقراءة باقي الدرس 


نظام الــ HEX

هو نظام ألوان أخر شبية جداً بالنظام السابق ولكن يتم كتابتة كما يلي rrggbb# , وفي حالة أستخدام النظام السابق او النظام الحالي سوف نحصل علي درجة اللون المطلوبة , وقد يتسائل البعض عن كيف تتم عملية التحويل من ال hex الي rgb  .

  • الحرفين rr مسؤولين عن اللون الأحمر Red
  • الحرفين gg مسؤولين عن اللون الأخضر Green
  • الحرفين bb مسؤولين عن اللون الأزرق Blue

في نظام ال rgb يوجد لكل خانة حد أقصي للقيمة من 0 الي 255 , بمعني ان "الأحمر" لدية 255 درجة "والأخضر" 255 درجة "والأزرق" 255 درجة , ولكن نظام الــ hex يحتوي علي خانتين فقد "للأحمر" وخانتين "للأخضر" وخانتين "للأزرق" , في تلك الحال يوجد ما يسمي بالنظام السادس عشر , هو نظام يحتوي علي الأرقام من 0 الي 9 والحروف من a الي f  , وبواسطة تلك القيم يمكن تكوين الألوان بما يتقارن مع نظام ال rgb , تلك نظرة سريعة ولكن ما يهمنا الان بأن اي لون مكتوب بنظام ال rgb يمكن تحويلة الي نظم ال hex , سوف نقوم باضافة نفس الألوان التي قمنا بأضافتها في نظام ال rgb ولكن بنظام ال hex حتي تصل الفكرة ببساطة

 

درجة لون مكونة من ff أحمر و 66 أخضر و 66 أزرق            #ff6666

درجة لون مكونة من ff أحمر و cc أخضر و cc أزرق              #ffcccc

درجة لون مكونة من ff أحمر و 99 أخضر و 99 أزرق             #ff9999

 

أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات