إضافة اللَّون في CSS

أخر تحديث لهذه المقالة في: 19 أغسطس 2019 الساعة: 09:22 م

ما زلنا معكم إخواني الكرام مع سلسلة دروس CSS3. و أتمنى أن تكونوا جد متحمسين لمعرفة المزيد عن  هاته اللغة التي تعطي لصفحاتنا رونقاً و جمالاً، و تنظم نصوصنا و تجعلها مقبولة لدى المستخدمين .

في هاته الحصة سنتناول بعض خصائص CSS  المتعلقة بألوان النص و الخلفية و تأثيرات أخرى: 

  • كيفية تغيير لون النص ؛
  • كيفية وضع لون أو صورة للخلفية ؛
  • كيفية إضافة الظل.
  • كيف تلعب مع مستويات الشفافية.

و هناك المزيد من الأشياء  التي ستبهـرنـا!

لون النص


كما سبق لنا في حصص سابقة أن تطرقنا إلى كيفية تغيير لو النّص باستعمال الرمز  color
و لكننا تعلمناها  بشكل سريع فاقد لشرح كافٍ لأنه لم يكن آنذاك هو موضوعنا، لكننا اليوم سنعرج على الموضوع بشكل مستفيض كي يستقر بذاكرتنا  ..

إذن نبدأ على بركة الله!

أنت تعرف بالفعل الخاصية التي تسمح لك بتغيير لون النص: إنه  color.  و هنا سنستعملُ طرقاً مختلفةَ للإشارة إلى اللون ، لأن هناك العديد من الطرق.

كيف نشير إلى إسم اللون؟

الطريقة الأسهل والأكثر عملية لاختيار اللّون هي كتابة إسمه باللغة الإنجليزية 🤔
يقال أن هذه الطريقة رغم فعاليتها فإنها ناقصة لأنها تتوفر فقط على أسماءٍ لستة عشر لوناً   يسمى “قياسيًا” . توجد ألوانٌ أخرى غير رسمية ، ولكنها لن تعمل بالضرورة بنفس الطريقة على جميع المتصفحات ، لذلك لن نعرضها عليك هنا.

 

 

يوضح  الشكل المبين أعلاه  الألوان السِّتة عشر التي يمكنك استخدامها بمجرد كتابة أسمائها.

 

يمكنك حفظ أسماء هاته الألوان  عن ظهر قلب إذا كنت تريد أن تستخدمها مستقبلاً دون العودة  للبحث والنقل  (سيكون ذلك متعباً في كل مرة تحتاج إدراج لون ).

و بالتالي يمكنك كتابة لون النص بهذا الشكل:

 

 

و هنـا النتيجــة :

العنوان مكتوب باللون الأحمر

الألوان الستة عشر


إنها ستة عشر لونًا ، هذا الرقم هو عدد الألوان التي ذكرناها سابقاً ، و هي في الحقيقة جد محدودة إذا علمنا أن معظم الشاشات أصبحت قادرةَ اليوم على عرض ستة عشر مليونًا.
فهل يعقل أن نعطي للألوان ستة عشر مليون إسم ؟ … طبعاً هذا غير ممكن، و بالتالي، لا بد من طريقة مبتكرة تجعل CSS يعرض ما يتوافق مع الألوان المتوفرة على شاشة الحاسوب و سمارت فون. 

لحسن الحظ ، CSS عنده الحل لاختيار أي لون تريده. 

بعدما رأينا الألوان بالأسماء، سننتقل إلى مرحلة أخرى نستعمل فيها الألوان عِبارة عن أرقام و حروف، و هي طريقة مبتكرة و ممتعة في استعمالها. 

نبدأ بالألوان الستة عشر مثلاً:  الأحمر ” red”  يمكننا كتابته على هذا الشكل FF0000# ، بكل بساطة هو مزيج من الحروف و الأرقام. و تشير إلى اللون.

و هذا الكود يبدأ دائماً بهاته العلامة  ، متبوعة بستة أحرف أو أرقام من 0 إلى 9 ومن A إلى F.
هذه الحروف أو الأرقام تعمل إثنين ، إثنين، فيشير الأوَّلان إلى كمية من اللون الأحمر ، و الثَّانِيَان يمثلان كمية من اللون الأخضر والآخران  كمية من اللون الأزرق. عن طريق خلط هذه الكميات (التي هي مكونات اللون الأحمر والأخضر والأزرق) ، يمكننا الحصول على اللَّون الذي نريده.

وهكذا ، فإن 000000# يتوافق مع اللون الأسود  و FFFFFFF# إلى اللون الأبيض.  

عندما نشتغل على برامج الرسم مثل الفوتوشوب  Photoshop  فإننا نستعمل أكواد الألوان، و هاته الأكواد نراها تكتب في صندوق الألوان بالفوتوشوب أثناء تلوين تصاميمنا ، و منها يمكن نسخها و لصقها بملف CSS حسب المطلوب .

 

هاته الصورة مأخوذة من الفوتوشوب

هنا التطبيق لكيفية استعمال هذا اللّون في فقرات النص ، ركز معي جيداً  اللون من حزمة اللون الأزرق: 🧐

 

 

مــهـــم:
أشير إلى أنه يمكنك اختصار العلامات ، مثلاً  #00FF00 تعادل  هذا :  #0F0 .

 

 للحصول على أكواد الألوان يمكنك تحميل برنامج صغير من هنـا Web Coulours

ويمكنك أيضاً استعمال أكواد الألوان من خلال موقع colorpicker  من هنـــــا


 ألــوان  RGB


ماذا يعني RGB؟  في اللغة الإنجليزية ، يتم كتابتها هكذا  RedGreenBlue  باللون الأحمر والأخضر والأزرق ، والمختصرة باسم “RGB“. وهذا ما نجده في مجموعة الأوان الستة عشر.

إذن لاختيار أي لون ، يجب تحديد كمية من الأحمر والأخضر والأزرق.

معلومات مهمة حول استعمال الألوان

بالنسبة لي أفضل عمل التصاميم و الرسم على الفوتوشوب . و بما أنه غير متوفر لذا الجميع فإنني سأدرج أمثلة اللوان من البرنامج  المتوفر عند الجميع لأنه مثبت بشكل افتراضي مع الويندوز و هو Paint.

  1. قم بتشغيل برنامج الرسام  (Paint) من قائمة إبدأ  ( Démarrer ).
  2. إنتقل إلى قسم تحرير الألوان ، كما هو مُوَضَّح في الشكل التالي.

 

 

أنقر على مربع الألوان  الذي يظهر على اليمين ، اختر كتلة الألوان ثم حرك المِزْلَق لتحديد اللون الذي يثير اهتمامك. افترض أنك تتطلع إلى الحصول على العناوين الثانوية <h3> باللون الأخضر ( مجرد افتراص) .

حدد اللون في النافذة ، كما هو مبين  في الشكل التالي.

 

 شاهد حـزمة الألوان ” الأحمر والأخضر والأزرق ” ، والمُشار إليها بالسهم الأصفر (هنا 14-201-23). انسخ هذه القيم بهذا الترتيب في ملف CSS ، كما في النموذج أسفله.

 

 

روابط مكملة:

في امان الله

اترك تعليقًا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

    مؤسس موقع :
        عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.
كتب 292 مقالة في jabism.com.

عدد المشاهدات لهذه المقالة : 719