إضافة اللَّون في CSS
ما زلنا معكم إخواني الكرام مع سلسلة دروس CSS3. و أتمنى أن تكونوا جد متحمسين لمعرفة المزيد عن هاته اللغة التي تعطي لصفحاتنا رونقاً و جمالاً، و تنظم نصوصنا و تجعلها مقبولة لدى المستخدمين .
في هاته الحصة سنتناول بعض خصائص CSS المتعلقة بألوان النص و الخلفية و تأثيرات أخرى:
- كيفية تغيير لون النص ؛
- كيفية وضع لون أو صورة للخلفية ؛
- كيفية إضافة الظل.
- كيف تلعب مع مستويات الشفافية.
و هناك المزيد من الأشياء التي ستبهـرنـا!
لون النص
كما سبق لنا في حصص سابقة أن تطرقنا إلى كيفية تغيير لو النّص باستعمال الرمز color
و لكننا تعلمناها بشكل سريع فاقد لشرح كافٍ لأنه لم يكن آنذاك هو موضوعنا، لكننا اليوم سنعرج على الموضوع بشكل مستفيض كي يستقر بذاكرتنا ..
إذن نبدأ على بركة الله!
أنت تعرف بالفعل الخاصية التي تسمح لك بتغيير لون النص: إنه color. و هنا سنستعملُ طرقاً مختلفةَ للإشارة إلى اللون ، لأن هناك العديد من الطرق.
كيف نشير إلى إسم اللون ؟
الطريقة الأسهل والأكثر عملية لاختيار اللّون هي كتابة إسمه باللغة الإنجليزية 🤔
يقال أن هذه الطريقة رغم فعاليتها فإنها ناقصة لأنها تتوفر فقط على أسماءٍ لستة عشر لوناً يسمى “قياسيًا” . توجد ألوانٌ أخرى غير رسمية ، ولكنها لن تعمل بالضرورة بنفس الطريقة على جميع المتصفحات ، لذلك لن نعرضها عليك هنا.
إضافة اللَّون في CSS
يوضح الشكل المبين أعلاه الألوان السِّتة عشر التي يمكنك استخدامها بمجرد كتابة أسمائها.
يمكنك حفظ أسماء هاته الألوان عن ظهر قلب إذا كنت تريد أن تستخدمها مستقبلاً دون العودة للبحث والنقل (سيكون ذلك متعباً في كل مرة تحتاج إدراج لون ).
و بالتالي يمكنك كتابة لون النص بهذا الشكل:
|
1 2 3 4 |
h1 { color: red; } |
و هنـا النتيجــة :
العنوان مكتوب باللون الأحمر
الألوان الستة عشر
إنها ستة عشر لونًا ، هذا الرقم هو عدد الألوان التي ذكرناها سابقاً ، و هي في الحقيقة جد محدودة إذا علمنا أن معظم الشاشات أصبحت قادرةَ اليوم على عرض ستة عشر مليونًا.
فهل يعقل أن نعطي للألوان ستة عشر مليون إسم ؟ … طبعاً هذا غير ممكن، و بالتالي، لا بد من طريقة مبتكرة تجعل CSS يعرض ما يتوافق مع الألوان المتوفرة على شاشة الحاسوب و سمارت فون.
لحسن الحظ ، CSS عنده الحل لاختيار أي لون تريده.
بعدما رأينا الألوان بالأسماء، سننتقل إلى مرحلة أخرى نستعمل فيها الألوان عِبارة عن أرقام و حروف، و هي طريقة مبتكرة و ممتعة في استعمالها.
نبدأ بالألوان الستة عشر مثلاً: الأحمر ” red” يمكننا كتابته على هذا الشكل FF0000# ، بكل بساطة هو مزيج من الحروف و الأرقام. و تشير إلى اللون.
و هذا الكود يبدأ دائماً بهاته العلامة # ، متبوعة بستة أحرف أو أرقام من 0 إلى 9 ومن A إلى F.
هذه الحروف أو الأرقام تعمل إثنين ، إثنين، فيشير الأوَّلان إلى كمية من اللون الأحمر ، و الثَّانِيَان يمثلان كمية من اللون الأخضر والآخران كمية من اللون الأزرق. عن طريق خلط هذه الكميات (التي هي مكونات اللون الأحمر والأخضر والأزرق) ، يمكننا الحصول على اللَّون الذي نريده.
وهكذا ، فإن 000000# يتوافق مع اللون الأسود و FFFFFFF# إلى اللون الأبيض.
عندما نشتغل على برامج الرسم مثل الفوتوشوب Photoshop فإننا نستعمل أكواد الألوان، و هاته الأكواد نراها تكتب في صندوق الألوان بالفوتوشوب أثناء تلوين تصاميمنا ، و منها يمكن نسخها و لصقها بملف CSS حسب المطلوب .
هاته الصورة مأخوذة من الفوتوشوب
هنا التطبيق لكيفية استعمال هذا اللّون في فقرات النص ، ركز معي جيداً اللون من حزمة اللون الأزرق: 🧐
|
1 2 3 4 |
p { color: #4e6ae4; } |
للحصول على أكواد الألوان يمكنك تحميل برنامج صغير من هنـا Web Coulours
ويمكنك أيضاً استعمال أكواد الألوان من خلال موقع colorpicker من هنـــــا
ألــوان RGB
ماذا يعني RGB؟ في اللغة الإنجليزية ، يتم كتابتها هكذا Red–Green–Blue باللون الأحمر والأخضر والأزرق ، والمختصرة باسم “RGB“. وهذا ما نجده في مجموعة الأوان الستة عشر.
إذن لاختيار أي لون ، يجب تحديد كمية من الأحمر والأخضر والأزرق.
معلومات مهمة حول استعمال الألوان في CSS
بالنسبة لي أفضل عمل التصاميم و الرسم على الفوتوشوب . و بما أنه غير متوفر لذا الجميع فإنني سأدرج أمثلة اللوان من البرنامج المتوفر عند الجميع لأنه مثبت بشكل افتراضي مع الويندوز و هو Paint.
- قم بتشغيل برنامج الرسام (Paint) من قائمة إبدأ ( Démarrer ).
- إنتقل إلى قسم تحرير الألوان ، كما هو مُوَضَّح في الشكل التالي.
إضافة اللَّون في CSS
أنقر على مربع الألوان الذي يظهر على اليمين ، اختر كتلة الألوان ثم حرك المِزْلَق لتحديد اللون الذي يثير اهتمامك. افترض أنك تتطلع إلى الحصول على العناوين الثانوية <h3> باللون الأخضر ( مجرد افتراص) .
حدد اللون في النافذة ، كما هو مبين في الشكل التالي.
شاهد حـزمة الألوان ” الأحمر والأخضر والأزرق ” ، والمُشار إليها بالسهم الأصفر (هنا 14-201-23). انسخ هذه القيم بهذا الترتيب في ملف CSS ، كما في النموذج أسفله.
|
1 2 3 4 |
<h3> { color: rgb(23,201,14); } |
روابط مكملة:
في امان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل .. تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.