dans un monde connecté via Internet, il est essentiel que votre marque ou votre entreprise ait une présence en ligne. Cela est généralement fréquemment représenté via un site Web.
actuellement, plusieurs outils vous permettent de faire des pages d’atterrissage ou des blogs génériques. Cependant, ceux-ci ne fournissent pas le site une identité qui leur permet de mettre en évidence sur le reste. À cause de cela, nous vous apportons aujourd’hui un accordéon d’images, parfait pour votre site Web pour mettre en évidence entre la foule.
Pas besoin de JavaScript
Le meilleur de cet accordéon est que Utilisez HTML et CSS! Donc, vous n’avez pas besoin de script supplémentaire pour travailler. La structure HTML qui nécessite est simple et consiste en des éléments imbriqués les uns avec les autres. Celles-ci contiennent une image qui est accompagnée d’une figue et d’une radio de bouton, qui nous fournira la fonctionnalité.
<div class="ac--container"> <figure> <img src="image/01.jpg" alt="image01"/> <input type="radio" name="ac--radio" checked="checked"/> <figcaption><span>First image</span></figcaption> <figure> <img src="image/02.jpg" alt="image02"/> <input type="radio" name="ac--radio"/> <figcaption><span>Second image</span></figcaption> <figure> <!-- ... --> </figure> </figure> </figure></div>
comme peut être affiché, le rayon Le bouton doit avoir le même nom afin que l’accordéon fonctionne correctement.
Les styles
doivent être notés que les images que nous utilisons doivent avoir la même taille afin que notre accordéon soit uniforme. Dans notre cas, nous les utiliserons dans un format 335PX de large par High 480px. Cette largeur (335px) sera celle que nous verrons lorsque l’image est développée, toutefois, lorsqu’elle est contractée, elle ne montrera qu’une largeur de 50 px.
Par conséquent, notre ac--container L’élément doit mesurer la largeur d’une image déployée, plus la largeur du reste des images sous contrat. Comme dans notre exemple, nous utiliserons des images, la largeur serait 335px (image déployée) + 50px + 50px + 50px + 50px (4 images contractées) = 535px.
<
.ac–container { width: 535px; /* Ancho del contenedor del acordeón */}.ac–container figure { position: absolute; /* Esto permite que las imágenes se vean solapadas */ top: 0; left: 50px; /* Ancho de imagen contraída */ width: 335px;}
De plus, nous allons positionner la radio du bouton de sorte qu’elles englobent toute la largeur des images contractuelles.
.ac--container input { position: absolute; top: 0; left: 0; width: 50px; height: 100%; z-index: 100; appearance: none;}
apporter notre accordéon à la vie
En outre, nous pouvons appliquer d’autres styles et animations afin que notre accordéon soit dynamique et attrayant en vue. N’oubliez pas que vous pouvez jouer avec des animations et des couleurs pour créer votre propre design, mais la fonctionnalité restera intacte.
Personnalisation à notre goût
Il y a une infinité de possibilités qui nous permettent de donner une personnalité à notre site Web, via les éléments CSS édités par nous. L’accordéon que nous présentons auparavant sera un excellent moyen de mettre en évidence vos images sur les visiteurs qui les visualisent.
in Ida, nous incluons le fichier .zip avec l’exemple que vous venez de voir, de sorte que vous puissiez Téléchargez-le et modifiez-le en fonction de vos besoins:
Télécharger