Amélorier votre site avec l’effet « pulse » en box-shadow

box-shadow pulse

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  :

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

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.

Pour l’animation nous allons utiliser un simple pourcentage entre les deux états.

et vous avez une très simple animation en pulsation à personnalisé.

Exemple sur codepen :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *