KooNDeLLiTcH²

Je vous propose dans cet article de découvrir les transitions de CSS3. Ici, on va les utiliser pour coder une barre sociale avec des images tronquées en bas. Lorsque l’utilisateur survole une image, celle-ci remonte légèrement afin d’apparaître en entière. Ici nul besoin de javascript. Seulement d’exploiter les nouvelles capacités de transition de CSS 3. Voilà ce que ça donne :

L'image remonte lorsqu'on la survole.

Comme d’habitude lorsqu’on fait du beau code web, il n’y a pas grand chose d’intéressant dans l’HTML en lui-même. Le voici donc :

Deux images dans une div, chaque image ayant un lien. Pour chez vous, je vous mets les deux images que j’ai utilisées et qui font 24px sur 24px :
 

Maintenant, abordons la partie CSS. On voit tout d’abord que l’on veut cacher la partie de nos images qui dépasse des bords de la div (overflow: hidden). Ensuite chacun des liens doit être aligné à gauche sans aucunes marges (float:left) et espacé de son voisin de 4px (margin-right: 4px). Ce qui nous donne donc le code suivant :

.social {
	overflow:hidden;
}
.social a {
	float:left;
	margin-right:4px;
}

Ensuite, on va placer les images de façon à les décaler de leur position de départ (position:relative) de 7 pixels vers le bas (top:7px). On va ensuite dire que lorsqu’elles sont survolées (pseudo-classe hover), on annule ce décalage vers le bas (top: 0). On ajoute donc à la partie CSS ce qui suit :

.social a img {
	position:relative;
	top:7px;
}
.social a:hover img {
	top: 0px;
}

Il ne nous reste plus qu’à ajouter notre transition CSS3. On va choisir la transition « ease-in-out » pour avoir un décalage progressif et aussi l’effet inverse losqu’on arrête de survoler l’image. Ensuite, on va l’appliquer lorsque la propriété ‘top‘ change, évidemment vu que c’est cette propriété que nous modifions dans la partie hover. Enfin, on va dire que cette transition doit être assez rapide, soit 0,2 secondes.

Un point particulier sur les transitions. Elles ne sont pas encore standardisées dans tous les moteurs web et du coup, ceux qui les supportent ont besoin d’ajouter un préfixe. Plus tard, quand tout les browsers implémenteront convenablement les normes, on pourra simplement utiliser les propriétés CSS dépourvues de tout préfixe. On ajoute donc le code suivant aux liens social :

.social a img {
	position:relative; /* Allow 'top' to be used */
	top:7px;
	
	/* Webkit (Chrome, Safari) */
	-webkit-transition-property: top;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in-out;

	/* Firefox */
	-moz-transition-property: top;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in-out;

	/* Incoming Standard */
	transition-property: top;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

Et voilà. Pour voir les différents fonctions de timing de transition disponibles, il suffit d’aller voir la norme elle-même.