CSS enflammez vos titres

Le CSS permet quantités d’effet pour rendre votre pages attractives. En combinant les ombres et les animations nous allons voir comment mettre en place un effet flamboyant sur le texte.

Fire

Code publié par Antti Nyman sur codepen.

Les régles CSS à l’oeuvre

Pour notre exemple nous allons utiliser plusieurs propriétés CSS :

  • Background-image et linear-gradient
  • et les animations via @keyframes.

Le principe et simple nous utiliserons 2 animations à une vitesse différentes ce qui va donner une impression de flamboiement.

Le code HTML

En HTML notre code sera sommaire.

<h2>
<span class="fire">F</span>
<span class="burn">i</span>
<span class="burn">r</span>
<span class="fire">e</span>
</h2>

Nous créons deux classes une fire et une burn. Les deux classes auront des animations identiques mais décalé ce qui donnera l’impression de flamme aléatoires. Si nous utilisions une seule classe le pattern de l’animation deviendrai trop lisible de ce fait l’animation ne ferai pas illusion.

Le code CSS

Pour commencer nous allons formater notre titre H2.

h2 {
  text-align: center;
  line-height: 1.4em;
  text-transform: uppercase;
  letter-spacing: .3em;
  white-space:nowrap;
}

Maintenant mettons en valeur les spans contenu dans le H2.

span {
  color: #000;
  font-size: 5em;
  text-transform: lowercase;
  vertical-align: middle;
  letter-spacing: .2em;
}

@keyframes

Avant de mettre en oeuvre nos animations il faut créer un pattern d’animation avec @keyframes

@keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

Notre animation défini les deux états que nous allons alterner sur le texte. Ce sera la même animation pour les classe burn et fire, nous allons uniquement jouer sur le temps de transition entre les deux classes.

A lire  CSS grid - Galerie responsive

Animation

Maintenant que notre animation est défini par @keyframes, nous allons l’appliquer sur nos span en jouant sur le temps d’exécution de l’animation.

.fire {
  animation: animation 1s ease-in-out infinite alternate;
  -moz-animation: animation 1s ease-in-out infinite alternate;
  -webkit-animation: animation 1s ease-in-out infinite alternate;
  -o-animation: animation 1s ease-in-out infinite alternate;
}
.burn {
  animation: animation .65s ease-in-out infinite alternate;
  -moz-animation: animation .65s ease-in-out infinite alternate;
  -webkit-animation: animation .65s ease-in-out infinite alternate;
  -o-animation: animation .65s ease-in-out infinite alternate;
}

Animation utilise plusieurs paramètres pour fonctionner :

  • animation est le nom de la @keyframes qui sera appliqué lors de l’exécution.
  • 1s est la durée de l’animation, le temps entre l’état initial et l’état final.
  • ease-in-out est la méthode de transition ici la transition accélère au début et à la fin, si nous avions utilisé linear la vitesse de transition aurait était constante.
  • infinite est le nombre de répétition de l’animation.
  • enfin alternate signifie que l’animation fait des allez retour et non des boucles (de 0% à 100% puis de 100% à 0% et ainsi de suite).

Le code publié dans cet articles n’est pas préfixé, je vous invite à consulter le PEN de Antti Nyman pour consulter le code intégral.

le résultat

Fire
© 2018 Occitaweb formation WordPress et média sociaux