التعامل مع الألوان والتدرجات في CSS: دليل المبتدئين

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

أسماء الألوان في CSS (Color names in CSS)

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

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

قيم الألوان السداسية في CSS (HEX color values in CSS)

قيم الألوان السداسية، المعروفة أيضًا بقيم Hex، هي واحدة من الطرق الأكثر شيوعًا لتحديد الألوان في CSS. تتألف القيم السداسية من ستة أحرف أو أرقام تتراوح بين 0 و F، والتي تمثل الألوان الأحمر والأخضر والأزرق (RGB).

للمثال، إذا أردت تحديد اللون الأحمر، يمكنك استخدام القيمة السداسية #FF0000. في هذا السياق، تعبر الأحرف الأولى الاثنتين (FF) عن اللون الأحمر، والأحرف الوسطى الاثنتين (00) عن اللون الأخضر، والأحرف الأخيرتين (00) عن اللون الأزرق.

وبالمثل، القيمة السداسية #0000FF تمثل اللون الأزرق. في هذا السياق، الأحرف الأولى الاثنتين (00) تعبر عن اللون الأحمر، والأحرف الوسطى الاثنتين (00) تعبر عن اللون الأخضر، والأحرف الأخيرتين (FF) تعبر عن اللون الأزرق.

قيم الألوان RGBA في CSS (RGBA color values in CSS)

قيم RGBA في CSS تسمح لك بتحديد الألوان باستخدام القيم العشرية للألوان الأحمر والأخضر والأزرق (RGB)، بالإضافة إلى مستوى الشفافية (A للألفا). يمكن تحديد كل من الألوان الأحمر والأخضر والأزرق باستخدام قيم تتراوح من 0 إلى 255، في حين يمكن تحديد الشفافية باستخدام قيمة تتراوح بين 0 (شفاف تماما) و1 (غير شفاف تماما).

للمثال، إذا أردت تحديد لون أحمر شبه شفاف، يمكنك استخدام القيمة RGBA التالية: rgba(255, 0, 0, 0.5). في هذا السياق، الرقم الأول (255) يمثل اللون الأحمر، والرقم الثاني (0) يمثل اللون الأخضر، والرقم الثالث (0) يمثل اللون الأزرق، والرقم الرابع (0.5) يمثل مستوى الشفافية.

قيم الألوان HSLA في CSS (HSLA color values in CSS)

إلى جانب القيم السداسية وRGBA، تقدم CSS أيضًا خيار استخدام القيم HSLA لتحديد الألوان. تتألف القيم HSLA من أربعة أجزاء: الصبغة (Hue)، والتشبع (Saturation)، والإضاءة (Lightness)، والألفا (Alpha).

الصبغة (Hue): تحدد اللون، وتتراوح قيمتها من 0 إلى 360 درجة.
التشبع (Saturation): يحدد مدى قوة اللون، ويتم تحديده كنسبة مئوية.
الإضاءة (Lightness): تحدد مدى سطوع اللون، وتحدد أيضاً كنسبة مئوية.
الألفا (Alpha): تحدد مستوى الشفافية، وتتراوح قيمتها من 0 (شفاف تمامًا) إلى 1 (غير شفاف تمامًا).
للمثال، إذا أردت تحديد لون أحمر شبه شفاف باستخدام HSLA، يمكنك استخدام القيمة التالية: hsla(0, 100%, 50%, 0.5). في هذا السياق، الرقم الأول (0) يمثل الصبغة، والرقم الثاني (100%) يمثل التشبع، والرقم الثالث (50%) يمثل الإضاءة، والرقم الرابع (0.5) يمثل مستوى الشفافية.

وظيفة التدرج الخطي في CSS (CSS linear-gradient function)

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

للمثال، إذا أردت خلق تدرج خطي يبدأ باللون الأحمر وينتهي باللون الأزرق، يمكنك استخدام الكود التالي:

background-image: linear-gradient(red, blue);

في هذا السياق، يبدأ التدرج باللون الأحمر وينتهي باللون الأزرق.

وظيفة التدرج الشعاعي في CSS (CSS radial-gradient function)

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

للمثال، إذا أردت خلق تدرج شعاعي يبدأ باللون الأبيض في المركز وينتهي باللون الأزرق في الحواف، يمكنك استخدام الكود التالي:

background-image: radial-gradient(circle, white, blue);

في هذا السياق، يبدأ التدرج باللون الأبيض في المركز وينتهي باللون الأزرق في الحواف.

وظيفة التدرج الحلزوني في CSS (CSS conic-gradient function)

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

للمثال، إذا أردت خلق تدرج حلزوني يبدأ باللون الأحمر وينتهي باللون الأزرق، يمكنك استخدام الكود التالي:

background-image: conic-gradient(red, blue);

في هذا السياق، يبدأ التدرج باللون الأحمر وينتهي باللون الأزرق.

وظيفة التدرج الخطي المتكرر في CSS (CSS repeating-linear-gradient function)

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

للمثال، إذا أردت خلق تدرج خطي يتكرر ويبدأ باللون الأحمر وينتهي باللون الأزرق، يمكنك استخدام الكود التالي:

background-image: repeating-linear-gradient(red, blue);

في هذا السياق، يبدأ التدرج باللون الأحمر وينتهي باللون الأزرق، ويتكرر هذا التدرج عبر العنصر.

وظيفة التدرج الشعاعي المتكرر في CSS (CSS repeating-radial-gradient function)

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

للمثال، إذا أردت خلق تدرج شعاعي يتكرر ويبدأ باللون الأبيض في المركز وينتهي باللون الأزرق في الحواف، يمكنك استخدام الكود التالي:

background-image: repeating-radial-gradient(circle, white, blue);

في هذا السياق، يبدأ التدرج باللون الأبيض في المركز وينتهي باللون الأزرق في الحواف، ويتكرر هذا التدرج عبر العنصر.

وظيفة التدرج الخطي في CSS (CSS linear-gradient function) – مراجعة

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

للتذكير، إذا أردت خلق تدرج خطي يبدأ باللون الأحمر وينتهي باللون الأزرق، يمكنك استخدام الكود التالي:

background-image: linear-gradient(red, blue);

في هذا السياق، يبدأ التدرج باللون الأحمر وينتهي باللون الأزرق.

قيم الألوان السداسية في CSS (HEX color values in CSS) – مراجعة

كما ذكرنا سابقاً، قيم الألوان السداسية تعتبر من أكثر الطرق شيوعاً لتحديد الألوان في CSS. تتكون هذه القيم من ستة أرقام و/أو حروف وتعرف بواسطة علامة #.

للتذكير، إذا أردت استخدام اللون الأحمر، يمكنك استخدام القيمة السداسية التالية:

color: #FF0000;

في هذا السياق، تم تحديد اللون بالقيمة السداسية #FF0000، والتي تمثل اللون الأحمر.

الخاتمة

في هذه التدوينة، تعرفنا على أساسيات الألوان والتدرجات في CSS. تعلمنا كيفية استخدام أسماء الألوان، وقيم الألوان السداسية، وقيم الألوان RGBA، وقيم الألوان HSLA. بالإضافة إلى ذلك، استكشفنا كيفية استخدام الدوال المختلفة للتدرجات في CSS.

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

الأسئلة الشائعة (FAQ)