Comment Créer un Texte Éclatant?

Les textes éclatants attirent l'attention des utilisateurs immédiatement. Ils peuvent facilement mettre quelqu'un de bonne humeur. Vous pouvez choisir des couleurs légères et apaisantes et des éléments légèrement brillants qui vous donnent un sentiment détendu pour l'utilisateur. Ce tutoriel vous montrera comment créer un texte éclatant en utilisant uniquement HTML et CSS. Suivez les pas et voyez les exemples.

1. Créez HTML

Créez la balise <h1> avec une classe "glow". Écrivez un texte dans une balise.

<h1 class="glow">W3DOCS</h1>

2. Créez CSS

Définissez une couleur pour background. Nous utilisons la fonction linear-gradient pour l'arrière-plan. Elle crée une image se composant d'une transition progressive entre deux ou plusieurs couleur le long de la ligne droite.

body {
  background: linear-gradient(
    90deg,
    rgba(177, 64, 200, 1) 0%,
    rgba(109, 9, 121, 1) 35%,
    rgba(45, 1, 62, 1) 100%
  );
}

Maintenant créons d'éclat!

Définissez font-size du texte, la color et spécifiez la place, où le texte doit être situé avec la propriété text-align.
Créez une animation qui a cinq valeurs. On définit animation-duration à 1 seconde, ce qui signifie que l'animation prend 1 seconde pour terminer un cycle. Utilisez le mot-clé ease-in-out de la propriété animation-timing-function qui définit la façon de la progression de l'animation pendant chaque cycle — pas tout au long de l'animation. Définissez animation-iteration-count à infinite pour que l'animation soit jouée sans arrêts. Spécifiez animation-direction en la définissant à alternate pour que l'animation soit jouée en avant, après en arrière. (Utilisez les préfixes de vendeur -webkit- et -moz- avec la propriété animation).

.glow {
  font-size: 70px;
  color: #ffffff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

Le sélecteur keyframe peut commencer avec un pourcentage (%) ou avec les mots-clé "from" (même que 0%) et "to" (même que 100%). 0% est un point de départ de l'animation, 100% est le point de fin.

Définissez les valeurs de la propriété text-shadow. La première valeur est le décalage horizontal de l'ombre. La deuxième valeur est le décalage vertical. La troisième est blur-radius qui définit la taille et le volume de l'ombre. La dernière valeur est la couleur duu texte.

La règle @keyframes est complètement prise en charge par les navigateurs principals. Cependant, certains préfixes sont utilisés:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-o- Opera 12.0

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #eeeeee, 0 0 20px #000000, 0 0 30px #000000,
      0 0 40px #000000, 0 0 50px #9554b3, 0 0 60px #9554b3, 0 0 70px #9554b3;
  }
  to {
    text-shadow: 0 0 20px #eeeeee, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

Voici le code final:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        background: linear-gradient(90deg, rgba(177, 64, 200, 1) 0%, rgba(109, 9, 121, 1) 35%, rgba(45, 1, 62, 1) 100%);
      }
      .glow {
        font-size: 70px;
        color: #ffffff;
        text-align: center;
        -webkit-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        animation: glow 1s ease-in-out infinite alternate;
      }
      @-webkit-keyframes glow {
        from {
          text-shadow: 0 0 10px #eeeeee, 0 0 20px #000000, 0 0 30px #000000, 0 0 40px #000000, 0 0 50px #9554b3, 0 0 60px #9554b3, 0 0 70px #9554b3;
        }
        to {
          text-shadow: 0 0 20px #eeeeee, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
        }
      }
    </style>
  </head>
  <body>
    <h1 class="glow">W3DOCS</h1>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: table;
        background-color: black;
      }
      .container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      .glow {
        color: #fb4264;
        font-size: 9vw;
        line-height: 9vw;
        text-shadow: 0 0 3vw #f40a35;
      }
      .glow {
        animation: glow 1.2s ease infinite;
        -moz-animation: glow 1.2s ease infinite;
        -webkit-animation: glow 1.2s ease infinite;
      }
      @keyframes glow {
        0%,
        100% {
          text-shadow: 0 0 1vw #fa1c16, 0 0 3vw #fa1c16, 0 0 10vw #fa1c16, 0 0 10vw #fa1c16, 0 0 0.4vw #fed128, 0.5vw 0.5vw 0.1vw #806914;
          color: #fed128;
        }
        50% {
          text-shadow: 0 0 0.5vw #800e0b, 0 0 1.5vw #800e0b, 0 0 5vw #800e0b, 0 0 5vw #800e0b, 0 0 0.2vw #800e0b, 0.5vw 0.5vw 0.1vw #40340a;
          color: #806914;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="glow">W3DOCS</div>
    </div>
  </body>
</html>

Essayez-vous-même!