text-shadow - 文字に影をつける
- 対応ブラウザ
-
| 適用対象 | 全ての要素 |
| 継承 | しない |
text-shadowプロパティは、文字に影を付ける効果があります。当初Macのブラウザ「Safari」のみ対応していましたが、最新のバージョンでは他のブラウザでも実装が進んでいるようです。
影効果がボックスの大きさを変える事はありませんが、効果がボックスの領域外に及ぶ事はあります。
text-shadowに与えられる値
- text-shadow: none;
- 影効果を付けません。
- text-shadow: 数値で指定する;
-
[px]や[em]などの数値で、要素と影の距離を指定します。1つ目の値は右へずらす距離、2つ目の値は下へずらす距離を指定し、それぞれマイナス値を付ければ逆にずらす事が出来ます。3つ目の値で影のぼかし範囲を指定します。更に影の色を指定する事も出来ます。
【例】.kage { text-shadow: 3px 3px 5px red }
text-shadowの使用サンプル
CSS
.text_sample01 {
text-shadow: 3px 3px;
background-color:#EEEEEE;
padding: 10px;
margin: 0px 0px 10px 0px;
}
.text_sample02 {
text-shadow: 0.5em 0.5em 5px #0000aa;
background-color:#EEEEEE;
padding: 10px;
}
XHTML
<div class="text_sample01"> text_sample01 [text-shadow: 3px 3px;]<br /> テキストサンプル、テキストサンプル。<br /> </div> <div class="text_sample02"> text_sample02 [text-shadow: 0.5em 0.5em 5px #0000aa;]<br /> テキストサンプル、テキストサンプル。<br /> </div>
表示確認
text_sample01 [text-shadow: 3px 3px;]
テキストサンプル、テキストサンプル。
テキストサンプル、テキストサンプル。
text_sample01 [text-shadow: 0.5em 0.5em 5px #0000aa;]
テキストサンプル、テキストサンプル。
テキストサンプル、テキストサンプル。
text-shadowに関連するCSSプロパティ
| テキスト関連 | |
|---|---|
| text-align | 内包する要素に対して横位置の揃え方を指定する |
| text-align-last | 内包する要素の最終行に対して横位置の揃え方を指定する |
| text-autospace | アルファベット等との間隔を指定 |
| text-combine-horizontal | 文字を縦書き表示にした際に縦中横のレイアウトにする |
| text-combine-mode | 縦書き表示で縦中横のレイアウトにした文字の表示方法を指定する |
| text-decoration | 文字列に装飾線や点滅を指定する |
| text-decoration-color | 文字の装飾線の色を指定する |
| text-decoration-line | 文字の装飾線の位置を指定する |
| text-decoration-skip | 文字の装飾線について除外する対象を指定する |
| text-decoration-style | 文字の装飾線の種類を指定する |
| text-emphasis | 要素内のテキストに付与する強調マークに関する指定を行う |
| text-emphasis-color | 要素内のテキストに付与する強調マークの色を指定する |
| text-emphasis-position | 要素内のテキストに付与する強調マークの位置を指定する |
| text-emphasis-style | 要素内のテキストに強調マークを付与する |
| text-height | テキストの高さを指定する |
| text-indent | 文章のインデント幅を指定する |
| text-justify | 行の両端揃えの方法を指定する |
| text-orientation | 縦書き文章の文字の表示方向に関して指定する |
| text-overflow | 要素からはみ出した文字を省略する |
| text-shadow | 文字に影（ドロップシャドウ）を付ける |
| text-transform | テキストの大文字表示・小文字表示を指定する |
| text-underline-position | テキストのアンダーラインの位置を指定する |