Propriété text-stroke

La propriété text-stroke définit la couleur et l'épaisseur du contour des caractères de texte ou son contour. En tant que valeur, la propriété doit recevoir l'épaisseur du contour et, séparés par un espace, la couleur du contour.

Syntaxe

csssélecteur {
  text-stroke: épaisseur_du_contour et sa_couleur;
}

Exemple de base

Contour de texte simple :

html<div class="stroked-text">
  Lorem ipsum dolor sit amet
</div>

css.stroked-text {
  font-size: 48px;
  font-weight: bold;
  -webkit-text-stroke: 2px red;
  text-stroke: 2px red;
}

Результат:

Contour uniquement

Maintenant, faisons en sorte que la couleur du texte corresponde à la couleur de fond (dans notre cas, blanc). Il ne restera que le contour :

html<div class="stroked-text">
  Lorem ipsum dolor sit amet
</div>

css.stroked-text {
  font-size: 48px;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 2px black;
  text-stroke: 2px black;
}

Результат:

Contour avec dégradé

Créons un contour dégradé à l'aide de la propriété background-clip :

html<div class="gradient-stroke">
  Lorem ipsum dolor sit amet
</div>

css.gradient-stroke {
  font-size: 42px;
  font-weight: bold;
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #333;
  text-stroke: 1px #333;
}

Результат:

Contour multiple

Effet de double contour à l'aide de text-shadow :

html<div class="double-stroke">
  Lorem ipsum dolor sit amet
</div>

css.double-stroke {
  font-size: 40px;
  color: white;
  -webkit-text-stroke: 3px #000;
  text-stroke: 3px #000;
  text-shadow: 
    0 0 5px #000,
    0 0 10px #000;
}

Результат:

Contour animé

Ajoutons une animation de changement de contour :

html<div class="animated-stroke">
  Lorem ipsum dolor sit amet
</div>

css.animated-stroke {
  font-size: 38px;
  color: white;
  -webkit-text-stroke: 1px #ff0000;
  text-stroke: 1px #ff0000;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
  50% { -webkit-text-stroke: 3px #ff0000; text-stroke: 3px #ff0000; }
  100% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
}

Результат:

Voir aussi