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

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

فمجرد اختلاف اللون قد يغير فكرتك تماما عن ما هو مكتوب فمجرد أن تجد لون متغير عن السياق العام للنص سيلفت انتباهك لهذا النص هل هو رابط هل هو نص مهم لذلك أن تكون قادر على التعامل مع الألوان هذا جزء أصيل من التعامل مع برمجة الويب.

 

الوسم الأساسي للون وهو الوسم الذي تحتاج معرفته هو [[color]] 

مثال على استخدام الوسم

body {
color:black
}

 الوسم [[color]]  يعبر عن لون النصوص طبعا هناك وسوم اخرى مثل

• [[backgroun-color]] لون الخلفية
• [[border-color]] لون الإطار
• [[outline-color]] لون الإطار الخارجي 

 لكن هذه الأمور لا تحتاج معرفتها حالياً ستتعرف عليها في دروس مخصصه لها لكن المبدأ العام واحد في كتابة الألوان وهو ما تحتاج تعلمه اليوم.

طريقة كتابة الألوان الأساسية

 هناك عدة طرق لكتابة الألوان وهذه طريقة كتابة الألوان الأساسية , الألوان التي لا تعتمد درجات مختلفة 

هذه الطريقة تعتمد على كتابة اسم اللون كما هو 

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

اسم اللون	اللون
black	الأسود
white	الأبيض
red	الأحمر
green	الأخضر
blue	الأزرق
yellow	الأصفر
orange	البرتقالي
purple	البنفسجي
pink	الوردي
gray	الرمادي
brown	البني
cyan	السماوي
magenta	الأرجواني
lime	الأخضر الليموني
teal	الأزرق المخضر
navy	الأزرق الداكن
maroon	الكستنائي
olive	الزيتوني
silver	الفضي
gold	الذهبي
aqua	الأزرق المائي
fuchsia	الفوشيا

 استخدام الألوان بهذه الطريقة لا يوجد أى إشكال فيه لكن من المستحيل وسط درجات الألوان المهولة أن يتم عمل تسمية لكل لون بهذه الطريقة لذلك هناك وسائل أخرى لكتابة اسم اللون. 

 

مكونات اللون

 أى لون يتكون من مزيج ثلاث الوان 

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

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

وهذا ما يسمى نظام RGB

• R اختصار Red أحمر
• G اختصار Green أخضر 
• B اختصار Blue أزرق

 

فقد تجد الألوان في لغة CSS مكتوبة بهذه الطريقة

[[rgb(0, 255, 18)]] 

• الرقم الأول 0 هو كمية اللون الأحمر
• الرقم الثاني 255 هو كمية اللون الأخضر
• الرقم الثالث 18 هو كمية اللون الأزرق 

 

طريقة أخرى للكتابة وهي ما تسمى بـ Hex (Hexadecimal color)

 وهو مزيج من الحروف والأرقام التي تحدد درجة كل لون وهي الأكثر شيوعاً في الإستخدام وتبدأ برمز #

 [[#00ff12]]

 ونفس الشئ

• أول حرفين 00 يخصان اللون الأحمر
• ثاني حرفين ff يخصان اللون الأخضر
• ثالث حرفان 12 يخصان اللون الأزرق

طبعا لا يوجد أحد سيحفظ هذه الألوان وهذه الدرجات لذلك هناك أدوات وإضافات لتوليد تلك الألوان

فلو أردنا كتابة نفس الكود الذي كتبناه في البداية واستخدمنا اللون الأسود black يمكن أن نكتبه بالطريقة هذه

body {
color:rgb(0, 0, 0)
}

 أو هذه لنظام Hex

body {
color:#000000
}

 

 معلومات إضافية

- قد تجد لون في Hex  أو rgb مثل الأسود مكتوب فقط [[#000]] 3 أرقام وليس 6 أرقام هذا أمر لا إشكال فيه فقط مع الألوان التي تتشابه درجاتها أرقامها . 

 

 -  هناك خاصية تسمى rgba   لاحظ هنا زيادة حرف a وهو الخاص بما يسمى alpha channel

هذا وظيفته اعطاء شفافية للون بحيث يكون ما هو خلف اللون ظاهر وليس لون معتم تماما

مثال  

body {
	color: rgba(0,0,0,.4);
}

هذا نفس اللون الأسود لكن بدرجة شفافية 0.4 

ولكي ترى الفرق هاذين مربعين واحد يستخدم لون اسود قاتم وآخر يستخدم اللون مع درجة شفافية لاحظ كيف الثاني يظهر الصورة التي تحته بسبب  شفافيته , وهذه تستخدم في أمور متقدمه لكن أذكرها لك كمعلومة ان صادفت الكود

 

 

هذا هو كود الصورتين طبعا هذا الكود يعتبر متقدم بعض الشئ عن ما تعلمته الى الآن لكن ان اردت الإطلاع عليه ربما تخرج بشئ تفهمه منه

 

<style>
  .twoblok{display:flex;justify-content:center;align-items:center;gap:10px;}
  .twoblok > div{background-color:#fff;border:1px solid #000;overflow:hidden;position:relative;}
  .twoblok > div > img{object-fit:contain;width:100%;height:100%;}
  .twoblok > div::before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;}
  .twoblok > div:first-child::before{background-color:#000;}
  .twoblok > div:last-child::before{background-color:rgba(0,0,0,.4);}
</style>
<div class="twoblok">
  <div>
    <img
      alt="sun Image"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEotRE-5X-2tJpWGNurWFLFo3Atr9b873VWycrZy3JWm_UJDPMThzPVuxTt4Pa0rrtFEBELjqr3biqB5y_wc1Yc3fMcwNwZfnvPNkmhe7Qnsxa3LlJXrXJnnxCM3-56K0jSxDCp8C3Xw7Hk1HDzlSnopnYgVR5CcP5BbPsNbu8-o13BbeJl-7SACI9N7Z/s1600/sun.jpg"
    />
  </div>
  <div>
    <img
      alt="sun Image"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEotRE-5X-2tJpWGNurWFLFo3Atr9b873VWycrZy3JWm_UJDPMThzPVuxTt4Pa0rrtFEBELjqr3biqB5y_wc1Yc3fMcwNwZfnvPNkmhe7Qnsxa3LlJXrXJnnxCM3-56K0jSxDCp8C3Xw7Hk1HDzlSnopnYgVR5CcP5BbPsNbu8-o13BbeJl-7SACI9N7Z/s1600/sun.jpg"
    />
  </div>
</div>