Catégories
Astuces et Design

Stroke Text CSS: 📕 Le guide définitif

Dans ce tutoriel, je vais vous montrer comment créer le texte de trait CSS effet.

Avant d'entrer dans le code HTML et CSS, si vous avez seulement besoin de créer une image de texte de trait, consultez ce didacticiel et apprenez à décrire le texte dans Photoshop.

Ou, si vous n’avez pas Photoshop, vous pouvez utiliser l’outil en ligne gratuit MockoFun qui propose même un didacticiel dédié au texte de trait.

Texte avec bordure

Alors, comment ajouter du texte de trait ou du texte de contour en CSS et HTML?

Il y a en fait plus d'une façon de le faire, et comme je voudrais que ce soit un guide définitif, je vais passer en revue toutes les méthodes avec des exemples et du code source. Je vais vous montrer comment ajouter un contour de couleur au texte Web en utilisant CSS.

Commençons!

Ajouter un trait au texte à l'aide de CSS -webkit-text-stroke

Texte de trait CSS

À titre d’exemple, ajoutons un trait noir à un texte. Je vais commencer par du code HTML:

STROKE TEXT

Et le code CSS:

.stroke-text{
  -webkit-text-stroke:5px black;
  -webkit-text-fill-color:transparent;
}

Voir le Pen CSS Stroke Text Using -webkit-text-stroke par Ion Emil Negoita (@inegoita) sur CodePen.16997

Assez simple, nous rendons le texte transparent Рbien que ce ne soit pas n̩cessaire, mais je veux seulement que le contour du texte soit visible et non le corps des lettres. Puis le -webkit-text-stroke La propri̩t̩ ajoute un contour noir de 5px d'̩paisseur. Vous pouvez modifier cela pour obtenir un texte de contour plus ̩pais ou un contour plus fin, selon l'effet que vous souhaitez obtenir.

La bonne nouvelle:

Vous pouvez l'utiliser pour tracer du texte en CSS sur tous les navigateurs Webkit (comme Chrome ou Edge) et Firefox également.

Les mauvaises nouvelles:

C'est un non standard fonctionnalité, donc pas quelque chose que vous pouvez compter à 100%.

Elle n'est pas prise en charge sur tous les navigateurs et selon CanIUse.com: cette propriété n'apparaît encore dans aucune spécification W3C. A été brièvement inclus dans une spécification en tant que text-outline propriété, mais cela a été supprimé.

Juste pour vous donner un aperçu de ce que vous pouvez créer avec cette propriété CSS de trait de texte, voici mon effet de texte Cyber ​​Space dans la galerie d'effets de texte des polices des années 80.

Texte de trait de police des années 80

Ajout d'un trait au texte à l'aide de text-shadow

Une autre méthode pour décrire le texte en CSS consiste à utiliser des ombres. CSS permet d'ajouter plusieurs ombres à un élément de texte via la propriété text-shadow.

Alors, faisons un texte blanc sur blanc et ajoutons-y 4 ombres rouges. Décalez les 4 ombres de 1px vers le haut, la gauche, le bas et la droite. Voici le code HTML:

STROKE TEXT

et le code CSS:

.stroke-text{
  color:white;
  text-shadow:1px 0 0 red,0 1px 0 red,-1px 0 0 red,0 -1px 0 red;
}

Voici une représentation graphique de ce qui se passe et de la manière dont l'effet de trait de texte CSS est obtenu à l'aide d'ombres de texte:

Trait de texte CSS à l'aide de l'ombre

Parfait, non?

Enfin, pas exactement, mais vraiment très bien. Soulignons quelques inconvénients et solutions pour cela.

Premièrement, si nous devons modifier l'épaisseur ou la couleur du contour du texte, nous devons le changer à plusieurs endroits, ce qui peut être fastidieux.

CSS nous offre une solution assez élégante que j'utilise assez souvent pour plus de commodité et qui est Variables CSS. Vous pouvez en savoir plus sur les variables CSS ici, mais ce que vous devez savoir, c'est que si vous devez répéter les valeurs encore et encore dans votre CSS, les variables CSS sont d'une aide précieuse.

Utilisation de variables CSS pour configurer la couleur et l'épaisseur du trait de texte

En gros, vous définissez une variable CSS comme celle-ci: --my-variable:value. Ensuite, tout au long de votre code CSS si vous avez besoin de cette valeur, utilisez simplement property:var(--my-variable);

Alors, changez le code CSS ci-dessus comme ceci:

.stroke-text{
  --stroke-color:red;
  --stroke-width:1px;
  color:white;
  text-shadow: var(--stroke-width)  0 0 var(--stroke-color),
    calc(var(--stroke-width) * -1) 0 0 var(--stroke-color),
    0 var(--stroke-width) 0 var(--stroke-color),
    0 calc(var(--stroke-width) * -1) 0 var(--stroke-color);
}

le --stroke-color variable stocke la couleur du trait de texte et --stroke-width stocke la largeur du trait. Ensuite, dans l'ombre du texte, nous utilisons ces variables. Cela permet d'apporter des modifications à un seul endroit si nous devions modifier la couleur ou la largeur du trait de texte.

Assez chouette, non?

dans le text-shadow propriété, j'ai utilisé le CSS calc pour me permettre de multiplier la largeur du trait du texte par -1 pour les directions de l'ombre vers le haut et vers la gauche.

Si vous commencez à jouer avec cela et que vous modifiez l'épaisseur du trait de texte, vous remarquerez que pour des valeurs plus grandes, quelque chose ne va pas au coin des lettres.

Et nous arrivons donc à notre deuxième inconvénient:

Texte de trait CSS

Nous voyons des coupures dans le trait de texte car nous n'utilisons que 4 ombres que nous décalons sur 4 directions.

Alors, que devons-nous faire pour résoudre ce problème?

La réponse est simple: ajoutez plus d'ombres!

Accrochez-vous à vos enfants et sortez vos cahiers de mathématiques. Il s'agit d'un «guide définitif du texte de trait» après tout, nous devons donc être minutieux.

Si nous ajoutons plus d'ombres à notre texte, nous devons trouver comment déplacer ces ombres autour de notre texte pour couvrir toutes les lacunes dans le contour du texte. L'intuition dit que nous devons les répartir uniformément sur un cercle avec un rayon égal à la largeur du trait de texte.

Et, l'intuition a raison!

Pour calculer les décalages des ombres, nous utilisons les formules de coordonnées polaires:

x = r * cos(alpha)
y = r * sin(alpha)

Où x et y sont les valeurs de décalage, r est le rayon du cercle (valeur réelle que nous voulons décaler qui se traduit par l'épaisseur du trait de texte) et alpha est l'angle selon lequel nous voulons diviser le cercle.

Nous pouvons attribuer des valeurs à alpha en fonction du nombre d'ombres que nous voulons ajouter pour créer notre trait de texte.

Par exemple, pour 8 ombres, nous divisons 2 * PI (le cercle complet) par 8 et nous obtenons un angle de PI / 4. Ensuite, si nous attribuons des valeurs à alpha avec un pas de PI / 4 comme 0, PI / 4, PI / 2,… jusqu'à ce que nous complétions le cercle, nous devrions obtenir nos 8 décalages d'ombres parfaitement alignés sur un cercle.

Texte de trait CSS

Plus nous ajoutons d'ombres, plus le trait de texte CSS devient lisse pour des valeurs plus grandes de la largeur du trait. Il n'y a pas encore de fonction trigonométrique dans CSS, nous devons donc calculer les valeurs nous-mêmes.

Modifions le code HTML et CSS pour ajouter un trait de texte fluide avec 16 ombres:

STROKE TEXT

et ajoutez le CSS pour le trait de texte lisse:

.smooth-16 {
  text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0
      var(--stroke-color);
}

Pour plus de commodité, j'ai créé une fonction JS qui génère le code CSS du texte de trait en fonction du nombre d'ombres que vous souhaitez avoir. Voici le code:

/*
text-shadow from smooth-16 was created with steps = 16
*/
function calculateStrokeTextCSS(steps) {
  var css = "";
  for (var i = 0; i < steps; i++) {
    var angle = (i * 2 * Math.PI) / steps;
    var cos = Math.round(10000 * Math.cos(angle)) / 10000;
    var sin = Math.round(10000 * Math.sin(angle)) / 10000;
    css +=
      "calc(var(--stroke-width) * " +
      cos +
      ") calc(var(--stroke-width) * " +
      sin +
      ") 0 var(--stroke-color),";
  }

  return css;
}

Exécutez cette fonction avec steps=16 et vous obtiendrez la valeur CSS pour le text-shadow propriété. Veuillez noter que ce code JS ne doit pas nécessairement faire partie de la page où vous affichez le texte du trait CSS. Voici l'extrait de code Codepen avec lequel vous pouvez jouer avec le code:

Voir le Pen CSS Stroke Text Using text-shadow par Ion Emil Negoita (@inegoita) sur CodePen.16997

Nous avons maintenant deux méthodes parfaitement valides pour créer du texte de trait CSS, mais comme il s'agit d'un guide définitif Je ne m'arrêterai pas ici et je vais vous montrer quelques alternatives supplémentaires pour créer un contour de texte avec des ombres CSS.

CONSEIL RAPIDE: Cette même méthode fonctionne pour créer des images de contour à partir d'images PNG par exemple.

Ajouter un trait au texte à l'aide de filtres CSS SVG

Si vous ne connaissez pas les filtres SVG ou ce que vous pouvez en faire, je vous suggère fortement de lire cet article sur les polices des années 80 et les effets rétro de texte de filtre SVG. ATTENTION: préparez-vous à être surpris 😎

En gros, vous pouvez définir des filtres SVG que vous pouvez ensuite utiliser en CSS avec le filter propriété. Dans l’un de mes articles récents, j’ai beaucoup utilisé les filtres CSS pour créer des effets d’image CSS. Mais, dans notre cas, nous utiliserons des filtres SVG / CSS pour ajouter un trait à un texte.

Voici le code HTML avec la définition du filtre SVG:

STROKE TEXT


  
    
      
      
    
  

et le code CSS:

.stroke-text{
  color:dodgerblue;
  filter:url(#stroke-text-svg-filter);
}

qui rend un texte bleu comme celui-ci:

Texte de contour CSS

Donc comment ça fonctionne?

Eh bien, le stroke-text-svg-filter Le filtre SVG que nous appliquons à notre texte comporte deux étapes:

  • feMorphology avec dilate prend le texte d'origine et «dilate» ou agrandit le texte dans toutes les directions par un radius de 2 pixels
  • feComposite avec le operator="xor" effectue une opération XOR qui soustrait réellement du texte agrandi le texte original, de sorte que nous nous retrouvons avec un texte creux ou un texte encadré

Modifiez l'épaisseur du trait de texte, vous devez modifier le radius attribut dans le filtre SVG. Pour changer la couleur du trait de texte, changez simplement le color Propriété CSS dans le stroke-text classe.

Ce filtre SVG fonctionne également pour les images PNG.

Le seul inconvénient de cette méthode d'ajout de trait au texte est que le résultat final semble un peu grossier pour des valeurs plus grandes du radius. C'est parce que l'algorithme de dilatation essaie d'étendre les lettres dans toutes les directions, ce qui signifie qu'il pourrait ne pas rendre un vrai contour qui devrait être de taille égale dans toutes les directions.

Voici le Codepen pour ajouter un contour au texte avec des filtres SVG:

Voir le texte de trait CSS du stylet utilisant des filtres SVG par Ion Emil Negoita (@inegoita) sur CodePen.16997

Contour de texte SVG

Outre les filtres SVG, nous pouvons créer le contour du texte en utilisant du texte SVG et du CSS spécifique pour SVG.

Bien que ce ne soit pas exactement une solution HTML et CSS uniquement, cette solution crée probablement le meilleur effet de contour de texte.

SVG Stroke Text CSS

Pour créer un plan de texte avec SVG et CSS, voici le code SVG que vous ajoutez dans votre page HTML:


  SVG STROKE TEXT

et le code CSS:

.stroke-text{
  font-size:100px;
  text-align:center;
  text-anchor:middle;
  stroke:dodgerblue;
  stroke-width:3px;
  fill:none;
}

Pour parcourir rapidement le code, le texte SVG STROKE TEXT est ajouté en tant que texte SVG juste au milieu de l'objet SVG (donc les 50% définis pour le x et y).

Le code CSS qui contrôle réellement la couleur et la largeur du trait de texte ou du contour du texte sont les 2 propriétés CSS stroke et stroke-width. Veuillez noter que ces propriétés ne fonctionneront que sur les éléments SVG et PAS sur les éléments HTML.

Voir le contour du texte SVG du stylo par Ion Emil Negoita (@inegoita) sur CodePen.16997

Pour créer l'effet de trait de texte multiple, ajoutez simplement quelques éléments, décalez-les un peu et changez stroke Couleur.

Créer un effet de police à double contour ou un effet de police à contour multiple avec un trait SVG

Pendant que vous y êtes, vous devez savoir que cela peut également créer un effet de police de contour double ou multiple vraiment cool avec juste quelques modifications au code ci-dessus.

Police de contour double

Ajoutez simplement plusieurs text éléments dans le SVG avec différents stroke valeurs dans le CSS. Veillez à commencer par le trait le plus épais et à continuer avec des valeurs de trait de plus en plus fines, car les éléments de texte seront placés les uns sur les autres pour former l'effet de police de contour multiple.

Voici le code HTML pour l'effet de police double et l'effet de police multiple:


  DOUBLE OUTLINE FONT
  DOUBLE OUTLINE FONT



  MULTIPLE OUTLINE FONT
  MULTIPLE OUTLINE FONT
  MULTIPLE OUTLINE FONT

Comme vous le voyez, j’ai ajouté chaque effet dans son propre élément. Et le code CSS va comme ceci:

.stroke-text{
  font-size:80px;
  text-align:center;
  text-anchor:middle;
  stroke:dodgerblue;
  stroke-width:4px;
  fill:none;
}

.thick{
  stroke-width:8px;
}

.thicker{
  stroke-width:12px;
}

.color1{
  stroke:magenta;
}

.color2{
  stroke:yellow;
}

.color3{
  stroke:red;
}

Voir la police Pen Double Outline & Multiple Outline FontWith SVG Stroke par Ion Emil Negoita (@inegoita) sur CodePen.16997

Si vous avez atteint ce stade, félicitations! Vous êtes maintenant un Jedi de texte de trait CSS!

Vous voulez être un maître Jedi et tout savoir sur le texte de trait CSS? Continuer la lecture.

Contour du texte HTML5 Canvas

Je sais que je l'ai déjà dit, mais cet article se veut un guide définitif sur le texte des traits. C'est pourquoi j'ai décidé d'inclure TOUTES les méthodes de création de texte de trait ou de contour de texte en HTML, même sans CSS.

Oui, il est possible de créer du texte encadré à l'aide du canevas HMTL5.

Laissez-moi vous montrer comment faire!

Contour du texte HTML5 Canvas

Commençons par configurer le canevas avec le code HTML suivant:

Ensuite, en utilisant JavaScript, dessinons le texte décrit comme ceci:

var myCanvas = document.querySelector("#myCanvas");
var ctx = myCanvas.getContext("2d");

ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.font = "70px sans-serif";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.strokeText("CANVAS TEXT OUTLINE", myCanvas.width / 2, myCanvas.height / 2);

Les parties importantes ici sont les strokeStyle et lineWidth paramètres qui définissent la couleur et l'épaisseur du contour du texte. le strokeText() La fonction effectue le dessin réel du texte encadré.

Voici la feuille de calcul Codepen:

Voir le contour du texte du canevas HTML5 du stylo par Ion Emil Negoita (@inegoita) sur CodePen.16997

En conclusion

J'espère que vous avez trouvé cet article utile et digne d'être un véritable guide définitif du texte de trait en CSS et pas seulement. Vous connaissez maintenant plus d'une façon de créer du texte de trait ou du texte de contour en HTML, CSS et même en HTML5.

Si vous connaissez des méthodes alternatives pour créer du texte de trait en HTML et CSS, envoyez-moi un message et je serai heureux de l'inclure dans ce guide génial et définitif!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *