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

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

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

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

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

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

لون النص


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

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

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

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

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

 

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

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

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

 

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

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

 

 

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

إضافة اللَّون في CSSالعنوان مكتوب باللون الأحمر

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


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

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

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

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

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

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

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

 

إضافة اللَّون في CSSهاته الصورة مأخوذة من الفوتوشوب

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

 

 

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

 

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

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


 ألــوان  RGB


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

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

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

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

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

 

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

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

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

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

 

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

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

 

 

روابط مكملة:

في امان الله

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل .. تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 457 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

214 عدد المشاهدات لهذا المحتوى
Scroll to Top