Créez des fonds en damier époustouflants avec CSS

Introduction

Dans ce laboratoire (lab), nous allons explorer la programmation CSS pour créer un motif de fond en damier. Vous apprendrez à utiliser les techniques de dégradé CSS pour concevoir un motif de damier visuellement attrayant qui peut améliorer divers projets web. Le motif de damier est un élément de conception classique composé de carrés de couleurs alternées disposés en grille, similaire à un échiquier.

En terminant ce laboratoire (lab), vous aurez une expérience pratique des arrière-plans CSS, des dégradés et de la création de motifs - des compétences précieuses pour la conception web moderne.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau intermédiaire avec un taux de réussite de 80%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Comprendre les fichiers du projet

Avant de commencer à créer notre motif de damier, examinons les fichiers du projet fournis dans la machine virtuelle (VM).

Ouvrez le fichier index.html dans l'éditeur en cliquant dessus dans le panneau de l'explorateur de fichiers.

Le fichier HTML initial devrait ressembler à ceci :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Vous ajouterez votre code ici -->
  </body>
</html>

Ouvrez maintenant le fichier style.css dans l'éditeur.

Le fichier CSS initial devrait être vide ou contenir des styles minimaux :

/* CSS styles will be added here */

Démarrons notre serveur de développement pour voir l'état initial de notre page web.

Pour afficher votre page web dans le navigateur, cliquez sur le bouton "Go Live" dans le coin inférieur droit de l'éditeur. Cela démarrera un serveur en direct et affichera votre page web dans l'onglet Web 8080.

Vous devriez voir une page blanche à ce stade, car nous n'avons pas encore ajouté de contenu ou de styles.

Créer la structure HTML

Maintenant que nous comprenons les fichiers de notre projet, créons la structure HTML pour notre motif de damier.

Ouvrez à nouveau le fichier index.html dans l'éditeur.
Nous devons ajouter un élément conteneur pour notre motif de damier. À l'intérieur de la balise <body>, remplacez le commentaire par un élément <div> qui a une classe "checkerboard" :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

Enregistrez le fichier index.html en appuyant sur Ctrl+S ou en cliquant sur Fichier > Enregistrer.
Maintenant, ajoutons quelques règles CSS de base pour définir les dimensions de notre damier. Ouvrez le fichier style.css et ajoutez le code suivant :

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

Ce code CSS effectue les opérations suivantes :

Définit la largeur et la hauteur de notre damier à 240 pixels
Définit la couleur de fond sur blanc (#fff)

Enregistrez le fichier style.css.
Actualisez l'onglet Web 8080 pour voir les modifications.

Vous devriez maintenant voir un carré blanc de 240 pixels de largeur et de hauteur. Ce sera la toile de fond pour notre motif de damier.

Créer le premier dégradé

Maintenant, nous allons commencer à créer notre motif de damier en utilisant des dégradés CSS. Ajoutons le premier dégradé linéaire pour créer une partie du motif.

Comprendre les dégradés linéaires CSS

Les dégradés linéaires CSS vous permettent de créer des transitions fluides entre deux couleurs ou plus sur une ligne droite. La fonction linear-gradient() prend un angle et une série de points de couleur (color stops) en tant que paramètres. Nous utiliserons cette technique pour créer les carrés de notre damier.

Suivez ces étapes :

Ouvrez le fichier style.css.
Modifions notre classe .checkerboard pour inclure le premier dégradé linéaire :

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
    45deg,
    #000 25%,
    transparent 25%,
    transparent 75%,
    #000 75%,
    #000
  );
  background-size: 60px 60px;
}

Permettez - moi d'expliquer ce que ce dégradé fait :

45deg spécifie l'angle du dégradé
#000 25% crée une couleur noire de 0 % à 25 % de l'espace disponible
transparent 25% crée une couleur transparente à partir de 25 %
transparent 75% maintient la couleur transparente jusqu'à 75 %
#000 75% repasse à la couleur noire à 75 % et continue jusqu'à la fin
background-size: 60px 60px définit la taille de chaque cellule de dégradé répétée

Enregistrez le fichier style.css.
Actualisez l'onglet Web 8080 pour voir les modifications.

Vous devriez maintenant voir un motif commencer à se former, mais ce n'est pas encore un damier complet. Le premier dégradé crée seulement une partie du motif. Dans l'étape suivante, nous ajouterons un deuxième dégradé pour compléter le damier.

Compléter le motif de damier

Maintenant, ajoutons le deuxième dégradé linéaire pour compléter notre motif de damier et le rendre répétable sur tout l'élément.

Ouvrez à nouveau le fichier style.css.
Modifiez la classe .checkerboard pour inclure un deuxième dégradé linéaire qui créera le motif alterné :

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    ),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

Ce que nous avons ajouté :

Un deuxième linear-gradient() similaire au premier, mais avec un angle de -45deg pour créer le motif alterné
La propriété background-repeat: repeat garantit que les motifs se répètent sur tout l'élément

La combinaison de ces deux dégradés à des angles différents crée le motif de damier classique. Le premier dégradé crée un ensemble de carrés diagonaux, tandis que le deuxième dégradé crée un autre ensemble qui comble les espaces vides.

Enregistrez le fichier style.css.
Actualisez l'onglet Web 8080 pour voir le résultat final.

Vous devriez maintenant voir un motif de damier complet avec des carrés noirs et blancs alternés. Le motif devrait se répéter sur tout l'élément de 240 pixels de largeur et de hauteur.

Fonctionnement du motif

L'effet de damier est créé par :

L'utilisation de deux dégradés linéaires avec des angles opposés (45deg et -45deg)
Chaque dégradé crée un motif de carrés noirs dans les coins
Les zones transparentes laissent apparaître le fond blanc
La propriété background-size contrôle la taille de chaque carré dans le motif
La propriété background-repeat fait répéter le motif sur tout l'élément

Cette technique démontre la puissance des dégradés CSS pour créer des motifs complexes sans avoir besoin de fichiers d'images, ce qui entraîne des temps de chargement plus rapides et une meilleure évolutivité.

Résumé

Félicitations pour avoir terminé le laboratoire (lab) sur le motif de fond en damier. Dans ce laboratoire, vous avez :

Créé une structure HTML pour héberger votre motif de damier
Appris à utiliser les dégradés linéaires CSS pour créer des motifs
Combiné plusieurs dégradés à des angles différents pour créer un effet de damier
Appliqué des propriétés de dimensionnement et de répétition pour perfectionner le motif

Ce motif de damier démontre une technique CSS puissante qui peut être appliquée à de nombreux projets de conception web. L'approche que vous avez apprise - utiliser des dégradés au lieu d'images - entraîne des temps de chargement plus rapides et une meilleure évolutivité pour vos pages web.

Vous pouvez maintenant utiliser ces connaissances pour créer d'autres motifs et effets visuels en utilisant les dégradés CSS. Vous pouvez envisager d'expérimenter avec :