5月6日、Yuan Chuanが「Multi-stroke text effect in CSS」と題した記事を公開した。この記事では、CSSのtext-strokeプロパティを使って複数の輪郭線を持つレトロなテキストエフェクトを実現する画期的な手法が紹介されている。
Web開発において、視覚的に魅力的なテキストエフェクトの需要は高まり続けている。特に、レトロブームやY2K美学の復活により、80年代・90年代風のグラフィック表現が再注目されている中、この発見は多くのデザイナーや開発者の関心を集めている。
偶然の発見から生まれた新手法
著者は以前からレトロな多重ストロークのテキストエフェクトに魅力を感じており、CSSのtext-strokeプロパティで再現を試みていたが、満足のいく結果を得られずにいた。text-strokeは単一の値しか受け付けないため、要素を重ねる方法しか思いつかなかったという。
転機は昨年の夜、「Graphic Japan : from woodblock and zen to manga and kawaii」という書籍でこのエフェクトを再び目にした時だった。要素を重ねる実験を続ける中で、偶然各レイヤーのtext-stroke-widthを変化させたところ、期待していた結果に近づいたのである。
実装の核心とメカニズム
基本的な実装はcss-doodle（CSS表現を効率化するWebコンポーネント）を使用して以下のように記述される：
--c: #cc0d55;
--n: @i(-1);
@grid: 36x1 / 240px;
@content: '✱';
position: absolute;
inset: 0;
font: 100px/0 sans-serif;
color: var(--c);
z-index: @I(-@i);
-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
仕組みは意外にシンプルだ。**text-stroke-widthに異なる値を設定すると、ブラウザが自動的に文字の輪郭を描画する**。ストローク幅が大きいほど輪郭は太くなるが、元の形状は維持される。次のステップで異なる色を設定し、適切な順序で配置することで、従来不可能だった多重輪郭エフェクトを実現している。
興味深いことに、ブラウザによって文字の輪郭描画が異なる。FirefoxはChromeやSafariよりもスムーズなレンダリングを提供するという。
フォント選択の重要性と実用例
最終的な結果は選択するフォントに大きく依存する。著者は異なるフォントでの実験を効率化するため、Google Fontsの高速読み込み機能も追加した。
font-family: @google-font(Matemasie);
@content: 'b';
font-family: @google-font('Cherry Bomb One');
@content: '+';
著者が提供する実例はCodePenで実際の動作を確認できる。複数の文字をインライン配置すると文字の形状が結合される現象も確認でき、クリエイティブな表現の幅をさらに広げている。
実用上の制約とパフォーマンス
ただし、この手法には重要な制約がある。パフォーマンスがCSSフィルターと同様に悪く、特にフォントサイズが大きくなるとちらつきが発生する。著者は実験や画像生成には適しているが、本番環境での使用には向かないと明確に警告している。
この制約は、視覚的魅力とパフォーマンスのトレードオフを示す典型例であり、Web開発における技術選択の重要性を改めて浮き彫りにしている。それでも、この発見はCSSの可能性を押し広げ、新しいクリエイティブ表現への道を開いたと言えるだろう。
詳細はMulti-stroke text effect in CSSを参照していただきたい。
