Créer des ombres de boîte avec CSS

Introduction

Dans ce laboratoire, vous allez explorer la puissante propriété CSS box-shadow et apprendre à créer des effets d'ombres visuellement attrayants pour les éléments web. En adoptant une approche étape par étape, vous comprendrez la syntaxe fondamentale des ombres de boîte, appliquerez des techniques d'ombres de base et avancées, et découvrirez comment personnaliser les propriétés d'ombre pour améliorer la profondeur et l'intérêt visuel des éléments HTML.

Le laboratoire couvre des concepts clés tels que la compréhension de la syntaxe d'ombre de boîte, l'application d'ombres à différentes formes, l'expérimentation avec le décalage, le rayon de flou et les variations de couleur. À la fin de ce laboratoire, vous aurez des compétences pratiques pour créer des ombres de qualité professionnelle qui peuvent transformer la présentation visuelle des designs web, ajoutant une profondeur et une dimension subtile à vos interfaces utilisateur.

Comprendre la syntaxe d'ombre de boîte

Dans cette étape, vous allez apprendre la syntaxe fondamentale des ombres de boîte CSS et comment elles peuvent ajouter de la profondeur et de l'intérêt visuel aux éléments web. La propriété box-shadow est une fonction puissante de CSS qui vous permet de créer des effets d'ombre pour les éléments HTML.

Commençons par créer un nouveau fichier HTML pour explorer la syntaxe d'ombre de boîte. Ouvrez le WebIDE et créez un fichier nommé index.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Box Shadow Syntax</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        /* Syntaxe de base d'ombre de boîte */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Décortiquons la syntaxe d'ombre de boîte :

5px : Décalage horizontal (déplace l'ombre vers la droite)
5px : Décalage vertical (déplace l'ombre vers le bas)
10px : Rayon de flou (aplatit l'ombre)
rgba(0, 0, 0, 0.3) : Couleur de l'ombre avec transparence

La syntaxe de base est : box-shadow: [déplacement horizontal] [déplacement vertical] [rayon de flou] [couleur]

Exemple de sortie de la boîte affichée avec l'ombre :

+------------------------+
|                        |
|    [Boîte grise avec    |
|     Ombre douce]       |
|                        |
+------------------------+

Points clés à retenir :

Les valeurs de décalage positives déplacent l'ombre vers la droite et le bas
Les valeurs de décalage négatives déplacent l'ombre vers la gauche et le haut
Le rayon de flou aplatit les bords de l'ombre
Vous pouvez utiliser des noms de couleur, des valeurs hexadécimales, RGB ou RGBA

Appliquer une ombre de boîte de base à un div

Dans cette étape, vous allez apprendre à appliquer une ombre de boîte de base à un élément div, en vous appuyant sur la syntaxe que vous avez apprise dans l'étape précédente. Nous allons modifier le fichier HTML existant pour démontrer différents effets d'ombre.

Ouvrez le fichier index.html dans le WebIDE et mettez à jour son contenu avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Box Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
      }

      /* Ombre légère */
      .light-shadow {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      }

      /* Ombre plus foncée */
      .dark-shadow {
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box light-shadow"></div>
      <div class="box dark-shadow"></div>
    </div>
  </body>
</html>

Décortiquons l'application de l'ombre de boîte :

Nous avons créé deux éléments div avec des intensités d'ombre différentes
.light-shadow utilise une ombre subtile avec :
- Un décalage horizontal de 5px
- Un décalage vertical de 5px
- Un rayon de flou de 10px
- Une couleur noire légère avec une opacité de 20 %
.dark-shadow utilise une ombre plus prononcée avec :
- Un décalage horizontal de 10px
- Un décalage vertical de 10px
- Un rayon de flou de 15px
- Une couleur noire plus foncée avec une opacité de 50 %

Exemple de sortie visuelle :

+------------------------+------------------------+
|                        |                        |
|   [Boîte avec ombre légère]   |   [Boîte avec ombre plus foncée]    |
|                        |                        |
+------------------------+------------------------+

Observations clés :

Augmenter les valeurs de décalage déplace l'ombre plus loin de l'élément
Augmenter le rayon de flou rend l'ombre plus douce
Ajuster l'opacité change l'intensité de l'ombre

Personnaliser les propriétés d'ombre de boîte

Dans cette étape, vous allez explorer les options de personnalisation avancées pour les ombres de boîte, y compris les ombres insérées, le rayon d'étalement et les variations de couleur. Nous allons mettre à jour le fichier index.html pour démontrer ces propriétés avancées.

Ouvrez le fichier index.html dans le WebIDE et remplacez son contenu par le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personnalisées Box Shadows</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: #f0f0f0;
      }

      /* Ombre insérée */
      .inset-shadow {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
      }

      /* Rayon d'étalement */
      .spread-shadow {
        box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
      }

      /* Ombre colorée */
      .colored-shadow {
        box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box inset-shadow"></div>
      <div class="box spread-shadow"></div>
      <div class="box colored-shadow"></div>
    </div>
  </body>
</html>

Explorons les nouvelles personnalisations d'ombre de boîte :

Ombre insérée :
- Utilise le mot-clé inset pour créer une ombre interne
- Donne l'effet de l'élément étant appuyé ou en retrait
- Syntaxe : box-shadow: inset [déplacement horizontal] [déplacement vertical] [rayon de flou] [couleur]
Rayon d'étalement :
- Ajoute une valeur supplémentaire pour étendre l'ombre
- Quatrième valeur numérique contrôle l'étalement de l'ombre
- Dans l'exemple, un étalement de 10px crée une bordure d'ombre teintée de bleu
Ombre colorée :
- Utilise RGBA pour créer des ombres colorées avec transparence
- L'exemple utilise une ombre rouge avec une opacité de 40 %

Exemple de sortie visuelle :

+------------------------+------------------------+------------------------+
|                        |                        |                        |
| [Boîte avec ombre insérée]     | [Boîte avec ombre étalée]    | [Boîte avec ombre colorée]   |
|                        |                        |                        |
+------------------------+------------------------+------------------------+

Points clés :

inset crée une ombre interne
Le rayon d'étalement étend l'ombre
Utilisez RGBA pour les ombres colorées et transparentes

Créer un élément circulaire avec une ombre

Dans cette étape, vous allez apprendre à créer un élément circulaire avec une ombre de boîte en utilisant les propriétés CSS border-radius et box-shadow. Ouvrez le fichier index.html dans le WebIDE et mettez à jour son contenu avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Circular Element with Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }

      .circular-element {
        width: 200px;
        height: 200px;
        background-color: #ffffff;

        /* Créer une forme circulaire */
        border-radius: 50%;

        /* Ajouter une ombre de boîte */
        box-shadow:
          0 10px 20px rgba(0, 0, 0, 0.2),
          0 6px 6px rgba(0, 0, 0, 0.15);

        /* Centrer le contenu */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Optionnel : ajouter du texte */
        font-family: Arial, sans-serif;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circular-element">Circular Shadow</div>
    </div>
  </body>
</html>

Techniques clés pour créer un élément circulaire avec une ombre :

Forme circulaire :
- Utilisez border-radius: 50% pour créer un cercle parfait
- Assurez-vous que la largeur et la hauteur sont égales
Ombre de boîte :
- Première ombre : 0 10px 20px rgba(0, 0, 0, 0.2)
  - Décalage vertical de 10px
  - Rayon de flou de 20px
  - Couleur noire douce avec une opacité de 20 %
- Seconde ombre : 0 6px 6px rgba(0, 0, 0, 0.15)
  - Ajoute de la profondeur avec une ombre plus proche et plus douce

Exemple de sortie visuelle :

+------------------------+
|                        |
|    [Élément circulaire   |
|     avec Ombre Douce]  |
|                        |
+------------------------+

Points clés :

border-radius: 50% crée un cercle parfait
Plusieurs ombres de boîte peuvent créer de la profondeur
Ajustez l'opacité et le flou pour obtenir l'effet souhaité

Expérimenter avec plusieurs effets d'ombre

Dans cette étape, vous allez explorer des techniques avancées pour créer des effets d'ombre complexes en utilisant plusieurs ombres de boîte. Ouvrez le fichier index.html dans le WebIDE et mettez à jour son contenu avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Shadow Effects</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }

      .card {
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;

        /* Plusieurs effets d'ombre */
        box-shadow: 
                /* Ombre extérieure */
          0 10px 20px rgba(0, 0, 0, 0.1),
          /* Ombre intérieure */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
          /* Ombre d'accent colorée */ 0 15px 25px rgba(0, 123, 255, 0.2);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        transition: transform 0.3s ease;
      }

      .card:hover {
        transform: scale(1.05);
        box-shadow:
          0 15px 30px rgba(0, 0, 0, 0.2),
          inset 0 -5px 10px rgba(0, 0, 0, 0.1),
          0 20px 35px rgba(0, 123, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>Expérience d'ombre</h2>
      <p>Survolez pour voir l'effet d'ombre!</p>
    </div>
  </body>
</html>

Techniques clés pour plusieurs effets d'ombre :

Ombres superposées :
- Première ombre : Ombre extérieure douce
- Seconde ombre : Ombre intérieure subtile
- Troisième ombre : Ombre d'accent colorée
Composition d'ombre :
- 0 10px 20px rgba(0, 0, 0, 0.1) : Ombre extérieure douce
- inset 0 -5px 10px rgba(0, 0, 0, 0.05) : Ombre intérieure subtile
- 0 15px 25px rgba(0, 123, 255, 0.2) : Ombre d'accent bleue
Effet de survol :
- Augmenter l'intensité de l'ombre au survol
- Ajouter une transformation d'échelle pour une sensation interactive

Exemple de sortie visuelle :

+------------------------+
|                        |
|   [Carte avec des effets d'ombre complexes]   |
|                        |
+------------------------+

Points clés :

Combiner plusieurs ombres pour ajouter de la profondeur
Utiliser inset pour les ombres intérieures
Créer des effets interactifs avec le survol

Sommaire

Dans ce laboratoire, les participants explorent la puissante propriété CSS box-shadow pour créer une profondeur et une dimension visuellement attrayantes pour les éléments web. En apprenant la syntaxe fondamentale des ombres de boîte, les étudiants découvrent comment appliquer des effets d'ombre en utilisant les décalages horizontaux et verticaux, le rayon de flou et les paramètres de couleur, leur permettant d'améliorer la conception visuelle des éléments HTML.

Le laboratoire guide les apprenants à travers des exercices pratiques, y compris la création d'ombres de boîte de base, la personnalisation des propriétés d'ombre et l'expérimentation avec plusieurs effets d'ombre. Les participants acquerront une expérience pratique dans la manipulation des caractéristiques d'ombre telles que la direction de décalage, l'intensité de flou et la transparence de couleur, ce qui peut considérablement améliorer l'esthétique et la hiérarchie visuelle des composants de page web.