المحاضرة الثالثة: الألوان والخلفيات في CSS

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

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

يتيح لك CSS تحديد الألوان بعدة طرق، بما في ذلك استخدام أسماء الألوان والقيم السداسية العشرية وRGB وRGBA وHSL وHSLA.

1. أسماء الألوان

يوفر CSS نطاقًا واسعًا من أسماء الألوان المحددة مسبقًا.

• مثال:

  h1 {
    color: red;
  }

سيؤدي هذا إلى تعيين لون النص لجميع عناصر

إلى اللون الأحمر.

2. الألوان السداسية العشرية

الرموز السداسية هي مجموعة مكونة من ستة أرقام من الأرقام والحروف المحددة من خلال مزيج من قيم الأحمر والأخضر والأزرق (RGB).

• مثال:

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB وRGBA

يرمز RGB إلى الأحمر والأخضر والأزرق. يضيف RGBA قناة ألفا للتعتيم.

• مثال (RGB):

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• مثال (RGBA):

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL وHSLA

يرمز HSL إلى اللون والتشبع والخفة. يتضمن HSLA قناة ألفا.

• مثال (HSL):

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• مثال (HSLA):

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

تطبيق الخلفيات

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

1. لون الخلفية

يمكنك ضبط لون الخلفية لأي عنصر HTML باستخدام خاصية لون الخلفية.

• مثال:

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2. صور الخلفية

يتيح لك CSS استخدام الصور كخلفيات.

• مثال:

  .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }

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

3. تكرار الخلفية

التحكم فيما إذا كانت صورة الخلفية تتكرر أفقيًا أو رأسيًا أو لا تتكرر على الإطلاق.

• مثال:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4. موضع الخلفية

يمكنك التحكم في موضع البداية لصورة الخلفية.

• مثال:

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5. تدرج الخلفية

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

• مثال (التدرج الخطي):

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• مثال (التدرج الشعاعي):

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

مثال عملي:

دعونا نضع هذه المفاهيم موضع التنفيذ بمثال يستخدم الألوان وصورة الخلفية والتدرج.

HTML:

  
Welcome to My Website
  
This is a simple example of using colors and backgrounds in CSS.

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

في هذا المثال:

• لون خلفية الجسم رمادي فاتح.
• النص

  باللون الأزرق الداكن.

• يحتوي div.content على صورة خلفية ذات تراكب متدرج داكن، مما يجعل النص الأبيض بارزًا.
• النص

  عبارة عن ظل فاتح لاستكمال الخلفية.

التمرين العملي

1. إنشاء صفحة ويب تتضمن العناوين والفقرات والأقسام.
2. جرّب تنسيقات الألوان المختلفة (ست عشرية، RGB، HSL) لتصميم النص والخلفيات.
3. تطبيق صورة خلفية على القسم والتلاعب بموضعها وحجمها وخصائص التكرار.
4. إنشاء قسم بخلفية متدرجة خطية أو شعاعية.

التالي: في المحاضرة القادمة، سنغطي الطباعة وتصميم الخطوط في CSS، حيث ستتعلم كيفية اختيار الخطوط وتخصيصها لتحسين إمكانية قراءة موقع الويب الخاص بك والاستئناف. نراكم هناك!