アウトライン→塗りつぶしテキスト
普段は輪郭線だけの中抜き文字で、マウスを乗せると内側に色がすっと入る上品なテキスト演出です。輪郭は -webkit-text-stroke で描き、塗りの部分は color: transparent で抜いています。
解説
普段は輪郭線だけの中抜き文字で、マウスを乗せると内側に色がすっと入る上品なテキスト演出です。輪郭は -webkit-text-stroke で描き、塗りの部分は color: transparent で抜いています。ホバー時に color を不透明な色へ transition で切り替えるだけのシンプルな構造なので、JavaScriptは不要です。動きが派手すぎず、落ち着いた印象を保てるのが特徴です。
相性のよい場面
- 雑誌のようなエディトリアル系サイトの大見出し
- ブランドサイトでさりげない反応を持たせたいタイトル
- ナビゲーションやメニューの強調したい項目
輪郭の太さは -webkit-text-stroke の数値、塗りの色は :hover 時の color で調整します。文字が太いほど中抜きがきれいに見えるため、font-weight は大きめが向いています。なお -webkit-text-stroke はプレフィックス付きですが主要ブラウザで広く動きます。タッチ操作の端末ではホバーが効かないため、塗りの状態を初期表示にするなど、別の見せ方を併せて用意しておくと親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
塗りが入るときの色を変えられますか？
変えられます。ホバー時に指定している color の値を好きな色にすれば、塗りつぶしの色が変わります。輪郭の色を決める text-stroke の色も別途調整できます。
スマートフォンでも反応しますか？
ホバーはマウス操作向けの効果のため、タッチ端末では塗りが入らないことがあります。スマホ重視なら、最初から塗りが入った状態を見せるなどの工夫を併用すると安心です。