Chapitre 4
Galeries
Retour Accueil CSS
34 Galerie améliorée
Termes CSS clés employés : ::after, box-shadow
Compatibilité navigateurs : IE9+, Firefix4.0+, Chrome10+, Safari5.1+, Opera10.5+.
Problématique
Enjoliver une galerie d’images en ajoutant automatiquement une décoration supplémentaire.
Résolution théorique
L’ajout automatique est facile à l’aide du pseudo-élément ::after.
Résolution pratique
Le code HTML se borne à un élément DIV refermant un élément IMG. La classe du DIV conditionnera l’ajout.
<div class="photo trombone"><img src="cube1.jpg"></div>
Nous définissons ensuite les caractéristiques fondamentales de ces deux éléments :
div.photo {
position: relative;
float:left;
margin-left:25px;
width:220px;
height:230px;
background:white;
border:1px solid black;
box-shadow: 3px 3px 3px grey;
}
.photo img {padding:10px;
margin:5px auto 5px;
}
Puis nous définissons l’élément ::after pour la classe concernée. Son contenu est ici une image transparente (.png ou .gif). Le seul point délicat consiste à bien ajuster sa position en fonction de son apparence et de la taille de l’image originelle.
.trombone::after {
position:relative;
float:left;
content:url(trombone.gif);
margin-top:-252px;
margin-left:20px;
}
Vous pouvez créer autant de possibilités que d’images, en jouant simplement sur les classes, comme le montre l'exemple suivant :
Galerie améliorée
Retour Accueil CSS
|
|
|---|