IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Créer une galerie d'images avec :target

Cet article est la traduction de : Making an image gallery with :target.
4 commentaires Donner une note à l´article (4.5)

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur : Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Utilisation de la pseudo-classe :target

L'un des nouveaux sélecteurs du CSS3 est la pseudo-classe :target, qui peut être utilisée pour appliquer des règles à un élément ayant un identifiant spécifique, que ce soit une ancre ou un id.

Par exemple, supposons que vous ayez un titre de section avec pour id 'chapitre_2' :

 
Sélectionnez
<h3 id="chapitre_2">Le titre du chapitre 2</h3>

Vous pouvez créer un lien direct vers cet élément en utilisant son identifiant à la fin de l'adresse URL :

 
Sélectionnez
http://www.exemple.com/index.html#chapitre_2

Ensuite, avec le sélecteur :target, vous pouvez appliquer un background à cet élément pour indiquer clairement où vous êtes arrivé sur la page :

 
Sélectionnez
h3:target { background-color: #ffffff; }

Vraiment utile, vous ne trouvez pas ? Ce n'est pas une fonction puissante, mais néanmoins utile. elle peut se rendre encore plus utile avec un peu d'ingéniosité, que diriez vous, par exemple, d'une galerie d'images 100% CSS ?

II. Création d'une galerie d'images

Regardez cet exemple (avec un navigateur supportant :target ; Mozilla Firefox, Webkit ou Opera feront l'affaire). En cliquant sur les liens, vous naviguez entre les différentes images, tout ceci en un minimum de code et sans JavaScript ni PHP.

La première étape est la création d'une liste d'images et leurs noms, ceux-ci étant des liens. Par exemple :

 
Sélectionnez
<li id="one">
	<p><a href="#one">Image 1</a></p>
	<img src="../images/one.jpg">
</li>

Chaque élément de la liste a besoin d'un id, cela permettra l'utilisation d'une ancre, le lien href pointe vers l'id du li qui le contient. Cela permet à :target de fonctionner, c'est magique ! Toutes les images sont positionnées les unes par dessus les autres. En utilisant le sélecteur, nous changeons uniquement la valeur de la propriété z-index, et l'image cible se positionne au-dessus des autres images :

 
Sélectionnez
img { position: absolute; }
li:target img { z-index: 100; }

Facile ! Bien sûr, ceci est un exemple très basique, avec plus d'ingéniosité cela pourrait devenir un outil très utile.

Mise à jour : je viens de me rendre compte que Daniel Glazman a proposé un exemple assez similaire juste avant moi, voir CSS-only tabs.

Remerciements

Je tiens à remercier ordiminnie dont la relecture attentive a permis d'améliorer significativement la qualité de cet article.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+