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  :

<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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.