منتديات نورة الحربي

 

 


العودة   منتديات نورة الحربي > مواضيع منقولة من مواقع اخرى

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 10-15-2012, 10:44 AM
rss
Guest
 
المشاركات: n/a
افتراضي الألوان في تقنية css3

 

الألوان في تقنية CSS3
كاتب المقال: مازن بشر، مهتم بكل ما يختص الإنترنت والحاسوب بشكل عام و خاصة*التصميم والجديد في تقنيات الويب من CSS،HTML5،PHP،Javascript. بدأت منذ حوالي ثلاث سنوات بالإهتمام بأحدث تقنيات الويب ولا زال شغفي يزداد يوماً بعد يوم بهذا العالم المتسارع.


بعد أن اقتصرت الألوان في معايير CSS2 على استخدام الكلمات المفتاحية (Keyword) أو استخدام القيم العشرية (hexadecimal) أتت القفزة النوعية في معايير تقنية css3 لتتيح لنا مجالات أوسع مثل ألوان الشاشات RGB و ألوان الطباعة CYMK إضافة إلى أمكانية استخدام الشفافية و سأتي على ذكر كل القيم اللونية الممكن استخدامها حالياً القديمة منها و الحديثة.

الألوان تقنية css3



سأجيب في هذا المقال عن الأسئلة التالية:

  1. أين يمكنني استخدام قيم الألوان في ملفات الـ CSS؟
  2. ما هي القيم المتاحة؟
  3. لماذا استخدم هذه القيمة دون تلك؟
  4. ما هي الطريقة الأفضل للبدء في تلوين موقعك؟
  5. ما هي الأدوات التي يمكن إستخدامها لإختيار الألوان بشكل فعال؟
الألوان تقنية css3


أين تستخدم الألوان؟

هنالك ثلاث خواص بشكل أساسي نحدد فيها اللون و هي: لون الأمامية أو الخط (color) لون الخلفية (background-color) لون الحدود (border-color).

الألوان تقنية css3

ما هي القيم المتاحة؟

وأقصد هنا القيم الجديدة في تقنية CSS3.

الكلمات المفتاحية

أي شخص يبدء تعلم لغة الـ CSS يلاحظ مدى سهولة الحصول على اللون المطلوب بمجرد كتابة اسمه ,وهنالك نوعين من الكلمات المفتاحية أساسية تعبر عن الألون الأكثر ستخداماً و قائمة موسعة أكثر تسمى قائمة X11 فيما تحتوي هذه الأخيرة على أكثر من 100 لون بأسمها يمكنكم مراجعة القائمة الكاملة من هذا الرابط Extended color keywords أما الألوان الأساسية التي يبلغ عددها 16 فهذه قائمة بها مع مثال على كيفية استخدامها:

الألوان تقنية css3

مثال على ذلك:

div { background-color: red; color: blue; border-color: black; } ألوان RGB

الألوان تقنية css3

وهي الألوان التي تستخدمها كل الشاشات في العالم، فكل بيكسل في أي شاشة يقوم بمزج ثلاث ألون كل واحد منها بقيمة مختلفة للحصول على اللون النهائي و هذه الألوان الأساسية هي الأحمر Red و الأخضر Green والأزرق Blue وهذا هو مبدأ هذه الطريقة في تعين اللون حيذ نأخذ ثلاث قيم الأولى تعبر عن كمية اللون الأحمر و الثانية للأخضر و الثالثة للأزرق و كل لون من الألوان السايقة يتحمل القيم من صفر و حتى 255 كما في الصورة *التالية:

الألوان تقنية css3

نلاحظ ببساطة أن اللون الأسود في هذا النمط هو 0,0,0 والأحمر مثلاً هو 255,0,0 وهكذا لكن ماذا عن الأصفر؟ نعلم أن الأصفر ناتج دمج الأحمر مع الأخضر فيكون 255,255,0 أما عن طريقة الأستخدام في ملف الـ CSS فنستطيع الحصول على نفس نتائج المثال السابق كالتالي:

div { background-color:rgb(255,0,0); color: rgb(0,0,255); border-color: rgb(0,0,0); } كما يمكننا أيضاً كتابة النسب المئوية للألوان فإذا كنا نريد نصف كمية الأحمر مع نصف كمية الأخضر مثلاً فلا داعي لتذكر ناتج قسمة 255 على 2 بل يمكننا كتابتها على الشكل التالي rgb(50%,50%,0) ويصبح مثالنا السابق باستخدام النسب المئوية:

div { background-color: rgb(100%,0%,0%); color: rgb(0%,0%,100%); border-color: rgb(0%,0%,0%); } انتبه: لا يمكننا الدمج بين النسب المئوية و القيم الرقمية فلا يمكنا مثلاً كتابة القيمة التالية rgb( 100%, 255, 128) هذه الطريقة تعطينا (255*255*255= 16,581,375.00) أي حوالي 16 مليون لون وهي مستخدمة في كل برامج التصميم منذ فترة طويلة ولعل أبرزها الفوتوشوب.

الألوان تقنية css3

ألوان HSL

و هي تشابه من حيث الاستخدام ألوان الـ RGB ولكن القيم الثلاث هنا ذات استخدمات مختلفة تماماً فالقيمة الأولى هي درجة اللون (Hue) و هي عبارة عن توزع لكل الألوان على دائرة (كما في الصورة) فهذه القيمة تأخذ القيم من صفر حتى 360 فهي تقاس بالدرجات أما القيمة الثانية فتعبر عن تشبع اللون (Saturation) و هي نسبة مئوية أما القيمة الثالثة فهي درجة السطوع أو الإضاءة (Lightness) و هي نسبة مئوية أبضاً وتمثل هذه القيمة موقع الصوء من اللون كأن يكون في مكان مضيء (100%) أو في مكان مظلم (0%) و قيمة صفر هنا ستعطينا اللون الأسود و قيمة (100%) ستعطينا اللون الأبيض بغض النظر عن باقي القيم و للحصول على اللون دون إضاءة نستخدم قيمة (50%) و فيما يلي صورة توضح دائرة الألوان.

الألوان تقنية css3

و هنا يجب ملاحظة إلى أن العد على الدائرة يشبه العد على الدائرة المثلثية الموجودة في الرياضيات فالزاوية صفر تمثل اللون الأحمر و الاتجاه الموجب بعكس حركة عقارب الساعة فاللون الأصفر يحمل الزاوية 60 و اللون الأخضر في الزاوية 120 و الأزرق 240 و اللون الأرجواني 300 وتجدر الإشارة إلى أن هذه القيم توجد في الفوتوشوب مع فارق بسيط.

الألوان تقنية css3

في الفوتشوب توجد القيم على الشكل HSB بدلاً HSL حيث تم استبدال كلمة Lightness (الإضاءة) بكلمة Brightness(السطوع) والفارق أن قيمة السطوع في حدودها العليا تعطي اللون كما هو دون إضافة المزيد من الإضاءة بينما قيمة الإضاءة في حدها الأعلى تعطي اللون الأبيض تماماً.

لذا اللون الأحمر بأقصى درجة تشبع له في الفوتوشوب هو hsb(0,100%,100%) بينما في الـCSS هي hsl(0,100%,50%) ولكي لا تقعوا بهذا الارتباك أقترح استخدام أحد الأدوات التي سأذكرها في نهاية هذه المقالة لتعين اللون الصحيح لقيم الـ HSL، وهكذا يصبح مثالنا السابق بقيم HSL:

div { background-color: hsl(0,100%,50%); color: hsl(240,100%,50%); border-color: hsl(0,0%,0%); } (لا تنسى استخدام النسب المئوية لقيم التشبع و الإضاءة)

قد تبدو صيغة HSL من أصعب القيم للاستخدام لكنها في الواقع من أفضل القيم على الرغم من أنها حديثة العهد في تقنية CSS لكنها ومن تجربة شخصية من أسهل القيم، فليس عليك سوى حفظ قيمة واحدة للون و من ثم التلاعب بدرجة سطوع اللون و درجة ظلاليته, عكس قيم صيغة RGB التي تعتبر من قيم المستخدمة من قبل البرمجيات و تحتاج لفهم أليات مزج الألوان, وهذه بعض الأمثلة على قيم صيغة HSL وأنصح بشدة لكل من يريد استخدام قيم صيغة HSL بزيارة الرابط السابق.

*قيم RGBA وHSLA

ألا تبدو هذه القيم مألوفة، نعم إنها نفس القيم السابقة مع إضافة هذا الحرف الأخير و الذي يشير إلى الشفافية (alpha) و هذه القيمة الأخيرة هي التي تسمح لنا بالرؤية من خلال اللون لما يوجد تحته, و لنوضح هذا شاهد الصورة التالية:

الألوان تقنية css3

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

h3 { color: rgba(100%, 50%, 0%, 0.1); background-color: hsla(240, 100%, 50%, 0.7); } ملاحظة: يجب التميز بين قيمة الشفافية الخاصة باللون و الموجودة فقط في قيم (hsla , rgba) و بين الخاصة الجديدة في css3 و هي الشفافية (opacity) و التي تتحكم بشفافبة كامل العنصر و لتميز الفرق لاحظ المثال التالي:

الألوان تقنية css3

القيم العشرية

و يتبقى لنا النوع الثاني (بعد الكلمات المفتاحية) من القيم المستخدمة قبل الـCSS3 و هي القيم العشرية أو (Hexadecimal Values) و هذه القيم تستخدم بشكل أساسي من قبل الألات لأنها تستخدم بحدها الأقصى 6خانات و من ثم يتم تحويل هذه القيمة لقيم RGB وفق جداول معينة و يمكنك فهمها من الصورة التالية:

 



الألوان تقنية css3

لاستخدام هذه القيم يكفي أن نضع هذه الإشارة (#) ثم نملأ ثلاث أو ست خانات (في حالة ثلاث خانات يتم مضاعفة كل خانة مثلاً #ffb تصبح ffffbb# ) تتميز هذه القيم بسهولة نقلها و حفظها و انصح باستخدامها عند الحاجة لنقل القيمة و لا سيما من الفوتوشوب مثلاً إلى صفحات النت حيث يزودنا الفوتوشوب بقيمة عشرية عند اختيار أي لون كما في الصورة:

الألوان تقنية css3

و تتمتع هذه القيم بفأدتين رئسيتين الأولى الدعم الواسع من فبل كل المتصفحات القديمة و الحديثة و ثانياً و نظراً لتحويل هذه القيم لقيم RGB فهي تمتاز بعدد ألوان يصل إلى 16 مليون لون إضافةً لسهولة كتابتها و المشكلة الأساسية بنظري هي عدم القدرة على جعل اللون شفاف باستخدام هذه القيم, ويصبح مثالنا السابق باستخدام هذه القيم كالتالي:

div { background-color: #f00; color: #00f; border-color: #000; } و هنا أريد أن أشير لسهولة الأستخدام للألوان الأساسية حيث الحرف (f) يشير إلى استخدام القيمة العليا للون (أي 255) , و الخانة الأولى تشير للون الأحمر الثانية للأخضر و الثالثة للأزرق (كما في RGB ) لذا يمكن تمثيل الألوان الأساسية بسهولة كما في مثالنا البسيط.

ألوان الطباعة

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

ولكن قد تكون مفيدة عند نقل صفحات الويب إلى العالم الحقيقي لنحصل على رؤية أوضح نظراً لعدم قدرة الطابعات على طباعة ألوان مطابقة لألوان الشاشة و ذلك يعود إلى استخدام الطابعات أربع ألوان مختلفة و المزج بينها للحصول على بقية الألوان و هذه الألوان هي الأسود (black) و السماوي (cyan) و الأرجواني (magenta) و الأصفر (yellow) ولكل من يعمل في مجال الطباعة فهو على دراية بهذه الألوان فهي ألوان المحابر في الطابعات الملونة, أما عن القيم الممكنة لكل لون فالقيمة العليا هي 1 و باقي القيم تتراوح بين 0 و الواحد, طبعاً مع امكانية استخدام الفواصل العشرية,وهذا مثال على ألوان الطباعة:

h3 { color: cmyk(0.5, 0.1, 0.0, 0.2); } ملاحظة:*هنالك مجموعة من الألوان تسمى بمجموعة الألوان الأمنة (Safe Colors) و هي عبارة عن مجموعة محدودة تحوي ألوان يمكنك التأكد أنها ستعرض من قبل الشاشات القديمة و الحديثة و ذلك لأن بعض الشاشات (وخاصة تلك بنظام 8 بت) لا تستطيع أن تعرض أكثر من 256 لون فقط لذا جاء لقب المجموعة الأمنة لضمان عرضها على كل الشاشات و ما يهمنا منها المجوعة الخاصة بصفحات الويب (Web-safe Colors) و هي عبارة عن 216 لون تضمن عرضها في أي نوع من أنواع الشاشات، ولكل **مم فوتوشوب أعتقد أنه على علم بهذه الألوان:

الألوان تقنية css3

أدوات و وسائل تساعدك للبدء في تلوين موقعك

عند البدء في إنشاء أي موقع أنصح أولاً باختيار استراتيجية عامة للألوان و اختيار الألوان بعناية و الابتعاد عن الألوان بقيمها الكبرى (مثل الأحمر التام rgb(255,0,0) ) لأن هذه الألوان و بحسب الدراسات ترهق العين، وهذه مجموعة من الأدوات التي ستفيدك في إختيار الألوان بشكل أفضل.

Kuler من Adobe

فهذه الأداة تعطينا مجموعة من الألوان المتناسقة التي يمكن استخدامها لكامل الموقع, إضافة إلى استعراض أكثر الألوان شهرةً و إمكانية إنشاء مجموعة الألوان من الصور و أكثر.

الألوان تقنية css3

إضافة ColorZilla

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

الألوان تقنية css3

يبقى لنا في النهاية أن نشير إلى دعم استخدام هذه القيم اللونية من قبل المتصفحات و نلاحظ (كالعادة) عدم دعم متصفحات الإنترنت إكسبلور بإصدارته القديمة و بغض النظر عن متصفح الإكسبلور نجد الدعم واسع و جاهز للاستخدام في بقية المتصفحات.

 



الألوان تقنية css3

ال**ادر

هذه بعض ال**ادر الخاصة بالموضوع والتي تشرح بشكل مفصل الألوان في تقنية CSS3:

CSS3 Color

الألوان تقنية css3

A Guide to CSS Colors in Web Design

الألوان تقنية css3

Can I Use

الألوان تقنية css3

CSS3 First Look

الألوان تقنية css3

الألوان تقنية css3


hgHg,hk td jrkdm css3

رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

Bookmark and Share

RSS RSS 2.0 XML MAP HTML

الساعة الآن 10:33 AM

أقسام المنتدى

الشريعة و الحياة | المنتدى العام | مـنـتـدى الـعـرب الـمـسافـرون | أزياء - فساتين - عبايات - ملابس نسائية - موضة | مكياج - ميك اب - عطورات - تسريحات شعر - العناية بالبشرة | װ.. أطآيبُ ״ شّهية ]●ะ | اعشاب طبية - الطب البديل - تغذية - رجيم - العناية بالجسم | ديكور - اثاث - غرف نوم - اكسسوارات منزلية | صور - غرائب - كاريكاتير | {.. YouTube..} | منتدى الاسئله والاستفسارات والطلبات | مواضيع منقولة من مواقع اخرى | اخبار التقنية | مواضيع منقولة من مواقع اخرى2 | منتدى تغذيات | منتدى تغذيات الكلي | قِصصْ الأنْبِيَاء | قِسمْ الرَّسُول الكَرِيمْ والصَّحَابة الكِرامْ | القِسمْ الإِسْلاَمِي العَامْ | قِسمْ المَواضِيْع العَامَّة | قِسمْ الشِعرْ والشُعَرَاء | قِسمْ الخَوَاطِر المَنقُولَة | قِسمْ الصُوَرْ | قِسمْ القِصصْ والرِوَايَات | قِسمْ حَوَّاءْ | قِسمْ الطِب والصِحَّة | قِسمْ الصَوتِيَّات والمَرئيَّات الإسْلاميَّة | قِسمْ مَطبَخ صَمْت الوَدَاعْ | قِسمْ الدِيكورْ | قِسمْ كٌرَة القََدَمْ العَرَبِيَّة والعَالمِيَّة | قِسمْ المكْياجْ والإكْسسْوارَات | قِسمْ المَاسِنجرْ | قِسمْ الِسِياحَة والسَفرْ | قِسمْ أَفْلاَمْ الكَرتُونْ | قِسمْ الفِيدْيو المُتَنَوعْ | منتديات الرياضة | اخبار | مواضيع منقولة من مواقع اخرى3 | موقع اجنبي | كوكو فرنسا | كوكو هندية | كوكو روسي | كوكو دنمارك | كوكو ياباني | اخر اخبار العولمة | عالم الحياة الزوجية | عرض أحدث عمليات البحث الشائعة |



Powered by vBulletin® Version 3.8.8 Beta 1
Copyright ©2000 - 2017, KingFromEgypt Ltd Elassal
Adsense Management by Losha
This Forum used Arshfny Mod by islam servant