Chapitre 6
Arrière-plans

Retour Accueil CSS

53 Effets d’arrière-plan : bouton d’alerte.

Termes CSS clés employés : border-radius, radial-gradient.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+, Safari5.1+ avec préfixe, Opera16+.

Problématique

Conférer un effet de pulsation à un bouton lorsqu’il est survolé par le pointeur.

Résolution théorique

Survolé par le pointeur, ça veut dire la pseudo-classe :hover. Un mouvement, ça sous-entend une animation.

Résolution pratique

Un code HTML élémentaire :
<IV class=conteneur> <DIV class=bouton></DIV> </DIV>
Dans le code CSS, commençons par l’élément conteneur. Comme nous voulons ici un bouton rond, nous employons la propriété border-radius, fixée à la moitié de la largeur de l’élément plus une bordure. La propriété overflow est fixée à hidden.
DIV.conteneur {margin : 5px auto 5px; width:100px; height:100px; border: 4px solid grey; border-radius:52px; overflow:hidden; }
Dans l’élément bouton de même taille, nous définissons un arrière-plan en dégradé rayonnant, de taille initiale 0. C’est ici un cercle rouge de 1% devenant blanc progressivement entre 80 et 100%. L’image n’est pas répétée et est centrée.
DIV.bouton { width:100px; height:100px; border-radius:50px; background-size: 0px 0px; background-image: radial-gradient(circle, red 1%, red 80%, white 100%); background-repeat:no-repeat; background-position: center; }
Puis nous définissons l’animation : une variation de la taille de l’image d’arrière plan de 0 pixels à 150% de la taille de l’élément. L’animation se répété à l’infini de façon alternative.
div.bouton:hover {animation: pulsation .3s infinite alternate;} @keyframes pulsation {from {background-size: 0px 0px;;} to {background-size:150% 150%; } }

Pulsation


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque