Maison > Article > interface Web > Comment créer l'illusion d'empilement d'images en utilisant HTML et CSS ?

Comment créer l'illusion d'empilement d'images en utilisant HTML et CSS ?

WBOYavant: 2023-09-16 14:05:081174parcourir

Comment créer lillusion dempilement dimages en utilisant HTML et CSS ?

Les illusions d'optique sont très fascinantes lorsqu'il s'agit de développement Web. L'utilisation d'illusions d'optique sur notre site Web engage les utilisateurs car cela joue avec leur esprit. Cela incite notre cerveau à croire à quelque chose qui n’existe pas réellement. Ces illusions peuvent être créées à l'aide de diverses techniques en CSS. L’une des illusions les plus couramment utilisées est l’illusion de la pile d’images, qui est simplement une illusion de profondeur. Dans cet article, nous aborderons les étapes impliquées dans la création d’une illusion de pile d’images en utilisant uniquement HTML et CSS. Commençons.

Qu'est-ce que l'illusion de la pile d'images ?

L'illusion d'empilement d'images est une illusion visuelle créée en empilant ensemble plusieurs images avec une transparence variable. Lorsque vous le regardez sous un certain angle, toutes les images se fondent les unes dans les autres et créent l'illusion d'une image tridimensionnelle.

Cet effet a été préalablement réalisé à l'aide de Photoshop. Cependant, nous pouvons désormais en créer un simplement en utilisant HTML et CSS.

Étapes à suivre

Créez un élément div qui contient l'image. Ce sera la surface de la première pile.
Stylisez l'élément img en utilisant les propriétés border et box-shadow.
Spécifiez les dimensions des éléments div (class="stack1"). Conserver la position de l'élément div relative pour que la position des pseudo-éléments à venir (:before et :after éléments) reste relative à l'élément div et non relative à car on gardera la position de ces pseudo -elements est une position absolue. Faites flotter l'élément div vers la gauche. Ajoutez des marges et un remplissage pour une meilleure apparence.
Ajoutez le premier pseudo-élément de la pile en utilisant l'attribut ":before". N'y ajoutez pas de contenu. Précisez ses dimensions et donnez-lui un positionnement absolu. Stylisez-le en utilisant la couleur d’arrière-plan, l’ombre de la boîte et les propriétés de bordure.
Gardez le z-index des pseudo-éléments à -1. Donnez des valeurs différentes en haut et à gauche pour lui donner une position différente et créer une illusion différente. Vous pouvez également faire pivoter les pseudo-éléments pour voir différents effets.
Créez un deuxième pseudo-élément en utilisant l'attribut ":after". Son style est similaire au premier pseudo-élément. Modifiez simplement les valeurs du haut, de la gauche et de la transformation pour créer l'illusion d'optique. Ceci complète votre première pile.
De même, vous pouvez créer autant de piles que vous le souhaitez dans une page Web. Ici, nous avons créé 2 piles sur une seule page.

Exemple

Dans cet exemple, nous avons créé un tas d'images. Pour la pile, nous laissons le top, left et transformons les valeurs comme -15px, -15px et rotate(-10deg). >:before pseudo-éléments, tandis que 5px, 0 et rotate(10deg) sont :after pseudo-éléments. Donnez à chaque pseudo-élément une couleur d’arrière-plan différente pour un plus grand impact.

<html>
<head>
   <style>
      * {
         margin: 0;
         padding: 0;
      }
      body {
         background-color: #B9C8BC;
      }
      img {
         height: 253px;
         width: 262px;
         border: 10px solid white;
         box-shadow: 4px 4px 4px grey;
      }
      h1 {
         text-align: center;
         text-decoration: underline;
         font-family: Georgia;
      }
      .stack1,
      .stack2,
      .stack3 {
         float: left;
         position: relative;
         margin: 65px;
         padding: 3px;
      }
      .stack1:before,
      .stack1:after {
         content: "";
         border: 10px solid white;
         position: absolute;
         z-index: -1;
      }
      .stack1 {
         height: 250px;
         width: 260px;
      }
      .stack1:before {
         height: 280px;
         width: 260px;
         background-color: grey;
         top: -15px;
         left: -15px;
         transform: rotate(-10deg);
         box-shadow: 4px 2px 4px #9a2ca0;
      }
      .stack1:after {
         height: 250px;
         width: 260px;
         background-color: #808000;
         top: 5px;
         left: 0;
         transform: rotate(10deg);
         box-shadow: 4px 2px 4px #9a2ca0;
      }
   </style>
</head> 
<body>  
   <h1> Image Stack Illusion </h1>
   <div class="stack1">
      <img  src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" alt="Comment créer l'illusion d'empilement d'images en utilisant HTML et CSS ?" >
   </div>
</body>
</html>

Où pouvons-nous utiliser l'illusion de la pile d'images dans la conception de sites Web ?

Dans la conception Web, l'illusion de la pile d'images peut être utilisée pour créer une variété de mises en page visuelles passionnantes. Il peut être utilisé pour créer des galeries d’images accrocheuses et des pages publicitaires de produits attrayantes. De plus, les concepteurs peuvent l'utiliser pour présenter leurs portfolios. Les industries et les grandes entreprises peuvent intégrer cet effet pour créer leurs pages de destination.

Conclusion

L'illusion de pile d'images est largement utilisée dans le développement Web, la publicité et la conception graphique. L'attrait suscité par de nombreux utilisateurs a convaincu les développeurs de créer davantage de visuels accrocheurs. De plus, nous ne comptons plus sur l’application Photoshop pour obtenir cet effet. Nous pouvons facilement le créer en utilisant uniquement HTML et CSS. Dans cet article, nous utilisons des pseudo-classes (:avant et :après) pour obtenir le résultat souhaité. Nous avons examiné 6 illusions différentes dans cet article. Cependant, il existe d'autres possibilités, il vous suffit de suivre les mêmes étapes décrites ici pour vous entraîner et créer vos propres visuels.

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!

css html 栈堆 class position 伪类伪元素 photoshop

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment changer la vitesse de lecture d'une vidéo en HTML5 ?Article suivant：Comment changer la vitesse de lecture d'une vidéo en HTML5 ?

Articles Liés

Voir plus