Comment Créer un Effet du Fondu Sortant de Texte avec CSS

L’utilisation de certains effets pour vos textes rend votre site Web plus attrayant et intéressant. Toutefois, l’unicité et la créativité de ces effets sont également importantes. En lisant ce snippet, vous apprendrez à créer un effet très imaginatif et à donner à votre site Web un style original.

1. Créez HTML

Mettez votre texte dans une balise HTML <h1>.

<h1>La nature</h1>

2. Ajoutez CSS

Tout d’abord, nous allons styliser la balise HTML <body>.

  • Utilisez la propriété CSS margin, qui crée de l’espace autour de l’élément.
  • Placez votre image de fond à l’aide de la propriété CSS background-image en utilisant la valeur “url”.
  • Définissez la taille de l’image de fond en utilisant la propriété CSS background-size.
body {
  margin: 0;
  background: url("https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg");
  background-size: 160%;
}

Maintenant, travaillons avec le texte.

  • Positionnez le texte à l’aide de la propriété CSS position et de certaines de ses propriétés de décalage, comme top, right, bottom, et left.
  • Mettez la propriété CSS transform, qui spécifie la transformation bidimensionnelle ou tridimensionnelle de l’élément, en utilisant la valeur “translate” pour traduire le texte par un vecteur [tx, ty].
  • Utilisez la propriété CSS margin, qui crée de l’espace autour du texte.
  • Mettez la propriété CSS padding, qui crée de l’espace autour du contenu de l’élément.
  • Choisissez la taille et la police en utilisant les propriétés CSS font-size et font-family.
  • À l'aide de la propriété CSS color donnez à votre texte la couleur que vous préférez.
  • Vous pouvez styliser votre texte à l’aide d’une des valeurs de la propriété CSS text-transform.
  • Utilisez la propriété CSS transition-duration, pour spécifier la durée de l’animation de la transition du texte.
  • Mettez la propriété CSS background-clip, qui spécifie à quelle distance les background-color et background-image doivent être de l'élément, et choisissez la valeur “text”, où l'arrière-plan est dessiné dans le texte au premier plan.
h1 {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  font-size: 100px;
  font-family: Noto, serif;
  color: #fff;
  text-shadow: 2px 2px #000000;
  text-transform: uppercase;
  transition-duration: 1s;
  -webkit-background-clip: text;
}

La dernière étape se fait à l’aide de la pseudo class CSS :hover, qui sélectionnera et stylisera le texte survolé.

  • Utilisez la propriété CSS letter-spacing pour définir les espaces entre les lettres dans votre texte.
h1:hover {
  letter-spacing: 10px;
}

Enfin, on peut rassembler toutes les parties et essayer quelques exemples.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        margin: 0;
        background: url("https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg");
        background-size: 160%;
      }
      h1 {
        position: absolute;
        bottom: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        font-size: 100px;
        font-family: Noto, serif;
        color: #fff;
        text-shadow: 2px 2px #000000;
        text-transform: uppercase;
        transition-duration: 1s;
        -webkit-background-clip: text;
      }
      h1:hover {
        letter-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Nature</h1>
  </body>
</html>

Si vous voulez que votre texte soit plus beau, vous pouvez le rendre transparent à l’aide des propriétés CSS filter et opacity.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: url("https://dbjz9ypka0tyx.cloudfront.net/app/uploads/2019/04/29135054/img-visual-01.jpg");
        background-size: 230%;
      }
      h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        font-size: 100px;
        color: #ffffff;
        text-shadow: 2px 2px #f4a460;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        text-transform: uppercase;
        transition: 0.5s;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -webkit-background-clip: text;
      }
      h1:hover {
        letter-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Fashion</h1>
  </body>
</html>