CSS3による文字に影（ドロップシャドウ）を付ける | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website
...
shanabrian.com
text-shadow:水平方向の位置 垂直方向の位置;
text-shadow:水平方向の位置 垂直方向の位置 ぼかしの長さ;
text-shadow:水平方向の位置 垂直方向の位置 ぼかしの長さ 色;文字に影を付ける場合はtext-shadowプロパティを使用する。
ぼかし、色は省略でき、色を省略した場合は文字色と同色が反映される。
box-shadowと違い、広がり距離とinsetがないことに注意する。
| 場所 | 初期値 | 説明 |
|---|---|---|
| 1つ目 （必須） |
水平方向の位置 正の値で右方向、負の値で左方向 |
|
| 2つ目 （必須） |
垂直方向の位置 正の値で下方向、負の値で上方向 |
|
| 3つ目 | 0 | ぼかしの長さ |
| 4つ目 | currentColor | 影の色 省略するとテキストと同じ色になる |
.sample1 {
text-shadow:3px 3px;
}
.sample2 {
text-shadow:1px 1px 3px;
}
.sample3 {
text-shadow:1px 1px 3px #d00;
}
.sample4 {
text-shadow:-1px -1px 3px #d00;
}複数の影を指定
カンマで区切ることにより、1つの文字に対して複数の影を付けることが可能。
div.sample {
text-shadow:3px 3px 0 #f93, -3px -3px 0 #d00;
}より美しいシャドウ
テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャドウになる。
カラーがoklch()で設定されているが、hex値でも構わない。ポイントは通常のシャドウと一緒にハイライト用のtext-shadowを上部に設定することである。
:root {
--shadow: oklch(25% .2 140);
--highlight: oklch(98% .05 140);
}
.highlighted-text-shadow {
text-shadow:
/* 通常のtext-shadow */
0 .15ch 15px var(--shadow),
/* ハイライト用のtext-shadow */
0 -2px 0 var(--highlight);
}