Leçon 3 : Couleurs et arrière-plans en CSS

Dans cette conférence, nous explorerons comment utiliser les couleurs et les arrière-plans pour rendre votre site Web visuellement attrayant. Comprendre comment appliquer efficacement les couleurs et les arrière-plans est essentiel pour créer des conceptions Web attrayantes et esthétiques.

Utiliser les couleurs en CSS

CSS vous permet de spécifier les couleurs de plusieurs manières, notamment en utilisant des noms de couleurs, des valeurs hexadécimales, RVB, RGBA, HSL et HSLA.

1. Noms des couleurs

CSS fournit une large gamme de noms de couleurs prédéfinis.

• Exemple:

  h1 {
    color: red;
  }

Cela définira la couleur du texte de tous les éléments

sur rouge.

2. Couleurs hexadécimales

Les codes hexadécimaux sont une combinaison à six chiffres de chiffres et de lettres définis par leur mélange de valeurs rouge, verte et bleue (RVB).

• Exemple:

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

3. RVB et RVBA

RVB signifie Rouge, Vert et Bleu. RGBA ajoute un canal Alpha pour l'opacité.

• Exemple (RVB) :

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

• Exemple (RGBA) :

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

4. HSL et HSLA

HSL signifie Teinte, Saturation et Légèreté. HSLA comprend un canal Alpha.

• Exemple (HSL) :

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

• Exemple (HSLA) :

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

Application d'arrière-plans

Les arrière-plans en CSS peuvent améliorer la conception en ajoutant de la couleur, des images, des dégradés et bien plus encore aux éléments.

1. Couleur d'arrière-plan

Vous pouvez définir la couleur d'arrière-plan de n'importe quel élément HTML à l'aide de la propriété background-color.

• Exemple:

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

2. Images d'arrière-plan

CSS vous permet d'utiliser des images comme arrière-plans.

• Exemple:

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

Cela définira une image d'arrière-plan sur un élément avec la bannière de classe. L'image couvrira toute la zone et sera centrée.

3. Répétition en arrière-plan

Contrôlez si une image d'arrière-plan se répète horizontalement, verticalement ou pas du tout.

• Exemple:

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

4. Position d'arrière-plan

Vous pouvez contrôler la position de départ de l'image d'arrière-plan.

• Exemple:

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

5. Dégradé d'arrière-plan

Les dégradés vous permettent de créer des transitions douces entre deux couleurs ou plus.

• Exemple (dégradé linéaire) :

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

• Exemple (dégradé radial) :

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

Exemple pratique :

Mettons ces concepts en pratique avec un exemple qui utilise des couleurs, une image d'arrière-plan et un dégradé.

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;
}

Dans cet exemple :

• Le corps a une couleur de fond gris clair.
• Le texte

  est bleu foncé.

• Le div .content a une image d'arrière-plan avec une superposition de dégradé sombre, faisant ressortir le texte blanc.
• Le texte

  est d'une teinte claire pour compléter l'arrière-plan.

Exercice pratique

1. Créez une page Web comprenant des titres, des paragraphes et des div.
2. Expérimentez avec différents formats de couleurs (hex, RVB, HSL) pour styliser le texte et les arrière-plans.
3. Appliquez une image d'arrière-plan à une section et jouez avec ses propriétés de position, de taille et de répétition.
4. Créez une section avec un arrière-plan dégradé linéaire ou radial.

Prochaine étape : Dans la prochaine conférence, nous aborderons la Typographie et style de police en CSS, où vous apprendrez à choisir et à personnaliser les polices pour améliorer la lisibilité de votre site Web. et faire appel. À bientôt !