I. Introduction▲
Dans pas mal de galeries en CSS3, il est fait usage de la pseudoclasse :target afin de mettre telle ou telle image en avant.
Cette utilisation présente au moins deux inconvénients :
- elle peut éventuellement faire scroller la page;
- elle modifie l'URL et donc ajoute une entrée à l'historique du navigateur.
Nous allons voir une nouvelle approche en utilisant cette fois la pseudoclasse :checked apparue avec le CSS3.
II. Sélecteurs et pseudoclasses utilisés▲
II-A. Sélecteur d'adjacence▲
- Le sélecteur d'adjacence « directe » + (plus), introduit avec la norme CSS 2.1, permet de cibler des éléments frères directement successeurs.
- Le sélecteur d'adjacence « élargie » ~ (tilde), introduit avec la norme CSS 3, mais déjà reconnu par IE depuis sa version 7, permet de cibler des éléments qui ne sont pas forcément successeurs directs, mais successeurs tout court.
II-B. Pseudoclasse▲
La pseudoclasse :checked, introduite avec la norme CSS 3, permet de cibler un élément coché.
II-C. Exemple d'utilisation▲
Le petit exemple suivant montre comment modifier le contenu de la balise <label> associée à la case à cocher en utilisant la pseudoclasse :checked. On en profite également pour afficher/masquer une image.
Le code HTML :
<input type="checkbox" id="id_checkbox" value="oui">
<label for="id_checkbox">Case <span id="span_non">non </span>cochée</label>
<img src="http://www.developpez.net/template/images/logo.png" alt="log DVP">Le code CSS :
/* style du contenu du label par défaut */
label{
color:#888;
font-style:italic;
}
img{
position:absolute;
top:2em;
right:1em;
display:none;
}
/* modification du style du contenu du label */
:checked +label{
color:#000;
font-style:normal;
font-weight:bold;
}
/* on en profite pour supprimer le non */
:checked +label span{
display:none;
}
/* affichage de l'image */
:checked ~ img{
display:block;
}III. La galerie▲
I-A. Mise en place▲
Pour chaque image, nous allons mettre en place une structure simple comme suit :
<div>
<input type="radio" id="check_1" name="check" class="r_check">
<label for="check_1" class="on_check">
<img class="vignette" src="images/s_image_001.jpg" alt="s_image_001.jpg">
</label>
<img class="big_img" src="images/image_001.jpg" alt="">
</div>Pour cette galerie, nous n'utiliserons pas de champ type="checkbox" mais des champs type="radio" en prenant soin de leur affecter le même name, afin qu'un seul ne soit coché à la fois, mais ayant des identifiants différents.
L'image vignette se trouve dans la balise <label>, ce qui permet d'agir, à travers elle, sur le bouton radio lié grâce à l'attribut for.
Pour finir, on place la « grande » image.
Tout ceci est contenu dans une div, ce qui permet de mieux agencer les vignettes à l'affichage.
Il est à noter que la position des balises a son importance, au moins pour l'image devant apparaître qui doit se trouver après le bouton radio.
Maintenant, associons le style à nos éléments :
.r_check{
/* display:none; /* si masqué pas d'accès avec les touches */
opacity:0;
position:absolute;
}
.r_check, .on_check{
cursor: pointer;
}
/* dimensions des vignettes */
label img.vignette{
width:100px;
height:75px;
}
.big_image{
position:absolute;
display:block;
width:600px;
top:100px; /* hauteur du bandeau des vignettes */
left:0;
right:0;
margin:0px auto;
opacity:0; /* non visible au départ */
}
/* apparition des images */
.r_check:checked ~ .big_image {
opacity:1;
}I-B. Explications▲
Pour les champs type="radio", nous préférons les masquer via une opacity:0 afin de pouvoir maintenir la navigation au clavier, même si elle reste imparfaite. On les place en position:absolute afin de ne pas interférer sur l'affichage.
Concernant les images à apparaître, masquées dans un premier temps via une opacity:0, elles sont placées en position:absolute et se positionneront donc par rapport au conteneur référent. Le centrage est assuré par la conjugaison des propriétés left, right et margin associées à une width définie.
La prise en compte de l'apparition des images se fera via le sélecteur d'adjacence ~ (tilde). Ainsi, lorsque le bouton radio sera coché (checked), l'image sera rendue visible via une opacity:1.
IV. On peut faire mieux▲
Il faut bien avouer que l'exemple est un peu plat.
Ceci est sans compter sur un des apports du CSS3 à savoir les transitions et transformations.
Nous allons agrémenter cette galerie en ajoutant une transition pour l'apparition et la disparition des images, en jouant sur la propriété opacity et en faisant varier sa valeur de 0 à 1 et inversement.
Pour ajouter un petit plus, nous allons utiliser la transformation scale pour faire apparaître l'image en l'agrandissant et disparaître en la réduisant.
Nous obtenons, pour les images apparaissant, le CSS final suivant :
.big_image{
position:absolute;
display:block;
width:600px;
top:100px;
left:0;
right:0;
margin:0 auto;
opacity:0;
border:10px solid #FFF;
box-shadow: 0 2px 8px 2px #666;
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-ms-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.r_check:checked ~ .big_image {
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}V. Conclusions▲
On peut tout à fait imaginer d'autres utilisations de cette méthode comme la réalisation d'un menu à onglets ou encore un système d'affichage dit « accordéon ».
La liste des transformations disponibles étant déjà grande il vous suffit de laisser libre cours à votre imagination.
VI. Liens▲
Les sélecteurs en CSS3Les sélecteurs en CSS3
Les transitions en CSS3Les transitions en CSS3
VII. Remerciements▲
Je tiens à remercier ced et ClaudeLELOUP pour leur relecture orthographique ainsi que rodolphebrd pour sa relecture technique.
Je tiens également à remercier Bovino pour son support technique.