text-shadowプロパティの概要
| 文字に影をつけるCSS | ||
| text-shadow | ||
| 目的 | 文字に影をつける。ボックスそのものについてはbox-shadowを用いる。 | |
| 使用 | <span> | |
| 関連 | box-shadow | |
| 初期 | text-shadow : none | |
この文字に影をつける | ||
<span style="font-size: 30px; text-shadow: 3px 3px 2px #444444;">この文字に影をつける</span> | ||
値
text-shadow: 水平方向 垂直方向 ぼかし半径 色
| 水平方向 | この文字に影をつける |
| text-shadow: 5px 0px 2px #444444; | |
| 垂直方向 | この文字に影をつける |
| text-shadow: 0px 5px 2px #444444; | |
| ぼかし半径 | この文字に影をつける |
| text-shadow: 0px 0px 5px #444444; | |
| 水平方向+ 垂直方向+ ぼかし半径 | この文字に影をつける |
| text-shadow: 5px 5px 2px #444444; | |
| 水平方向+ 垂直方向+ぼかし半径※マイナスに指定 | この文字に影をつける |
| text-shadow: -5px -5px 2px #444444; |
text-shadowを使ったデザイン
文字や画像に影をつける
文字や画像に影をつける コピペで使えるHTML+CSS
影を描くCSSプロパティにはテキスト向けのtext-shadowと要素全体に対して適用されるbox-shadowがあります。このページでは２つが、どう違うのかを比較しやすい具体例を出しながら適用方法について解説します。
programming-cafe.com