CSSの多重アウトラインテキスト効果

 (yuanchuan.dev)
1 ポイント 投稿者 GN⁺ 1 시간 전 | 1件のコメント | WhatsAppで共有
  • CSS text-stroke は単一の値しか受け取れないが、同じ文字を複数のレイヤーとして重ね、各レイヤーの アウトラインの太さ と色を変えて指定すると、レトロ風の多重アウトラインテキスト効果を作れる
  • Graphic Japan : from woodblock and zen to manga and kawaii のテキスト効果を参考に、複数要素の text-stroke-width をそれぞれ変えて指定すると、より近い結果になる
  • レイヤーごとの text-stroke-width、text-stroke-color、z-index を組み合わせて、アウトラインの順序と色を制御でき、太さが増しても元の文字の形は維持される
  • ブラウザごとにレンダリング結果が異なり、Chrome と Safari よりも Firefox の方がより滑らかに見え、複数の文字を1行に入れると文字の形が互いに結合される
  • 結果は選んだ フォント に大きく左右され、大きな font-size ではちらつきが見えることがあるため、実験や css-doodle での画像生成には向いているが、本番利用には適していない

実装方法

-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
  • レイヤーごとに異なる色を与え、望む順序で重ねれば、アウトラインの色と順序を制御できる
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);

レンダリングと限界

  • Chrome や Safari より Firefox の方がより滑らかなレンダリングを提供する
  • 複数の文字を1行に入れると文字の形が互いに結合される
@content: '秋収冬蔵';
  • さまざまなフォントを素早く試すために @google-font 関数を追加し、フォント読み込みを高速化した
font-family: @google-font(Matemasie);
@content: 'b';

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

font-family: @google-font('Cherry Bomb One');
@content: '+';
  • パフォーマンスは CSS フィルターほど良くなく、特に font-size が大きくなるほどちらつきが見えることがある
  • 追加の例は css-doodle で生成されており、最初の例の CodePen は https://codepen.io/yuanchuan/pen/ogzarGo で確認できる

関連記事

1件のコメント

 
GN⁺ 1 시간 전
Hacker Newsのコメント

  • この記事は css-doodle の作者が css-doodle で作ったもの。これは、ブログで使っている CSS の派生構文を HTML の中にそのまま書けるようにするウェブコンポーネント。
    例はこんな感じ。
    @grid: 15 / 90%;
    border-radius: 50%;
    background: hsl(@t(/20), 70%, 60%);
    scale: sin(@atan2(@dx, @dy) + @ts);
    コンポーネント定義を読み込む以外に JavaScript は不要で、通常の HTML、Markdown、フレームワークなどでも動作する。
    https://css-doodle.com/

    • 説明ありがとう。2018年にフロントエンドの仕事を離れてから、CSS が今では何をできるのかほとんど分からなくなっている。
      このページの CSS のかなりの部分は、自分には暗号のように見える。標準化されたスタイルが多い時代に、新しくて格好いいものを出してくれた作者に拍手を送りたい

  • Firefox の CSS レンダリングエンジン が、なぜ滑らかに処理する側を好むのか気になる。実装が劇的に違って見えるが、レンダリングの境界ケースだからそう見えるだけなのかもしれない

    • ストロークの拡張 は複雑な話題で、妥当な結果が一つだけあるわけでもなく、主観的な好みや多数の境界ケース、誤った答えが入り混じっている。
      Firefox はすべての点で距離に基づいて拡張することを選んでいて、これは妥当な答えの一つであり、おそらく最も一般的な方法でもある。だから鋭い cusp が曲線として拡張される。
      他のブラウザは cusp を維持することを選んでいて、これも妥当かもしれないし、計算コストもずっと低いと思う。ただし、特徴量の大きさ、つまりノード間の距離より大きく拡張すると退化ケースが多くなり、4本目の赤いリングあたりでは明らかにおかしく見える。
      box-shadow も拡張が起きる別のケース。4つ目の長さの値である spread distance がそれに当たる。角が cusp なら影の角も cusp になり、丸ければ影の角も丸くなる。参考になる図は https://drafts.csswg.org/css-backgrounds/#shadow-shape にある。
      ちょっとしたコツとして 0.1px border-radius を与えると、ボックス自体はまだ四角く見えるのに、拡張された影は曲線になる。たまに便利。元の記事に戻ると、cusp ノードの代わりにごくわずかな曲線を持つフォントを使えば、Chromium/Safari でも Firefox により近い見た目になるはず
    • Firefox の丸みのある効果は完全には好きではないが、Chrome の解釈は 偽の鋭い突起 を作ってしまっていて、単純に間違っているように感じる。
      直感的には、星形のアウトラインは普通の六角形に近づいていくはずだと思うが、どのブラウザもそれは実現できていない
    • miter join は Safari、round join は Chrome のほう
    • Firefox は SDF のように見える。オブジェクトまでの最短距離に基づくレンダリングのようで、Chrome 側が何なのかはよく分からない
    • Firefox 側は、その文字の SDF 結果を段階的に切り出したときに期待される見た目と、まさに一致しているように見える。
      最初のレイヤーの丸い角は、どれも元の文字の最も近い角から同じ距離にあるはず

  • このブログのデザインは本当に良い。シンプルで明快、そしてコンテンツ優先 だ

    • その通り。CSS/SVG/canvas を分かりやすく見せる記事が多い。
      Daily Sketch シリーズや CSS Animation with offset-path も同じくらい面白い

  • この記事を読んで https://css-doodle.com を初めて知った。
    数か月前には HTML Canvas API で似たようなことをしていたが、CSS でもこんな楽しい小作品が作れるとは知らなかった。とても気に入った

  • fiddle を Apple ロゴと色 に変えてみたら、最初のリングがリンゴの一部を食べてしまった。リンゴの上部が切れてしまうが、なぜなのか分かる人はいるだろうか。
    --c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
    @content: '';

  • 派手な Unicode 文字を使わず、それでいてフォントが推奨する表示を保ったまま 二重アウトラインテキスト を作る最善の方法が気になる。
    今は my blog で派手な文字を使っているが、検索結果には悪影響がある。手書きの HTML から 11ty にブログを移行中なので、そのついでにブログも改善したい。
    ついでに今のブログデザインについての意見ももらえたらうれしい

  • すごい。ただ、ブラウザごとの レンダリング差 が大きすぎるのは残念。
    同じことを影でも試したのか気になる。影も積み重ねられそうだから

    • アウトラインを作るには影を円形に広げる必要があるので、全体の形は結局だいたい 円に収束 してしまい、文字の形はほとんど追わなくなる

  • 真っ先に思いついたのは content に 絵文字 を入れることだった。ところが、謎の文字の四角形しか出なかった。魔法みたいなものを期待していたのかもしれない

    • 自分の環境では絵文字自体はレンダリングされたけれど、アウトライン効果はまったくなく、ただ素の絵文字が表示されるだけだった
    • フォントに Noto Emoji を使えば動く