Comment créer des boucles de papier CSS3 sans images

Ce tutoriel montre la création d'un effet de boucle de papier CSS3 sans images. Les tutoriels précédents ont montré comment créer des bulles et des rubans de la parole en utilisant des pseudo-éléments de CSS3; Cela s'appuie sur cette technique. :before :after Un effet de boucle en papier est une illusion d'optique, généralement obtenue avec une ombre au fond de l'élément. Auparavant, ce logiciel d'édition d'image exigeait. CSS3 offre une alternative supérieure. Les avantages de l'utilisation de CSS3 incluent: la compatibilité du navigateur (elle dégrade gracieusement dans les navigateurs plus âgés), l'indépendance de l'arrière-plan, l'évolutivité, le code réutilisable et la personnalisation facile.

Tout d'abord, créez un élément HTML simple:

Ensuite, ajoutez l'ombrage intérieur et extérieur de base en utilisant

<div class="box">My box</div>

:

box-shadow

.box {
  position: relative;
  width: 500px;
  padding: 50px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

L'effet de boucle est créé avec deux pseudo-éléments

et

. Ce sont: :before :after

tourné et biaisé à l'aide de transformations CSS3.

1. positionné au bord inférieur.
2. étant donné un
.
3. box-shadow

Le réglage

place les pseudo-éléments derrière la boîte principale, ne rendant que les bords de l'ombre visibles:

z-index: -1

le CSS pour les pseudo-éléments:

Bien que cela utilise des préfixes de fournisseurs pour une prise en charge plus large du navigateur, il reste plus efficace qu'une solution basée sur l'image. L'effet fonctionne dans les navigateurs modernes; Les navigateurs plus âgés omettront simplement l'ombre. Une page de démonstration est disponible (lien omis car il n'est pas fourni dans l'entrée). Le CSS est intégré dans le HTML. IE6, 7 et 8 se dégradent gracieusement sans montrer les effets de l'ombre.

.box:before, .box:after {
  position: absolute;
  width: 40%;
  height: 10px;
  content: ' ';
  left: 12px;
  bottom: 12px;
  background: transparent;
  transform: skew(-5deg) rotate(-5deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

.box:after {
  left: auto;
  right: 12px;
  transform: skew(5deg) rotate(5deg);
}

Les questions fréquemment posées (FAQ) sur les boucles de papier CSS3 pures sont omises car elles sont déjà bien répondues dans le texte original.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!