أساسيات CSS: العمل مع الألوان

هناك العديد من العوامل التي يجب مراعاتها عند تصميم موقع ويب ؛ الخط وتدفق UX وغير ذلك الكثير. أحد عناصر التصميم المهمة للغاية هو اللون. حتى القرارات البسيطة مثل لون العلامة التجارية ولون الحدود ولون الخلفية تقدم تأثيرًا واضحًا وملحوظًا.

في هذه المقالة ، سنغطي أساسيات ألوان CSS ونتعلم كيفية تحويل موقع HTML إلى موقع ويب لا تشوبه شائبة.

الشروع في استخدام ألوان CSS

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

استخدام أسماء الألوان ككلمات رئيسية

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

/*Syntax*/
لون احمر؛
اللون: قرمزي.
اللون: سلاتيبلو.

استخدام قيم RGB

أثناء تصميم موقع ويب أو تطبيق ، فإن نظام الألوان يهم كثيرًا - بالتأكيد لا ينبغي أن يكون آخر شيء تفكر فيه. في CSS ، يمكنك استخدام ثلاث طرق لتمثيل لون RGB. هذه هي تدوين السلسلة السداسية العشرية ، والتدوين الوظيفي RGB ، والتدوين الوظيفي HSL. فيما يلي نظرة فاحصة على كل منهم.

تدوين سلسلة سداسية عشرية

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

# هههههههه

إنها الطريقة الأكثر شيوعًا لوصف اللون الرقمي. إنه لون معتم بالكامل مع مكونات حمراء وخضراء وزرقاء مثل 0xrr, 0xgg، و 0xbb على التوالى.

# عيوني

إنه يتبع معايير RGB الموضحة أعلاه بقناة ألفا تتعامل مع رقة اللون. انخفاض 0xaa القيمة ، كلما أصبح اللون أكثر شفافية.

#rgb

إذا كان لديك لون #556677، يمكنك ببساطة كتابتها بتنسيق #567 لأنه يمثل 0xrr, 0xgg، و 0xbb على التوالى. على سبيل المثال، #000 (أو #000000) أسود بينما #fff (أو #ffffff) هو ابيض.

# ارغبا

يتبع المعايير المذكورة أعلاه بقناة ألفا محددة بواسطة 0xaa للتحكم في التعتيم.

تدوين RGB الوظيفي

يمثل التدوين الوظيفي RGB الألوان باستخدام مكونات الأحمر والأخضر والأزرق. يتم تعريفه باستخدام rgb () وظيفة الذي يقبل معلمات الإدخال في شكل مكونات أساسية باللون الأحمر والأخضر والأزرق (وقناة ألفا اختيارية). يجب أن تكون قيم الأحمر والأخضر والأزرق عددًا صحيحًا بين 0 إلى 255 (شامل) ، أو نسبة تتراوح من 0٪ إلى 100٪. من ناحية أخرى ، تقبل قناة ألفا قيمًا من 0.0 (شفافة تمامًا) إلى 1.0 (معتم تمامًا). كما أنه يقبل قيمة النسبة المئوية من 0٪ (مثل 0.0) و 100٪ (مثل 1.0).

/*Syntax*/
اللون: rgb (rr ، gg ، bb) ؛
اللون: rgba (rr ، gg ، bb ، a) ؛

التدوين الوظيفي HSL

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

يتم تحديد قيمة الصبغة (H) بواسطة وحدة الزاوية المدعومة في CSS. ويشمل درجة, راد, غراد، و منعطف أو دور. يحدد Saturation (S) النسبة المئوية للون النهائي المكون من تدرج اللون. يحدد مكون اللمعان (L) المستوى الرمادي.

/*Syntax*/
اللون: hsl (XXdeg ، XX٪ ، XX٪) ؛
اللون: hsl (XXturn ، XX٪ ، XX٪) ؛

تطبيق الألوان على عناصر HTML

في CSS ، يعد ملف اللون تحدد الخاصية لون المقدمة للمحتوى ، و لون الخلفية يحدد لون الخلفية للمحتوى المنظم بواسطة HTML. عندما يتم تجسيد عنصر ، يمكنك استخدام خصائص اللون لتصميمه.

خاصية اللون للنصوص

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

خاصية اللون للمربعات

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

خاصية اللون للحدود

يمكن أن يكون لأي عنصر HTML حد. يمكنك ضبط ملف لون الحدود الملكية مثل لون أعلى الحدود, لون يمين الحدود, لون الحد السفلي، و لون الحدود اليسرى لتعيين لون حدود الجوانب المقابلة. ومع ذلك ، يعد استخدام خاصية الاختزال ممارسة جيدة.

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

الختام: اللون وإمكانية الوصول

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

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

كيفية استخدام نظرية الألوان للارتقاء بمشاريعك الإبداعية

باستخدام الألوان المناسبة بالطريقة الصحيحة ، يمكنك نقل مشاريعك الإبداعية إلى مستوى جديد تمامًا.

اقرأ التالي

نبذة عن الكاتب