CSSによるマルチストロークテキストエフェクト

#Tech

CSSの`text-stroke`プロパティでレトロなマルチストロークテキストエフェクトを再現しようとした際、単一値しか受け付けないため、要素を重ねて調整する必要があった。

各レイヤーで`text-stroke-width`を変化させることで、より本物に近い表現を実現できる。

異なるブラウザ間でのレンダリングに差があり、フォントの種類によっても結果が大きく左右される。

パフォーマンスはCSSフィルタと同程度と悪く、実用的な利用には向かないが、実験や画像生成には適している。

原文の冒頭を表示(英語・3段落のみ)

I used to see that retro multi-stroke text effect quite often and

tried to replicate it using the CSS text-stroke property,

but the results never quite matched.

※ 著作権に配慮し、引用は冒頭3段落までです。続きは元記事をご覧ください。

元記事を読む ↗