Effet de texte à contours multiples en CSS

 (yuanchuan.dev)
1 points par GN⁺ 1 시간 전 | 1 commentaires | Partager sur WhatsApp
  • La propriété CSS text-stroke n’accepte qu’une seule valeur, mais il est possible de créer un effet de texte rétro à contours multiples en superposant plusieurs calques du même caractère et en attribuant à chacun une épaisseur de contour et une couleur différentes
  • En s’inspirant de l’effet typographique de Graphic Japan : from woodblock and zen to manga and kawaii, on obtient un résultat plus proche en définissant des text-stroke-width différents sur plusieurs éléments
  • En combinant text-stroke-width, text-stroke-color et z-index pour chaque calque, on contrôle l’ordre et la couleur des contours, tout en conservant la forme originale du caractère même lorsque l’épaisseur augmente
  • Le rendu varie selon les navigateurs : Firefox paraît plus lisse que Chrome et Safari, et si l’on place plusieurs caractères sur une seule ligne, leurs formes fusionnent entre elles
  • Le résultat dépend fortement de la police choisie et un grand font-size peut provoquer du scintillement ; c’est acceptable pour l’expérimentation ou la génération d’images avec css-doodle, mais peu adapté à un usage en production

Méthode de mise en œuvre

-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
  • En attribuant une couleur différente à chaque calque et en les superposant dans l’ordre voulu, on peut contrôler la couleur et l’ordre des contours
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);

Rendu et limites

  • Firefox offre un rendu plus lisse que Chrome et Safari
  • Si plusieurs caractères sont placés sur une seule ligne, leurs formes fusionnent entre elles
@content: '秋收冬藏';
  • Pour tester rapidement différentes polices, une fonction @google-font a été ajoutée afin d’accélérer le chargement des polices
font-family: @google-font(Matemasie);
@content: 'b';

font-family: @google-font(Tangerine);
@content: 'Love';

font-family: @google-font('Cherry Bomb One');
@content: '+';
  • Les performances ne sont pas aussi bonnes qu’avec les filtres CSS et, en particulier, du scintillement peut apparaître à mesure que le font-size augmente
  • D’autres exemples ont été générés avec css-doodle, et le CodePen du premier exemple est disponible à l’adresse https://codepen.io/yuanchuan/pen/ogzarGo

À lire aussi

1 commentaires

 
GN⁺ 1 시간 전
Commentaires sur Hacker News

  • Cet article a été réalisé par l’auteur de css-doodle avec css-doodle. Ce composant web permet d’insérer directement dans le HTML une variante de la syntaxe CSS utilisée sur le blog
    Un exemple ressemble à ceci :
    @grid: 15 / 90%;
    border-radius: 50%;
    background: hsl(@t(/20), 70%, 60%);
    scale: sin(@atan2(@dx, @dy) + @ts);
    Aucun JavaScript n’est nécessaire en dehors du chargement de la définition du composant, et cela fonctionne avec du HTML classique, du Markdown, des frameworks, etc.
    https://css-doodle.com/

    • Merci pour l’explication. Depuis que j’ai quitté le frontend en 2018, je ne sais presque plus ce que CSS est capable de faire aujourd’hui
      Une bonne partie du CSS de cette page ressemble à du code chiffré pour moi. À une époque où tant de styles sont standardisés, bravo à l’auteur pour avoir publié quelque chose de nouveau et de cool

  • Je me demande pourquoi le moteur de rendu CSS de Firefox semble privilégier un traitement plus lisse. L’implémentation paraît radicalement différente, mais c’est peut-être simplement dû à un cas limite du rendu

    • L’expansion du trait est un sujet complexe, et il n’existe pas une seule réponse raisonnable ; il y a des préférences subjectives, d’innombrables cas limites et aussi de mauvaises réponses
      Firefox a choisi d’étendre en se basant sur la distance en tout point, ce qui est une réponse raisonnable parmi d’autres, et probablement l’approche la plus générale. C’est pourquoi une cusp pointue devient une courbe lors de l’expansion
      Les autres navigateurs ont choisi de préserver la cusp, ce qui peut aussi être raisonnable et semble bien moins coûteux en calcul. Mais si l’on étend au-delà de la taille du détail, c’est-à-dire de la distance entre les nœuds, les cas dégénérés se multiplient, si bien qu’au quatrième anneau rouge cela paraît clairement faux
      box-shadow est un autre cas où une expansion se produit. C’est le quatrième paramètre de longueur, le spread distance. Si le coin est en cusp, le coin de l’ombre l’est aussi ; s’il est arrondi, le coin de l’ombre l’est également. On trouve un schéma utile sur https://drafts.csswg.org/css-backgrounds/#shadow-shape
      Avec une petite astuce, en mettant 0.1px border-radius, la boîte paraît toujours carrée mais l’ombre étendue devient courbe. C’est parfois utile. Pour revenir au sujet de l’article d’origine, utiliser une police avec une courbure infime à la place de nœuds en cusp rapprocherait aussi Chromium/Safari du rendu de Firefox
    • Je n’aime pas totalement l’effet arrondi de Firefox, mais l’interprétation de Chrome crée des fausses pointes saillantes, ce qui donne juste l’impression que c’est faux
      Intuitivement, on s’attendrait à ce qu’un contour en forme d’étoile se rapproche d’un hexagone ordinaire, mais aucun navigateur n’y parvient
    • miter join correspond à Safari, round join à Chrome
    • Firefox ressemble à un SDF. On dirait un rendu basé sur la distance minimale jusqu’à l’objet ; côté Chrome, je ne vois pas bien ce que c’est
    • Le rendu de Firefox ressemble exactement à ce qu’on attendrait d’un résultat SDF de ce caractère découpé par paliers
      Les coins arrondis de la première couche seraient tous à la même distance du coin le plus proche du caractère d’origine

  • J’aime beaucoup le design de ce blog. Il est simple, clair et centré sur le contenu

    • Oui. Il y a beaucoup d’articles qui montrent clairement CSS/SVG/canvas
      La série Daily Sketch ou CSS Animation with offset-path sont tout aussi intéressants

  • C’est en lisant cet article que j’ai découvert https://css-doodle.com pour la première fois
    Il y a quelques mois, je faisais quelque chose de similaire avec l’API HTML Canvas, mais je ne savais pas qu’on pouvait aussi s’amuser avec ce genre de petits projets en CSS. J’adore

  • J’ai essayé de remplacer le fiddle par le logo Apple et ses couleurs, et le premier anneau mange une partie de la pomme. Le haut de la pomme est coupé, et je me demande si quelqu’un sait pourquoi
    --c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
    @content: '';

  • Je me demande quelle est la meilleure façon de créer un texte à double contour sans utiliser de caractères Unicode fantaisie, tout en conservant le rendu recommandé par la police
    Pour l’instant, j’utilise des caractères fantaisie sur my blog, mais cela nuit aux résultats de recherche. Je suis en train de migrer le blog de HTML manuel vers 11ty, donc j’aimerais en profiter pour l’améliorer aussi
    Au passage, je serais également preneur d’avis sur le design actuel du blog

  • C’est cool. Dommage simplement que les différences de rendu entre navigateurs soient aussi marquées
    Je me demande si quelqu’un a essayé la même chose avec des ombres. On pourrait probablement aussi les empiler

    • Pour créer le contour, il faudrait diffuser les ombres de manière circulaire, donc la forme globale finirait par converger vers un cercle et ne suivrait presque plus la forme des lettres

  • La toute première chose à laquelle j’ai pensé, c’était de mettre un emoji dans content. Mais je n’ai obtenu qu’un carré de caractère inconnu. Je crois que j’attendais quelque chose de magique

    • Chez moi, l’emoji s’affichait bien, mais sans aucun effet de contour : on ne voyait que l’emoji brut
    • Ça fonctionne avec la police Noto Emoji