CSS

Part 7 الألوان والتدرجات في CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 148 4 دقائق

الألوان والتدرجات في CSS

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

1. تحديد الألوان باستخدام CSS

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

1.1 الألوان باستخدام `hex`

hex هو اختصار لـ hexadecimal، وهو تنسيق يستخدم الأرقام والحروف (من 0 إلى 9 ومن A إلى F) لتمثيل الألوان.
تنسيق hex يتكون من 6 خانات، حيث تكون أول خانتين للون الأحمر، الخانتين التاليتين للون الأخضر، وآخر خانتين للون الأزرق.

مثال

body {
    background-color: #3498db;  /* لون أزرق */
}

الشرح:

#3498db هو اللون الأزرق باستخدام hex. الرقم 34 هو الأحمر، 98 هو الأخضر، وdb هو الأزرق.

1.2 الألوان باستخدام `rgb`

rgb تعني Red, Green, Blue، وهي طريقة لتحديد الألوان باستخدام القيم الرقمية من 0 إلى 255، حيث يمثل كل لون قيمة بين 0 و 255.

مثال

body {
    background-color: rgb(52, 152, 219);  /* نفس اللون الأزرق */
}

الشرح:

في هذا المثال، تم تحديد اللون الأزرق باستخدام rgb حيث 52 هو قيمة اللون الأحمر، 152 هو قيمة اللون الأخضر، و 219 هو قيمة اللون الأزرق.

1.3 الألوان باستخدام `rgba`

rgba هي امتداد لـ rgb، حيث يتم إضافة قيمة alpha التي تحدد شفافية اللون (من 0 إلى 1، حيث 0 يعني شفافًا تمامًا و 1 يعني غير شفاف تمامًا).

مثال

body {
    background-color: rgba(52, 152, 219, 0.5);  /* نفس اللون الأزرق مع شفافية 50% */
}

الشرح:

rgba(52, 152, 219, 0.5) يمثل نفس اللون الأزرق مع شفافية 50% (أي أن اللون سيظهر نصف شفاف).

1.4 الألوان باستخدام `hsl`

hsl تعني Hue (اللون)، Saturation (التشبع)، Lightness (الإضاءة).
- Hue (اللون): زاوية على دائرة الألوان (من 0 إلى 360 درجة).
- Saturation (التشبع): يشير إلى قوة اللون (من 0% إلى 100%).
- Lightness (الإضاءة): يشير إلى مدى الضوء أو الظلام (من 0% إلى 100%).

مثال

body {
    background-color: hsl(204, 70%, 53%);  /* نفس اللون الأزرق */
}

الشرح:

hsl(204, 70%, 53%) يمثل اللون الأزرق (الزاوية 204 درجة على دائرة الألوان)، مع تشبع 70% وإضاءة 53%.

1.5 الألوان باستخدام `hsla`

hsla هي نفس طريقة hsl ولكن مع إضافة قيمة alpha لتحديد الشفافية.

مثال

body {
    background-color: hsla(204, 70%, 53%, 0.5);  /* نفس اللون الأزرق مع شفافية 50% */
}

الشرح:

hsla(204, 70%, 53%, 0.5) هو نفس اللون الأزرق باستخدام hsl مع شفافية 50%.

2. التدرجات (Gradients) في CSS

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

2.1 التدرج الخطي (Linear Gradient)

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

مثال

body {
    background: linear-gradient(to right, #ff7e5f, #feb47b);  /* تدرج من الوردي إلى البرتقالي */
}

الشرح:

linear-gradient(to right, #ff7e5f, #feb47b) يحدد تدرجًا لونيًا يبدأ من اللون الوردي (#ff7e5f) وينتقل تدريجيًا إلى اللون البرتقالي (#feb47b)، باتجاه من اليسار إلى اليمين.

2.2 التدرج الدائري (Radial Gradient)

التدرج الدائري يتم من مركز العنصر إلى الأطراف.
يمكن تحديد الألوان وكذلك نوع التدرج (دوائر متساوية أو غير متساوية).

مثال

body {
    background: radial-gradient(circle, #ff7e5f, #feb47b);  /* تدرج دائري من الوردي إلى البرتقالي */
}

الشرح:

radial-gradient(circle, #ff7e5f, #feb47b) يحدد تدرجًا لونيًا دائريًا يبدأ من المركز باللون الوردي (#ff7e5f) وينتقل تدريجيًا إلى اللون البرتقالي (#feb47b).

2.3 التدرج مع أكثر من لون

يمكنك إضافة أكثر من لون واحد في التدرج لإنشاء تأثيرات معقدة ومتنوعة.

مثال

body {
    background: linear-gradient(to right, #ff7e5f, #feb47b, #6a11cb);
}

الشرح:

linear-gradient(to right, #ff7e5f, #feb47b, #6a11cb) يحدد تدرجًا لونيًا يحتوي على 3 ألوان: يبدأ من الوردي، ثم البرتقالي، وأخيرًا البنفسجي.

كود مثال كامل:

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على الألوان والتدرجات</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="color-box">لون باستخدام HEX</div>
    <div class="color-box-rgb">لون باستخدام RGB</div>
    <div class="color-box-rgba">لون باستخدام RGBA</div>
    <div class="color-box-hsl">لون باستخدام HSL</div>
    <div class="gradient-box">تدرج لوني خطي</div>
    <div class="gradient-box-radial">تدرج لوني دائري</div>

</body>
</html>

CSS (styles.css):

/* اللون باستخدام HEX */
.color-box {
    width: 200px;
    height: 100px;
    background-color: #3498db;  /* الأزرق باستخدام HEX */
    color: white;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}

/* اللون باستخدام RGB */
.color-box-rgb {
    width: 200px;
    height: 100px;
    background-color: rgb(52, 152, 219);  /* الأزرق باستخدام RGB */
    color: white;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}

/* اللون باستخدام RGBA */
.color-box-rgba {
    width: 200px;
    height: 100px;
    background-color: rgba(52, 152, 219, 0.5);  /* الأزرق باستخدام RGBA */
    color: white;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}

/* اللون باستخدام HSL */
.color-box-hsl {
    width: 200px;
    height: 100px;
    background-color: hsl(204, 70%, 53%);  /* الأزرق باستخدام HSL */
    color: white;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}

/* تدرج لوني خطي */
.gradient-box {
    width: 100%;
    height: 200px;
    background: linear-gradient(to right, #ff7e5f, #feb47b);  /* تدرج لوني خطي */
    text-align: center;
    line-height: 200px;
    color: white;
}

/* تدرج لوني دائري */
.gradient-box-radial {
    width: 100%;
    height: 200px;
    background: radial-gradient(circle, #ff7e5f, #feb47b);  /* تدرج لوني دائري */
    text-align: center;
    line-height: 200px;
    color: white;
}

الشرح:

الألوان:
- color-box: يعرض لون أزرق باستخدام hex (#3498db).
- color-box-rgb: يعرض نفس اللون الأزرق باستخدام rgb(52, 152, 219).
- color-box-rgba: نفس اللون الأزرق مع شفافية 50% باستخدام rgba(52, 152, 219, 0.5).
- color-box-hsl: نفس اللون الأزرق باستخدام hsl(204, 70%, 53%).
التدرجات:
- gradient-box: يعرض تدرجًا لونيًا خطيًا من الوردي إلى البرتقالي.
- gradient-box-radial: يعرض تدرجًا لونيًا دائريًا من الوردي إلى البرتقالي.