Termes CSS clés employés : animation, nth-of-type(), text-shadow,
border-radius, transform:translate().
Compatibilité navigateurs : IE10+, Firefox16+ et Opera12.5+.
Chrome et Safari avec préfixe,IE9 avec préfixe.
Créer une icône signalant une nouveauté, agrémentée de bulles rebondissantes.
Puisque l’ensemble doit être animé, il va falloir employer une animation, ainsi que la fonction
transform:translate(). Et pour obtenir des éléments ronds (les bulles), recourir à la propriété
border-radius.
Nous allons employer pour le HTML un élément div renfermant le texte « Nouveau ! » ainsi que quatre
éléments span constituant les quatre bulles. Chaque bulle contient un caractère de la chaîne « NEW ! »
<div class="bulles">Nouveau !
<span>N</span>
<span>E</span>
<span>W</span>
<span>!</span>
</div>
le code CSS pour le div de classe bulles, outre le classique centre automatique, concerne essentiellement la mise en forme du texte. La taille de la police est un élément important, avec une incidence sur certains réglages ultérieurs. Le reste est librement modifiable, y compris les ombres du texte.
.bulles {
margin: 20px auto 0;
text-align:center;
font-size:2REM;
color:red;
font-weight:bold;
text-shadow: 0px 1px 0px coral, 1px 0px 0px orange,
1px 2px 0px coral, 2px 1px 0px orange,
2px 3px 0px coral, 3px 2px 0px orange;
}
Nous définissons ensuite les caractéristiques communes des éléments span : des blocs en ligne avec une position absolue. Le border-radius crée des éléments ronds. Remarquez que la propriété z-index fixée à –1 pour que les bulles soient situées sous le texte du div.
.bulles span {
display: inline-block;
position:absolute;
vertical-align: middle;
width: 5px;
height: 5px;
margin-top:35px;
border-radius: 50px;
color:white;
z-index:-1;
}
Ajoutons ensuite les propriétés propres à chaque span : dans la déclaration générale, celles pour
le premier élément, puis dans des déclarations employant le sélecteur nth-of-type() celles des éléments
suivants. Il s’agit pour le moment uniquement de la position à gauche et de la couleur de l’élément. La position à
gauche dépendra de la taille de la police employée pour le texte du div.
.bulles span {
…
margin-left:-130px;
background: green;
}
.bulles span:nth-of-type(2) {
margin-left:-105px;
background: orange;
}
.bulles span:nth-of-type(3) {
margin-left:-80px;
background: blue;
}
.bulles span:nth-of-type(4) {
margin-left:-55px;
background: red;
}
Ajoutons maintenant les animations : celle du texte…
.bulles {
…
animation: texte 1.8s ease-in-out infinite alternate;
}
.. puis celles des bulles. Pour les bulles, il s’agit de la même animation, mais décalée de 0,3 secondes pour chaque
élément successif :
.bulles span {
…
animation: bulles 1.5s infinite alternate;
}
.bulles span:nth-of-type(2) {
…
animation-delay: 0.3s;
}
.bulles span:nth-of-type(3) {
…
animation-delay: 0.6s;
}
.bulles span:nth-of-type(4) {
…
animation-delay: 0.9s;
}
Enfin, le code des animations. Pour le texte, une simple modification de la transparence de la couleur du texte :
@keyframes texte {
0% { color:rgba(255,0,0,1); }
100% {color:rgba(255,0,0,.1);}
}
Et pour les bulles, une modification de taille de l’élément et de la police, ainsi qu’une translation vers le haut
et vers la droite. Là aussi, les valeurs dépendent de la taille retenue pour la police du texte du div.
@keyframes bulles {
0% {
width: 5px;
height: 5px;
font-size:1px;
transform:translate(0, 0);
}
100% {
width: 30px;
height: 30px;
font-size:25px;
transform:translate( 15px, -50px);
}
}
Vous voyez ci-dessous le résultat.
|
|---|