تعد ألعاب الكمبيوتر من أكثر الطرق شيوعًا لقضاء وقت فراغك. من خلال الانغماس في عالم ألعاب الفيديو، ننسى المشاكل والمتاعب الحقيقية، ونسترخي ونستمتع. وإذا كانت هذه لعبة عبر الإنترنت أو لعبة في وضع متعدد اللاعبين، فإن ميزتها الرئيسية هي أنه يمكنك هنا التعرف على العديد من الأشخاص من جميع أنحاء العالم والعثور على ليس فقط الأشخاص ذوي التفكير المماثل، ولكن أيضًا أفضل الأصدقاء. هل تريد معرفة كيف يمكن أن تؤثر إعدادات اللعبة، وصولاً إلى اللون في MTA، على تفاعلاتك مع اللاعبين الآخرين؟ واصل القراءة!
ميزات وضع متعددة اللاعبين
هل سبق لك أن تساءلت: كيفية ضبط الألوان في MTA أو أي لعبة أخرى؟ لن ينكر أي من الأشخاص الذين أتيحت لهم الفرصة للعب لعبة عبر الإنترنت مع عدد كبير من اللاعبين رغبتهم في إظهار أنفسهم بأفضل صورة أمام الآخرين. يمكنك إظهار الأشياء الخاصة والمكلفة لشخصيتك، أو التميز في معرفتك بمصطلحات الألعاب، أو ببساطة تخصيص واجهة لعبتك بحيث تعمل بشكل أفضل من واجهة اللاعبين عديمي الخبرة.
الألوان في "MTA" - ماذا تريد أن تعرف؟
إذا تحدثنا عن أحد إصدارات وضع اللعب المتعدد للعبة "GTA: San Andreas"، "MTA"، فإن اللون يلعب دورًا مهمًا للغاية هنا. تعد القدرة على تخصيص لون لقبك في MTA إحدى أفضل المهارات التي يجب أن يكتسبها كل لاعب مبتدئ.
لذلك، لإعداد لون لقبك، انتقل إلى تطبيق "MTA: SA" وانقر على خيار الإعدادات، ثم حدد اسمك، ثم أدخل رمز اللون المطلوب قبله مباشرة. يوجد في "MTA" لوحة كبيرة من الألوان للألقاب. لقد قمنا في المقالة بتضمين عينات من اللوحات التي يمكنك من خلالها اختيار الظل الذي تفضله.
الآن أنت تعرف كيف يمكنك التميز وجعل لقبك مختلفًا عن ألقاب اللاعبين المبتدئين وعديمي الخبرة. مشرق، وسوف يميزك عن اللاعبين العاديين ويجذب المزيد من الاهتمام إليك. استمتع بلعبتك!
لسوء الحظ، ليس من الممكن بعد عرض أحاسيس التذوق على الموقع. ولكن يمكن تعويض ذلك بالكامل بمساعدة الألوان. بعد كل شيء، تسمح لك ألوان HTML بعرض أي من ملايين الظلال. لذا " أقلام ملونةهناك أكثر من سبعة في مجموعته.
نظام الألوان في HTML
في لغة HTML، يمكن تحديد اللون بعدة تنسيقات:
1. كقيمة سداسية عشرية - يتم استخدام الرمز المحدد في نظام الأرقام السداسية العشرية. تتكون رموز الألوان هذه في HTML من ثلاثة أزواج من الأرقام السداسية العشرية. كل زوج مسؤول عن تشبع الظل بلونه الأساسي:
- الزوج العددي الأول هو المسؤول عن اللون الأحمر؛
- الزوج الثاني مخصص لمحتوى اللون الأخضر؛
- هذا الأخير لمحتواه الأزرق.
يتم وضع علامة التجزئة في بداية الكود (قبل الأرقام). هذا هو رمز اللون الست عشري. بالإضافة إلى الأرقام من 1 إلى 9، يستخدم نظام الأرقام هذا حروف الأبجدية اللاتينية (A، B، C، D، E، F).
على سبيل المثال، سيبدو رمز اللون الأبيض في لغة HTML مثل #FFFFFF:
2. الكلمة الرئيسية - يدعم HTML حاليًا حوالي 147 كلمة رئيسية. ولكن ليست كل هذه الكلمات فريدة من نوعها. يشير بعضهم إلى نفس لون الظل.
يتم تمثيل اللون الرمادي بكلمتين رئيسيتين: Gray و Gray . يتم إعطاء الرمز السداسي العشري (HEX) بنفس القيمة #808080.
مثال:
#808080
3. بتنسيق RGB - يعتمد ترميز الألوان هذا في html على استخدام ثلاث قيم، تم تعيينها في النطاق من 0 إلى 255. تحدد كل واحدة منها تشبع اللون بأحد الألوان الأساسية:
- ص - أحمر (أحمر)؛
- ز - أخضر (أخضر)؛
- ب – الأزرق (الأزرق).
تتم كتابة رقم اللون بتنسيق RGB بالشكل التالي: rgb(0, 210, 100).
لون الخلفية:RGB(100,186,43)
4. في تنسيق RGBA - هو تنسيق RGB محسّن، حيث تحدد القيمة الرابعة شفافية اللون ككسر عشري من 0 إلى 1.
مثال الاستخدام:
لون الخلفية: rgba (100،86،143،0.2)
لون الخلفية: rgba (100،86،143،0.5)
لون الخلفية: rgba (100،86،143،0.8)
لون الخلفية: rgba (100،86،143،1)
جداول ألوان HTML ومولدات الألوان
مع هذه المجموعة الواسعة من تنسيقات إعدادات الألوان، من السهل أن تصاب بالارتباك. لذلك تم اختراع جدول ألوان خاص. يوفر 147 اسمًا رئيسيًا لظلال الألوان مع رموز الامتثال لجميع معايير الألوان الرئيسية. بالإضافة إلى ذلك، تم تجهيز كل حقل بشريط لاختيار الألوان المرئية. يتم عرض أحد هذه الجداول على موقع colorcheme.ru:
ولكن حتى مع هيكلة المطابقة هذه، قد يكون اختيار الظل المناسب أمرًا صعبًا. وليست حقيقة أن جدول رموز الألوان سيحتوي على الرمز الذي تحتاجه.
للتغلب على هذه العقبة وجعل اختيار الظل المناسب أمرًا سهلاً قدر الإمكان، تم تطوير خدمات الويب التفاعلية. قد تختلف واجهة المستخدم الخاصة بهم قليلاً عن بعضها البعض.
على موقع الويب html-color-codes.info، يبدو مولد الألوان كما يلي:
وداخل خدمة color-picker.appsmaster.co، يتم تنفيذ هذه الأداة بشكل مختلف قليلاً:
يتم ضبط تشبع كل لون في المولد باستخدام أشرطة تمرير خاصة. بصريًا، يتم عرض الظل حسب لون الإطار والمستطيل على الجانب الأيسر. في الأسفل، تعرض 3 حقول رمز اللون بالتنسيقات الأساسية.
لكن مولد الألوان متاح ليس فقط في المواقع المتخصصة. تم تجهيز جميع برامج تحرير الرسوم تقريبًا بأداة مماثلة. على سبيل المثال الفوتوشوب:
احتياطات السلامة عند العمل مع اللون
وكان هذا منذ زمن طويل، في عصر بطاقات الفيديو التي كانت تدعم 256 لونًا فقط. في تلك الأوقات البعيدة، لم يكن بإمكان أنظمة التشغيل سوى عرض عدد معين من ظلال ثمانية بتات دون تشويه.
ثم تم تطوير جدول رائع للألوان الآمنة. حددت 216 لونًا يمكن عرضها دون تشويه في أي من المتصفحات في ذلك الوقت. وإلى يومنا هذا " مخطوطة عظيمة» لا يزال متاحًا في بعض الموارد:
في الوقت الحاضر تغير كل شيء. لذلك، يتم إلغاء جميع قواعد السلامة عند العمل بالألوان في HTML بالكامل. بعد كل شيء، تدعم أجهزة الكمبيوتر الحديثة أكثر من 16 مليون لون مختلف. و216 لونًا آمنًا غرقت في غياهب النسيان.
تم تأكيد هذه البيانات بالكامل من خلال الإحصائيات. إذا حكمنا من خلال ذلك، في عام 2014، 0.5٪ فقط من المستخدمين لديهم أجهزة كمبيوتر تدعم 256 لونًا فقط.
أساسيات تناغم الألوان
لا نتمتع جميعًا بحس الذوق الطبيعي المتناغم. ولذلك، فإن اختيار اللون المناسب يمكن أن يشكل تحديا حقيقيا. ولكن، الحمد للعلم، حتى أنها تمكنت من وصف تناغم الألوان في شكل عدة مخططات. وكلها تعتمد على استخدام عجلة الألوان. مخططات لاختيار الألوان المتناغمة في HTML:
- نظام الألوان المتوازي - عندما يكون كلا الظلال في عجلة الألوان متوازيين؛
- مخطط ثلاثي - تعتمد جميع زوايا المثلث على أحد الألوان؛
- أحادي اللون - عند تحديد عدة ظلال متقاربة من نفس اللون؛
- التناظرية هي نسخة أكثر تقدمًا من الدائرة أحادية اللون. في هذه الحالة، توجد ظلال من نفس اللون على مسافة معينة.
يتم تقديم تنفيذ جميع هذه المخططات بشكل جيد ضمن خدمة paletton.com. يسمح لك باختيار لون متناغم بسهولة.
في لغة HTML، يمكن تحديد اللون بثلاث طرق:
تحديد لون في HTML باسمه
يمكن تحديد بعض الألوان حسب اسمها، باستخدام اسم اللون باللغة الإنجليزية كقيمة. الكلمات الرئيسية الأكثر شيوعًا: الأسود والأبيض والأحمر والأخضر والأزرق وما إلى ذلك:
لون النص - أحمر
الألوان الأكثر شيوعًا لمعيار اتحاد شبكة الويب العالمية (W3C):
| لون | اسم | لون | اسم | لون | اسم | لون | اسم |
|---|---|---|---|---|---|---|---|
| أسود | رمادي | فضي | أبيض | ||||
| أصفر | الجير | أكوا | ضارب الى الحمرة | ||||
| أحمر | أخضر | أزرق | أرجواني | ||||
| كستنائي | زيتون | البحرية | البط البري |
مثال على استخدام أسماء الألوان المختلفة:
مثال: تحديد لون باسمه
- جربه بنفسك »
رأس على خلفية حمراء
رأس على خلفية برتقالية
العنوان على خلفية الجير
نص أبيض على خلفية زرقاء
رأس على خلفية حمراء
رأس على خلفية برتقالية
العنوان على خلفية الجير
نص أبيض على خلفية زرقاء
تحديد اللون باستخدام RGB
عند عرض ألوان مختلفة على الشاشة، يتم استخدام لوحة RGB كأساس. يتم الحصول على أي لون عن طريق مزج ثلاثة ألوان أساسية: ص - أحمر, ز- أخضر, ب – الأزرق. يتم إعطاء سطوع كل لون بواسطة بايت واحد وبالتالي يمكن أن يأخذ قيمًا من 0 إلى 255. على سبيل المثال، يتم عرض RGB(255,0,0) باللون الأحمر حيث تم ضبط اللون الأحمر على أعلى قيمة له (255) و تم ضبط الباقي على 0 ويمكنك أيضًا ضبط اللون كنسبة مئوية. تشير كل معلمة إلى مستوى سطوع اللون المقابل. على سبيل المثال: القيم rgb(127، 255، 127) و rgb(50%، 100%، 50%) ستحدد نفس اللون الأخضر للتشبع المتوسط:
مثال: تحديد اللون باستخدام RGB
- جربه بنفسك »
رغب (127، 255، 127)
آر جي بي (50%، 100%، 50%)
رغب (127، 255، 127)
آر جي بي (50%، 100%، 50%)
اضبط اللون حسب القيمة السداسية العشرية
قيم ر ز بيمكن أيضًا تحديدها باستخدام قيم الألوان السداسية العشرية (HEX) في النموذج: #RRGGBB حيث RR (أحمر)، GG (أخضر) و BB (أزرق) هي قيم سداسية عشرية من 00 إلى FF (مثل العلامة العشرية 0-255) ) . النظام السداسي العشري، على عكس النظام العشري، يعتمد، كما يوحي اسمه، على الرقم 16. ويستخدم النظام السداسي العشري العلامات التالية: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9، A، B، C، D، E، F. هنا يتم استبدال الأرقام من 10 إلى 15 بأحرف لاتينية. يتم تمثيل الأرقام الأكبر من 15 في النظام السداسي العشري من خلال دمج حرفين في قيمة واحدة. على سبيل المثال، أعلى رقم 255 بالنظام العشري يتوافق مع أعلى قيمة FF بالنظام الست عشري. على عكس النظام العشري، يسبق الرقم السداسي العشري رمز التجزئة. # على سبيل المثال، يظهر #FF0000 باللون الأحمر لأنه تم تعيين اللون الأحمر على أعلى قيمة له (FF) وتم تعيين بقية الألوان على الحد الأدنى لقيمتها (00). علامات بعد رمز التجزئة # يمكنك الكتابة بالأحرف الكبيرة والصغيرة. يسمح لك النظام السداسي العشري باستخدام النموذج المختصر #rgb، حيث كل حرف يعادل الضعف. وبالتالي، يجب اعتبار الإدخال #f7O كـ #ff7700.
مثال: اللون السداسي
- جربه بنفسك »
الأحمر: #FF0000
الأخضر: #00FF00
الأزرق: #0000FF
الأحمر: #FF0000
الأخضر: #00FF00
الأزرق: #0000FF
أحمر+أخضر=أصفر: #FFFF00
أحمر + أزرق = أرجواني: #FF00FF
أخضر+أزرق=سماوي: #00FFFF
قائمة الألوان الشائعة (الاسم، HEX وRGB):
| الاسم الانجليزي | الاسم الروسي | عينة | عرافة | RGB | ||
|---|---|---|---|---|---|---|
| قطيفة | قطيفة | #E52B50 | 229 | 43 | 80 | |
| العنبر | العنبر | #FFBF00 | 255 | 191 | 0 | |
| أكوا | الأزرق والأخضر | #00FFFF | 0 | 255 | 255 | |
| أزور | أزور | #007FFF | 0 | 127 | 255 | |
| أسود | أسود | #000000 | 0 | 0 | 0 | |
| أزرق | أزرق | #0000FF | 0 | 0 | 255 | |
| بوندي بلو | مياه شاطئ بوندي | #0095B6 | 0 | 149 | 182 | |
| النحاس | النحاس | #B5A642 | 181 | 166 | 66 | |
| بني | بني | #964ب00 | 150 | 75 | 0 | |
| أزرق سماوي | أزور | #007BA7 | 0 | 123 | 167 | |
| أخضر ربيعي داكن | أخضر ربيعي داكن | #177245 | 23 | 114 | 69 | |
| الزمرد | الزمرد | #50سي878 | 80 | 200 | 120 | |
| باذنجان | باذنجان | #990066 | 153 | 0 | 102 | |
| ضارب الى الحمرة | ضارب الى الحمرة | #FF00FF | 255 | 0 | 255 | |
| ذهب | ذهب | #FFD700 | 250 | 215 | 0 | |
| رمادي | رمادي | #808080 | 128 | 128 | 128 | |
| أخضر | أخضر | #00FF00 | 0 | 255 | 0 | |
| نيلي | نيلي | #4B0082 | 75 | 0 | 130 | |
| يشم | يشم | #00A86B | 0 | 168 | 107 | |
| الجير | الجير | #CCFF00 | 204 | 255 | 0 | |
| الملكيت | الملكيت | #0BDA51 | 11 | 218 | 81 | |
| البحرية | أزرق غامق | #000080 | 0 | 0 | 128 | |
| أكسيد الرصاص | أكسيد الرصاص | #CC7722 | 204 | 119 | 34 | |
| زيتون | زيتون | #808000 | 128 | 128 | 0 | |
| البرتقالي | البرتقالي | #FFA500 | 255 | 165 | 0 | |
| خَوخ | خَوخ | #FFE5B4 | 255 | 229 | 180 | |
| اليقطين | اليقطين | #FF7518 | 255 | 117 | 24 | |
| أرجواني | البنفسجي | #800080 | 128 | 0 | 128 | |
| أحمر | أحمر | #FF0000 | 255 | 0 | 0 | |
| زعفران | زعفران | #F4C430 | 244 | 196 | 48 | |
| البحر الأخضر | البحر الأخضر | #2E8B57 | 46 | 139 | 87 | |
| مستنقع أخضر | بولوتني | #ACB78E | 172 | 183 | 142 | |
| البط البري | الأزرق والأخضر | #008080 | 0 | 128 | 128 | |
| أولترامارين | أولترامارين | #120A8F | 18 | 10 | 143 | |
| البنفسجي | البنفسجي | #8B00FF | 139 | 0 | 255 | |
| أصفر | أصفر | #FFFF00 | 255 | 255 | 0 | |
رموز الألوان (الخلفية) حسب التشبع والدرجة.
CSS غير مفهوم). لذلك، يحتاج مشرف الموقع المستقبلي ببساطة إلى الدراسة أدوات HTML التي تسمح لك بتغيير اللون،على سبيل المثال، من أجل إعداد رسائل إخبارية مشرقة وملونة عبر البريد الإلكتروني تجذب انتباه الجمهور المستهدف للموقع.
هذا المنشور طويل جدًا، ولكن منه ستتعرف على جميع الميزات التقنية للعمل مع الألوان باستخدام HTML. سنبدأ التسجيل بفهم السؤال: لماذا نحتاج إلى إبراز عناصر معينة في صفحة HTML بالألوان؟ ثم سنتحدث عن نموذج RGB، الذي يسمح لك بتعيين الألوان في HTML باستخدام رموز خاصة (على طول الطريق، سننظر إلى رموز الألوان العشرية وقيم ألوان HTML السداسية العشرية). ستتعرف أيضًا من هذا المنشور على لوحة الألوان وستفهم أيضًا سبب عدم وجود لوحة ألوان في HTML. وفي نهاية هذا المنشور سيكون هناك أمثلة على تغيير لون الخلفية والنص والروابط.
استخدام الألوان في HTML
ستكون صفحات الموقع مملة وغير مثيرة للاهتمام بدون الصور، كما تحدثنا عنها سابقًا وبتفاصيل كبيرة. لكن الصور لها عيب واحد مهم: كل صورة هي صورة إضافية، وبالتالي عبء إضافي على الاستضافة.
أود أن أشير إلى أنني لم أستخدم صورة واحدة لتصميم مدونة WordPress الخاصة بي؛ فقد تم تصميم التصميم بالكامل باستخدام الألوان. نفس الشيء اليوم سنتحدث عن الألوان في HTML. يتم استخدام الألوان في HTML لأغراض مختلفة، على سبيل المثال، يمكننا تصميم تخطيطات موقع الويب من خلال تمييز عناصر معينة بلون أو آخر.
باستخدام الألوان، يمكننا تركيز انتباه زوارنا على نص معين أو جزء معين من الموقع. لاحظ أنه يتم تحديده أيضًا باستخدام اللون بطريقة يمكن للمستخدم فهمها: الرابط الذي نقر عليه بالفعل، والرابط الذي لم يقم بزيارته بعد، وصفحة HTML التي يتصفحها حاليًا.
احرص استخدام الألوان لتصميم مستندات HTML، ليست كل الألوان تتماشى معًا ولن يكون كل لون ممتعًا لزوار موقعك على الويب. لكن من الأفضل أن تسأل مصممي الويب عن هذه التفاصيل الدقيقة؛ ستساعدك هذه المقالة على فهم الميزات التقنية التي تسمح لك بالتحكم في لون عناصر صفحة HTML.
لكن لا يجب أن تنسى أنه يجب فصل التصميم عن المحتوى، لذا من الأفضل استخدام CSS لمعالجة الألوان في صفحات HTML، ولكننا سنتحدث عن هذا في تدوينة أخرى. الآن سنرى ما هي الأدوات التي يمتلكها HTML للتحكم في الألوان على صفحات الموقع؟.
يوجد في صناعة تكنولوجيا المعلومات العديد من نماذج الألوان لمعالجة الألوان. نموذج تمثيل الألوان الأكثر استخدامًا هو نموذج RGB. سنتحدث عن بعض ميزات هذا النموذج هنا، وسيكون هناك منشور منفصل لمقدمة أكثر تفصيلاً عن RGB. ستجد أدناه قائمة بنماذج الألوان المستخدمة في تكنولوجيا المعلومات (وليس فقط HTML وCSS):
- نموذج آر جي بي. لقد أصبح هذا النموذج واسع الانتشار وربما يكون أحد أكثر الطرق ملائمة وشائعة لمعالجة لون عناصر HTML.
- نموذج RGBA. هذا النموذج مشابه جدًا لنموذج RGB، ولكنه يتضمن قناة ألفا للون. الميزة الخاصة لنموذج RGBA هي أنه يسمح لك بالتعديل ليس فقط لون عنصر HTML، ولكن أيضًا شفافيتهبسبب وجود قناة ألفا. تمت إضافة نموذج RGBA إلى CSS3 وهو غير مدعوم في المتصفحات القديمة.
- الموديل HSL. تكمن خصوصية نموذج HSL في أننا نضبط اللون باستخدام معلماته: درجة اللون والكثافة والخفة. يعد فهم هذا النموذج أكثر صعوبة إلى حد ما من نموذج RGB.
- الموديل HSLA هذا النموذج مشابه جدًا لنموذج HSL، ولكن تمامًا مثل نموذج RGBA، فهو يسمح لك بالعمل مع قناة ألوان ألفا، لذلك باستخدام HSLA يمكننا تعيين ليس فقط لون عنصر HTML على الصفحة، ولكن أيضًا شفافيته .
- موديل HSV (HSB). لا ينبغي الخلط بين هذا النموذج ونموذج HSL. لاحظ أنه يمكن استخدام النماذج الأربعة الأولى في HTML أو CSS لتصميم صفحات الويب، ولكن لا يمكن استخدام نموذج HSV. تم تصميم HSV من قبل أحد مؤسسي Pixar في عام 1978 وهو مشابه جدًا لـ HSL.
- نموذج CMY أو CMYK. يستخدم هذا النموذج في جميع الطابعات الملونة للطباعة. يعتمد نموذج CMYK على القاعدة التي تنص على أن الطباعة تتم على أوراق بيضاء. يتم الحصول على أي لون CMYK عن طريق مزج اللون السماوي (الأزرق الفاتح، الفيروزي)، والأرجواني (الأرجواني) والأصفر. كل لون في نموذج CMY له خاصية العتامة (كمية الحبر)، ويتم قياسها كنسبة مئوية. ولكن بالإضافة إلى الألوان الثلاثة المذكورة، يستخدم نموذج CMYK اللون الأسود أيضًا.
تعتمد جميع نماذج الألوان المذكورة أعلاه على الأجهزة، إذا كنت تستخدمها اضبط لون عنصر HTML باستخدام نموذج RGB أو HSL، فمن المستحيل أن نقول على وجه اليقين ما هو الظل الدقيق للون الذي سيراه زائر موقعك، نظرًا لأن شاشات جميع المستخدمين مختلفة وتنقل الألوان بشكل مختلف. لاحظ أيضًا أن جميع النماذج المذكورة أعلاه تعتمد على نموذج RGB ويمكن تحويل أي لون محدد في أي من النماذج (باستثناء HSLA وRGBA بسبب وجود قناة ألفا) إلى RGB.
إذا تحدثنا عن نماذج نقل الألوان المستقلة عن الأجهزة، فمن الجدير بالذكر نموذج LAB. لذلك، أخذنا استراحة قصيرة من العمل بالألوان في HTML من خلال التعرف على بعض نماذج الألوان. لاحظ أن المتصفحات "تفهم" النماذج الأربعة الأولى فقط: HSL، وRGB، وHSLA، وRGBA. لذلك، لا يمكننا التحكم في لون عناصر HTML إلا باستخدام هذه النماذج.
كيف يتم تشكيل لون عنصر HTML: بعض ميزات نموذج RGB
دعونا معرفة ذلك كيف يتم تشكيل لون عنصر HTMLومع بعض ميزات نموذج RGB. لاحظ أننا سنتحدث عن نموذج RGB، بالإضافة إلى النماذج الأخرى المستخدمة لتصميم صفحات الويب، بعد ذلك بقليل في منشورات منفصلة.
لذلك، فإن نموذج RGB يرمز إلى الأحمر والأخضر والأزرق. يعتمد نموذج RGB على مبدأ الإضافة. وهذا المبدأ هو أنه للحصول على أي لون، يضاف اللون إلى اللون الأسود. للحصول على فهم أفضل، تخيل أن شاشتك عبارة عن جدار أسود ولديك ثلاثة أضواء موضعية: الأولى تضيء باللون الأحمر، والثانية تضيء باللون الأخضر، والثالثة تضيء باللون الأزرق. يمكنك ضبط سطوع كل ضوء كشاف باستخدام مسطرة ذات أرقام من 0 إلى 255. وبناء على ذلك، إذا قمت بضبط ضوء الكشاف على الصفر، فإنه ينطفئ ولا يلمع إذا كانت القيمة 255، فإن ضوء الكشاف ينتج ألمع لون ممكن .
وبالتالي، اتضح أنه إذا قمت بتسليط ضوء أحمر وأخضر على نفس النقطة، فسوف تلاحظ بقعة صفراء على جدار أسود. إذا قمت بدمج اللون الأحمر والأزرق، فستحصل على اللون الأرجواني، وإذا قمت بدمج اللون الأخضر والأزرق، فستكون بقعة الضوء على جدار أسود سماوية، ولكن إذا قمت بتوجيه الأضواء الثلاثة جميعها إلى نقطة واحدة، فستكون بقعة الضوء بيضاء.
المبدأ الموصوف أعلاه هو أساس نموذج RGB ويستخدم لمعالجة الألوان في عناصر HTML على صفحة في المتصفح.
سمات HTML لتغيير لون العناصر: لون خلفية العنصر ولون النص داخل العنصر
يستخدم لجعل عناصر الصفحة فريدة من نوعها. باستخدام سمات HTML يمكننا التعامل مع لون العناصر:
- لون سمة HTML. تتيح لك هذه السمة تغيير لون النص داخل عنصر HTML. يمكن أن تأخذ السمة قيمًا في شكل أسماء ألوان HTML وأكواد نموذج RGB برموز سداسية عشرية وعشرية. سمة اللون هي سمة HTML فريدة تسمح لك بتغيير لون النص داخل عناصر HTML معينة.
- سمة نص HTML. هذه السمة هي سمة علامة فريدة . علامة جنبا إلى جنب مع العلامات و استمارة . إذا كنت تتذكر، داخل الحاوية يتم وضع العناصر التي يعرضها المتصفح بعد ذلك في منطقة العرض. سمة النص تسمح لك بتحديد لون النص الافتراضي لصفحة HTML بأكملها.
- سمة HTML bgcolor. إنها أيضًا سمة HTML فريدة وتسمح لك بتغيير لون الخلفية لبعض عناصر HTML.
- سمة HTML vlink. هذه السمة فريدة ولا تنطبق إلا على العلامة لتغيير لون الرابط الذي قام المستخدم بزيارته بالفعل.
- سمة HTML على حد سواء. هذه السمة فريدة أيضًا ولا تنطبق إلا على العلامة . تقوم السمة alink بتغيير لون رابط HTML النشط.
- سمة رابط HTML. يتم استخدام سمة الرابط فقط مع العلامة ويعمل على تغيير لون روابط صفحات HTML التي لم يقم المستخدم بزيارتها بعد.
يرجى ملاحظة: لا يوصى باستخدام السمات لتغيير لون عناصر HTML، نظرًا لوجود أوراق أنماط متتالية تسمح لك بفصل تصميم صفحة الويب عن محتواها.
استخدام رموز الألوان العشرية في HTML
لذلك، تحدثنا عن حقيقة أنه يمكنك ضبط سطوع الضوء باستخدام مسطرة خاصة توجد عليها رسومات مرقمة من 0 إلى 255. الآن دعونا نرى كيف سيساعدنا هذا في تغيير لون عناصر HTML. المهم أنه يمكننا تغيير لون النص داخل عنصر HTML أو لون الخلفية في HTML باستخدام الكود العشري كما يلي:
إذا قمت بإنشاء مستند HTML تم فيه وصف حاوية النص، كما في المثال، فسوف ترى:
- أصبح لون خلفية مستند HTML الآن باللون الأخضر: bgcolor=”rgb (0,255,0)”.
- سيتحول لون نص صفحة HTML إلى اللون الأزرق: text=”rgb (0,0,255)”.
- سيكون لون HTML للارتباط الذي لم يقم المستخدم بزيارته باللون الأبيض: link=”rgb (255,255,255)”.
- ستكون ألوان الرابط المفتوح حاليًا باللون الأسود: alink=”rgb (0,0,0)”.
- وسيكون لون رابط HTML الذي تمت زيارته بالفعل باللون الأحمر: vlink=”rgb (255,0,0)”.
يرجى ملاحظة: لا أحد يمنعك من ضبط "قوة الأضواء" حسب تقديرك، يمكنك ذلك تعيين لون HTML، على سبيل المثال بهذه الطريقة:
رغب (94، 85، 50) |
واحصل على لون المفاجأة الطفولية. هذه هي خصوصية ومرونة وراحة نموذج RGB. شاشتك عبارة عن جدار أسود به أضواء موجهة، ويمكنك ضبط قوة هذه الأضواء وإنشاء جميع أنواع ألوان الخلفية والنصوص والروابط باستخدام سمات HTML في نظام التدوين العشري، أو يمكنك أيضًا أن تقول: باستخدام رموز الألوان العشرية.
في الحقيقة من الخطأ قول رموز الألوان العشرية في HTML، فالأصح أن نقول رموز الألوان العشرية RGBنظرًا لأن هذا النموذج لا يستخدم فقط لتصميم صفحات الويب بتنسيق HTML وCSS.
قيم ألوان HTML الست عشرية
إن تعيين لون عناصر HTML باستخدام الرموز العشرية لنموذج RGB ليس مناسبًا للغاية (وفي الوقت الحالي، لا تدعم جميع المتصفحات هذه الطريقة لمعالجة الألوان)، نظرًا لأن التسجيل لن يكون الأكثر إحكاما، فهو أكثر ملاءمة ضبط لون عناصر HTML باستخدام القيم السداسية العشرية. في الصورة أدناه يمكنك أن ترى كيف يتم تحويل القيم العشرية إلى الست عشري.
بالنسبة لأولئك الذين ليسوا على دراية بنظام الأرقام السداسي العشري، يجب تقديم شرح بسيط حتى تتمكن من ذلك بسهولة التعامل مع لون عناصر HTML باستخدام رموز نموذج RGB الست عشرية. أولاً، تم تسمية نظام الأرقام العشري بهذا الاسم لأنه يمكن الحصول على أي رقم من خلال مجموعة من عشرة أرقام (المصطلحات مهمة: هناك فرق بين الرقم والرقم): 0، 1، 2، 3، 5، 6، 7، 8، 9.
في نظام الأرقام السداسي العشري، يمكن كتابة أي رقم باستخدام مزيج من ستة عشر رقمًا: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9، أ، ب، ج، د، ه، و. لتسهيل الفهم، يمكنك أن تفترض أن a يساوي عشرة وأن f يساوي خمسة عشر. على سبيل المثال، سيتم كتابة الرقم ستة عشر بالنظام الست عشري كـ 10. وسيتم كتابة الرقم 255 بالشكل صص.
الآن دعونا نرى كيف يمكننا ذلك ضبط لون عناصر HTML باستخدام القيم السداسية العشريةلنكرر مثالنا السابق، مع استبدال رموز الألوان العشرية بنظيراتها السداسية العشرية:
<
body
alink
=
”#000000” الرابط=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”> |
يرجى الملاحظة: تعد كتابة الألوان بتنسيق HTML بتنسيق سداسي عشري أكثر إحكاما إلى حد مامن العلامة العشرية، وهذا هو أول واحد. ثانيًا: يتم ضبط قوة كل ضوء كشاف بأرقام من 0 إلى 255. لكتابة الرقم 255 يتطلب رقمين بتنسيق سداسي عشري (ff = 250)، وبالتالي فإن سطوع كل قناة لون (تسمى الأضواء الكاشفة الخاصة بنا بشكل صحيح قناة اللون، قناة اللون) يتم تعيينها برقمين من 0 إلى f.
يرجى ملاحظة: يتم تعيين سطوع كل قناة لون بشكل منفصل، ولكن إذا تخيلنا أن هذا رقم واحد، فإن الحد الأقصى لعدد ممكن في نظام الأرقام السداسية العشرية لنموذج RGB هو ffffff، وسوف يعطينا اللون الأبيض، وفي النظام العشري هو: 16,777,215. يتيح لك هذا العدد من الألوان والظلال ضبط/استخدام نموذج RGB. يأتي هذا الرقم من حقيقة أن كل قناة ألوان تحتوي على 256 قيمة سطوع (من 0 إلى 255)، على التوالي: 256 * 256 * 256 = 16,777,215.
تعد قيم ألوان HTML السداسية العشرية أكثر إحكاما وأكثر وضوحا، يستخدم معظم مصممي الويب ومصممي التخطيط القيم السداسية العشرية لمعالجة الألوان في HTML، لذلك نوصي بعدم التعود على الشكل العشري لتدوين الألوان، ولكن استخدام القيم السداسية العشرية على الفور.
من الواضح أنه في البداية سيكون من الصعب على المصمم المبتدئ أو مصمم التخطيط التنقل في الشكل السداسي العشري لتدوين الألوان، لذلك يحتوي أي محرر رسومي تقريبًا على ما يسمى بلوحة الألوان، والتي تتيح لك تحديد اللون المطلوب والحصول عليه رمز لنماذج الألوان المختلفة في أنظمة أرقام مختلفة.
تحتوي بعض برامج تحرير النصوص، مثل ، على امتدادات لوحة الألوان التي تكون مفيدة جدًا عندما تريد تحديد لون وتغييره بسرعة. لا أستطيع أن أقول أي شيء عن هذا في هذا الصدد.
أسماء الألوان في HTML
سمات HTML يمكن أن تأخذ كقيم ليس فقط الرموز العشرية والقيم السداسية العشرية، ولكن أيضًا أسماء الزهور الخاصة. إن تغيير لون عناصر HTML باستخدام اسمها ليس فكرة جيدة. أولاً، خلف اسم اللون في HTML يكمن رمز نموذج RGB، وثانيًا، يعرض كل متصفح لون عنصر HTML المحدد بالاسم بشكل مختلف، ويعتمد ذلك فقط على رغبة مطوري المتصفح.
لهذا السبب لا ينصح باستخدام اسم اللون في HTML. يعتمد نموذج RGB على الأجهزة، ويعتمد اللون المحدد بالاسم على المتصفح وحتى إصداره. دعنا نحاول ضبط لون عناصر صفحة HTML باستخدام الاسم:
<
body
alink
=
”black
”link
=
”#أبيض” vlink=”red” bgcolor=”green” text=”blue”> |
كما تفهم، هناك الكثير من الألوان والظلال. تجدر الإشارة هنا إلى أن سمات HTML لا تسمح لك بتعيين التدرج اللوني؛ حيث يتوفر هذا الخيار في CSS، ولكننا سنتحدث عن ذلك في مقال آخر. والعديد من الألوان في HTML لها أسماء. يمكنك العثور على جدول بأسماء الألوان بتنسيق HTML وأكواد RGB الخاصة بها على موقع الويب الخاص بي.
يظهر الجدول أعلاه ما هو اللون الذي سيحصل عليه عنصر HTML إذا قمت بتحديده باستخدام الاسم. يحتوي هذا الجدول على 16 لونًا وأسمائها المعتمدة من قبل W3C ويجب عرضها بنفس الطريقة في أي متصفح. لكن في الواقع، في HTML يمكنك استخدام حوالي 200 اسم لون تدعمه المتصفحات الرئيسية، مثل: Opera، Chrome، Firefox، Safari، Internet Explorer (هذا البيان مثير للجدل للغاية حول الأخير).
لوحة ألوان HTML
في الحقيقة لا توجد لوحة ألوان في HTML. دعونا نتذكر تعريف لوحة الكلمة. اللوحة هي لوحة صغيرة رفيعة ذات شكل رباعي أو بيضاوي، يمزج عليها الفنان الدهانات ويحصل على جميع أنواع الألوان. في بعض الأحيان يتم عمل ثقب في لوحة الإبهام لجعلها مريحة في الإمساك بها. ستجد صورة للوحة أدناه. لهذا السبب لا توجد لوحة ألوان في HTML.
ولكن في برامج تحرير النصوص المختلفة هناك المكونات الإضافية للوحة الألوانهذه المساعدة تحديد لون عنصر HTML بسرعة. توجد أيضًا لوحة ألوان في برامج تحرير الرسوم ، لأنه ليس من الملائم والممتع للغاية أن يجلس المصمم ويحسب: ما هو اللون الذي سيظهر عند سطوع معين لقناة معينة. في الصورة أدناه يمكنك رؤية أبسط لوحة لمحرر الرسام.
لاحظ أن العديد من وحدات لوحة الألوان والمكونات الإضافية تسمح لك بالحصول على رمز اللون ليس فقط بتنسيق RGB/RGBA، ولكن أيضًا بتنسيق النماذج الأخرى. يتذكر أنه لا يوجد لوحة في HTMLحسنًا، إلا إذا كنت فنانًا حتى النخاع و يمكنك استدعاء لوحة الألوان لصفحة HTML بتلك الألوانالتي تم استخدامها لتزيينها (بعد كل شيء، تشير اللوحة أحيانًا إلى الألوان التي يستخدمها فنان معين، أو الألوان التي تم استخدامها في إنشاء لوحة معينة).
تعلم تغيير لون النص في HTML
وصلنا الكثير من النظريات حول الألوان في HTML، دعونا نتدرب ونحاول العمل مع ألوان عناصر HTML. أول شيء سوف نتعلم القيام به هو تغيير لون النص في وثيقة HTMLباستخدام سمات وعلامات خاصة. افتح أي محرر واكتب فيه الكود التالي:
تعلم العمل مع الألوان في HTML
تغيير لون النص
لتغيير لون النص، يمكننا استخدام سمة النص BODY الفريدة للعنصر، ويمكننا أيضًا استخدام عنصر FONT وسمة اللون الخاصة به. سيكون هذا النص باللون الرمادي.
< ! DOCTYPE html > < html lang = "ru-RU" > < head > < meta charset = "UTF-8" > < title >تغيير لون النص في مستند HTML< / title > < link rel = "stylesheet" type = "text/css" href = "style.css" / > < / head > < body text = "#ff0000" > < h1 > < font color = "rgb(0,255,0)" >تعلم العمل مع الألوان في HTML< / font > < / h1 > < h2 > < font color = "yellow" >تغيير لون النص< / font > < / h2 > < p >لتغيير لون النص يمكننا استخدام فريدة من نوعها سمة النص BODY للعنصر، واستخدم أيضًا عنصر FONT < / body > < / html > |
سأحفظ هذا الملف باسم color.html وأنصحك بعدم نسيان ملفات . لا يتم دعم تسجيل اللون في نظام الأرقام العشرية بواسطة Chrome وFirefox وOpera، لكن IE يفهم تدوين اللون هذا ويسلط الضوء على رأس HTML باللون الأخضر:
الشيء الصحيح الذي يجب قوله هو عدم تغيير لون النص في HTML، ولكن تغيير لون الخط في HTML. عن
تُستخدم رموز الألوان في CSS لتحديد الألوان. عادة، يتم استخدام رموز الألوان أو قيم الألوان لتعيين اللون إما للون الأمامي لعنصر (مثل لون النص، لون الرابط) أو لون خلفية العنصر (لون الخلفية، لون الكتلة). ويمكن استخدامها أيضًا لتغيير لون الزر والحدود والعلامة والتحويم والتأثيرات الزخرفية الأخرى.
يمكنك تحديد قيم الألوان الخاصة بك بتنسيقات مختلفة. يسرد الجدول التالي كافة التنسيقات الممكنة:
يتم وصف التنسيقات المدرجة بمزيد من التفاصيل أدناه.
ألوان CSS - الرموز السداسية
رمز اللون الست عشريهو تمثيل مكون من ستة أرقام للون. يمثل أول رقمين (RR) القيمة الحمراء، ويمثل الرقمان التاليان القيمة الخضراء (GG)، ويمثل الرقمان الأخيران القيمة الزرقاء (BB).
ألوان CSS - رموز سداسية قصيرة
رمز اللون الست عشري القصيرهو شكل أقصر من التدوين المكون من ستة أحرف. في هذا التنسيق، يتم تكرار كل رقم لإنتاج قيمة لون مكافئة مكونة من ستة أرقام. على سبيل المثال: يصبح #0F0 #00FF00.
يمكن الحصول على القيمة السداسية العشرية من أي برنامج رسومي مثل Adobe Photoshop وCore Draw وما إلى ذلك.
كل رمز لون سداسي عشري في CSS سيُسبق بعلامة التجزئة "#". فيما يلي أمثلة على استخدام الرموز السداسية العشرية.
ألوان CSS - قيم RGB
قيمة RGBهو رمز اللون الذي تم تعيينه باستخدام خاصية rgb(). تأخذ هذه الخاصية ثلاث قيم: واحدة لكل من الأحمر والأخضر والأزرق. يمكن أن تكون القيمة عددًا صحيحًا، من 0 إلى 255، أو نسبة مئوية.
ملحوظة:لا تدعم جميع المتصفحات خاصية اللون rgb()، لذا لا يُنصح باستخدامها.
يوجد أدناه مثال يوضح ألوانًا متعددة باستخدام قيم RGB.
مولد رمز اللون
يمكنك إنشاء الملايين من رموز الألوان باستخدام خدمتنا.
ألوان آمنة للمتصفح
يوجد أدناه جدول يضم 216 لونًا هي الأكثر أمانًا والأكثر استقلالية عن الكمبيوتر. تتراوح هذه الألوان في CSS من 000000 إلى الكود الست عشري FFFFFF. إنها آمنة للاستخدام لأنها تضمن أن جميع أجهزة الكمبيوتر تعرض الألوان بشكل صحيح عند العمل مع لوحة الألوان المكونة من 256 لونًا.
| جدول الألوان "الآمنة" في CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300 سي سي | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600سي سي | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |