LabEx
EntrerRejoindre

Création d'ombres dynamiques avec CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer des ombres dynamiques à l'aide de CSS. Vous allez apprendre à utiliser le pseudo-élément ::after et diverses propriétés CSS telles que background, filter, opacity et z-index pour créer un effet qui imite une ombre de boîte, mais qui est basé sur les couleurs de l'élément lui-même. À la fin de ce laboratoire, vous serez capable d'ajouter une couche supplémentaire de profondeur et de dimensionnalité à vos designs.

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 débutant avec un taux de réussite de 94%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Ombre dynamique

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer une ombre basée sur les couleurs d'un élément, suivez ces étapes :

  1. Utilisez le pseudo-élément ::after avec position: absolute et width et height définis sur 100% pour remplir l'espace disponible dans l'élément parent.

  2. Héritez du background de l'élément parent en utilisant background: inherit.

  3. Décalez légèrement le pseudo-élément en utilisant top. Ensuite, utilisez filter: blur() pour créer une ombre et définissez opacity pour la rendre semi-transparente.

  4. Positionnez le pseudo-élément derrière son parent en définissant z-index: -1. Définissez z-index: 1 sur l'élément parent.

Voici un exemple de code HTML et CSS :

<div class="dynamic-shadow"></div>

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Ombre dynamique. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.