Temps de lecture : 19 minutes environ.
Dans ce tutoriel, nous allons créer un accordéon d'images interactif en utilisant uniquement HTML et CSS. Cet accordéon affichera des images de paysages et fournira des détails supplémentaires lorsque l'utilisateur clique sur une image. Nous allons expliquer chaque étape en détail pour que vous puissiez comprendre comment tout fonctionne.
Étape 1 : Structure HTML
Commencez par créer la structure HTML de base. Nous allons utiliser des balises <details> et <summary> pour créer l'effet d'accordéon.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Images en accordéon</h1>
<main>
<p class="compatible">Attention votre navigateur ne supporte pas toutes les fonctionnalités</p>
<div class="accordion">
<details name="paysages" open>
<summary>
<img src="images/landscape_1.png" alt="Paysage 1">
</summary>
<div class="details-content">
<h2>Joli paysage 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, aliquid!</p>
</div>
</details>
<details name="paysages">
<summary>
<img src="images/landscape_2.png" alt="Paysage 2">
</summary>
<div class="details-content">
<h2>Joli paysage 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, aliquid!</p>
</div>
</details>
<details name="paysages">
<summary>
<img src="images/landscape_3.png" alt="Paysage 3">
</summary>
<div class="details-content">
<h2>Joli paysage 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, aliquid!</p>
</div>
</details>
<details name="paysages">
<summary>
<img src="images/landscape_4.png" alt="Paysage 4">
</summary>
<div class="details-content">
<h2>Joli paysage 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, aliquid!</p>
</div>
</details>
</div>
</main>
</body>
</html>Détails du Code HTML
Doctype et Langue :
<!DOCTYPE html>: Déclare le document comme étant du HTML5.<html lang="fr">: Définit la langue du document comme étant le français.
Head :
<meta charset="UTF-8">: Définit l'encodage des caractères comme étant UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Assure que la page est réactive et s'adapte à la taille de l'écran.<title>Document</title>: Définit le titre de la page.<link rel="stylesheet" href="css/styles.css">: Lie la feuille de style CSS externe.
Body :
<h1>Images en accordéon</h1>: Titre principal de la page.<main>: Conteneur principal du contenu.<p class="compatible">Attention votre navigateur ne supporte pas toutes les fonctionnalités</p>: Message d'avertissement pour les navigateurs non compatibles.<div class="accordion">: Conteneur pour l'accordéon.
Accordéon :
<details name="paysages" open>: Élément dépliable avec l'attributopenpour qu'il soit ouvert par défaut.<summary>: Résumé de l'élément dépliable, contient une image.<img src="images/landscape_1.png" alt="Paysage 1">: Image du paysage.<div class="details-content">: Conteneur pour le contenu détaillé.<h2>Joli paysage 1</h2>: Titre du contenu détaillé.<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, aliquid!</p>: Texte descriptif.
Étape 2 : Styles CSS
Ensuite, nous allons styliser notre accordéon en utilisant CSS. Nous allons utiliser des sélecteurs avancés et des variables CSS pour rendre notre accordéon interactif et réactif.
@supports selector(::details-content){
.compatible{
display: none;
}
}
:root{
--open-size: min(30vw, 300px);
--focus-color: #9008a8;
}
.accordion{
display: flex;
gap: 1rem;
width: min-content;
margin: auto;
}
details{
display: flex;
color: white;
height: 30rem;
position: relative;
z-index: 1;
::marker{
content: ""
}
summary{
width: 5rem;
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
transition: filter 0.5s ease;
}
&:focus{
outline: none;
}
}
&[open]{
summary{
img{
filter: brightness(0.5);
}
}
}
.details-content{
padding: 1.5rem 1rem;
width: var(--open-size);
}
&:hover,
&:has(summary:focus){
outline: 3px solid var(--focus-color);
outline-offset: 3px;
}
}
::details-content{
transition: width 0.5s ease;
width: 0;
}
[open]::details-content{
width: var(--open-size);
}Détails du Code CSS
Support des Sélecteurs :
@supports selector(::details-content): Vérifie si le navigateur supporte le sélecteur::details-content..compatible { display: none; }: Cache le message de compatibilité si le sélecteur est supporté.
Variables CSS :
--open-size: Définit la taille d'ouverture de l'accordéon.--focus-color: Définit la couleur de focus.
Styles de l'Accordéon :
display: flex;: Utilise Flexbox pour aligner les éléments.gap: 1rem;: Ajoute un espace entre les éléments.width: min-content;: Ajuste la largeur au contenu minimal.margin: auto;: Centre l'accordéon.
Styles des Détails :
display: flex;: Utilise Flexbox pour aligner les éléments.color: white;: Définit la couleur du texte en blanc.height: 30rem;: Définit la hauteur des éléments.position: relative;: Positionne les éléments de manière relative.z-index: 1;: Définit l'index Z pour le positionnement.::marker { content: ""; }: Supprime le marqueur par défaut.summary { width: 5rem; }: Définit la largeur du résumé.img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: filter 0.5s ease; }: Positionne et stylise l'image.&:focus { outline: none; }: Supprime l'outline par défaut lors du focus.&[open] summary img { filter: brightness(0.5); }: Ajoute un filtre de luminosité lorsque l'élément est ouvert..details-content { padding: 1.5rem 1rem; width: var(--open-size); }: Stylise le contenu détaillé.&:hover, &:has(summary:focus) { outline: 3px solid var(--focus-color); outline-offset: 3px; }: Ajoute un outline lors du survol ou du focus.
Contenu des Détails :
transition: width 0.5s ease;: Ajoute une transition pour la largeur.width: 0;: Définit la largeur initiale à 0.[open]::details-content { width: var(--open-size); }: Définit la largeur lorsque l'élément est ouvert.
Conclusion
Vous avez maintenant un accordéon d'images interactif et réactif en utilisant uniquement HTML et CSS. Vous pouvez personnaliser davantage les styles et ajouter plus de contenu selon vos besoins. Ce tutoriel vous a guidé à travers chaque étape, en expliquant les détails de chaque partie du code. N'hésitez pas à expérimenter avec différentes images et contenus pour créer un accordéon unique et attrayant.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
Article publié le
Catégories : Développement Front-End CSS avancé
Mots-clés : Animations fluides CSS Tutoriel HTML et CSS responsive
Partager :
