text-shadow
text-shadow は水平オフセット、垂直オフセット、ぼかし半径、色を指定してテキストに影を付ける。複数の影をカンマ区切りで重ねることも可能。ネオン効果や浮き出し効果などの視覚的な演出に使われる。
概要
text-shadow は水平オフセット、垂直オフセット、ぼかし半径、色を指定してテキストに影を付ける。複数の影をカンマ区切りで重ねることも可能。ネオン効果や浮き出し効果などの視覚的な演出に使われる。
対応ブラウザ
デスクトップ
Chrome 2+
Edge 12+
Safari 1.1+
Firefox 3.5+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
/* 基本的な影 */
.shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* ネオン効果 */
.neon {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa;
}実務での使いどころ
-
視覚的なエフェクト
見出しやヒーローセクションのテキストにネオンや浮き出しなどの装飾効果を適用する。
-
画像上のテキスト可読性
背景画像の上にテキストを配置する際、影を付けてコントラストを確保し読みやすくする。
注意点
- 影を多用するとパフォーマンスに影響する場合がある。特にアニメーションとの組み合わせに注意。
- 影の色と背景色のコントラストが低いと効果が見えにくい。
アクセシビリティ
- テキストの可読性に影響しないよう、影の色と強さを適切に調整すること。過度な影はテキストをぼやけさせる。