Amélorier votre site avec l’effet « pulse » en box-shadow
L’effet « pulse » et souvent utilisé en Webdesign, pour designer un bouton en hover grâce au box-shadow.
Utilisé dans le jeu vidéo, sur le web notamment dans le material design, cet effet est subtil mais ajoute un vrai plus à vos sites web.
alors qu’avant nous aurions utilisé un simple GIF, nous pouvons maintenant avec les animations CSS créer cet effet très facilement.
Le pouvoir du box-shadow
Petit rappel du box-shadow pour le déclarer en CSS :
box-shadow: le décalage en x, le décalage en y, le flou, la grandeur de l’ombre, la couleur
(exemple : box-shadow: 1px 2px 5px 2px #333)
et si en apparence, cela semble très simpliste et juste adapté à faire des ombres porté sous vos div, ça peut servir à bien d’autre chose.
En effet certain designers s’en servent pour animer simplement leurs effets, sans avoir à importer d’images.
Pour les plus motivés, il est même possible de faire du pixel-art grâce au box-shadow, car vous pouvez ajouter autant de box-shadow que vous le souhaitez à un élément en simplement les séparant par une virgule.
Les animations CSS
C’est très intéressant de connaitre la methode pour effectuer des animations CSS en effet cela évite de faire appel à un javascript et cela reste léger.
Pour en savoir plus sur les animations css vous pouvez lire l’article :
COMMENT FAIRE UNE ANIMATION CSS
Tutoriel de l’effet « pulse »
Nous allons créer un simple lien html :
<a href="http://www.josuaowebblog.fr">bouton</a>
pour le le bien du tutoriel nous allons donner à ce lien un aspect bouton.
vous pouvez remarquer que nous préparons l’animation en ajoutant « transition » qui réglé la vitesse et type de l’animation.
Nous avons aussi placer un box-shadow à 0 pour préparer le deuxième état du bouton.
vous pouvez remarquer qu’un des deux box-shadow et blanc , il va nous servir de bordure
a{
text-decoration:none;
background: #777;
color:#fff;
padding:4px 7px;
display:block;
width:100px;
text-align:center;
box-shadow: 0px 0px 0 0px #fff, 0px 0px 0 0px #555a86;
transition : linear 0.3s;
}
il nous faut donc ajouter le second état du bouton en utilisant :hover.
Cela nous permet de lancer l’animation en lui donnant une duré, une répétition ainsi qu’un style.
a:hover {animation: pulse 0.8s infinite alternate}
Pour l’animation nous allons utiliser un simple pourcentage entre les deux états.
@keyframes pulse {
0%{
box-shadow: 0px 0px 0 1px #fff, 0px 0px 0 4px #555a86 ;
opacity :1;
}100%{
box-shadow: 0px 0px 0 6px #fff, 0px 0px 0 8px #555a86;
opacity :0.9;
}
}
et vous avez une très simple animation en pulsation à personnalisé.
Exemple sur codepen :
josuao