text-shadow
text-shadow は CSS のプロパティで、テキストに影を追加します。文字列およびその装飾 (text-decoration) に適用される影のカンマで区切ったリストを受け入れます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 3.5 | 1.1 | 18 | 1 | |
注釈 4件
実装メモ
- Firefox 57 より前のバージョンには、色が指定された `text-shadow` から色が指定されていない `text-shadow` に遷移するときに `transition` が機能しないというバグがあります (バグ 726550)。
- Firefox 4 以降、パフォーマンス上の理由から、ぼかし半径は 300 に制限されています。
- Firefox は理論的には無限のテキストシャドウをサポートしています (試しないでください)。
- `<color>` 値が指定されていない場合、Firefox は要素の `color` プロパティの値を使用します。
注釈 2件
実装メモ
- Safari では、色を明示的に指定していない影は透明です。
- Safari 1.1 ～ 3.2 は、1 つのテキストシャドウのみをサポートします (カンマ区切りリストの最初のシャドウを表示し、残りは無視します)。 Safari 4.0 (WebKit 528) 以降では、複数のテキストシャドウがサポートされています。
注釈 2件
実装メモ
- Safari では、色を明示的に指定していない影は透明です。
- Safari iOS 1 および 2 は、1 つのテキストシャドウのみをサポートします (カンマ区切りリストの最初のシャドウを表示し、残りは無視します)。 Safari iOS 3 (WebKit 528) 以降では、複数のテキストシャドウがサポートされています。
基本構文
CSS
/* Basic shadow */
.shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* Neon Effect */
.neon {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa;
}ライブデモ
実務での使いどころ
-
視覚的なエフェクト
見出しやヒーローセクションのテキストにネオンや浮き出しなどの装飾効果を適用する。
-
画像上のテキスト可読性
背景画像の上にテキストを配置する際、影を付けてコントラストを確保し読みやすくする。
注意点
- 影を多用するとパフォーマンスに影響する場合がある。特にアニメーションとの組み合わせに注意。
- 影の色と背景色のコントラストが低いと効果が見えにくい。
アクセシビリティ
- テキストの可読性に影響しないよう、影の色と強さを適切に調整すること。過度な影はテキストをぼやけさせる。