Un exemple de comment créer un texte éclatant

Source Code: (back to article)

<!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>