こんにちは、さち です。
先日、ウェブサイトを作っているとき、「CSS」を使って影を付けたいことがありました。
しかし、個人的には使用頻度があまり高くないし種類も多く、すぐに書き方を忘れてしまうので、備忘録としてこの記事を残しておきます。
影を付ける CSS のプロパティ「text-shadow」「box-shadow」「drop-shadow」の違いについても見ていくので、参考になれば幸いです。
【文字の影】 text-shadow
text-shadow はその名のとおり、「テキスト」に影を付けられるプロパティです。
サンプル
<span>テキスト</span> <img src="transparent-image.png" />
span {
color: deeppink;
border: 4px solid deeppink;
border-radius: 15px;
}
span, img {
text-shadow: -6px 18px 4px gray;
}
「テキスト」だけに影が付き、「画像」には付きません。
書き方
/* サンプル */ text-shadow: -6px 18px 4px gray; /* それぞれの値の意味 */ text-shadow: 横方向の位置 縦方向の位置 [ぼかしの強さ] [影の色];
[] で囲んだものは記述を省略できます。
「ぼかしの強さ」を省略した場合は 0 になります。また、「影の色」を省略した場合は「文字の色」の color プロパティの値と同じになります。
【要素の影】 box-shadow
box-shadow は、「要素」に影を付けられるプロパティです。
サンプル
<span>テキスト</span> <img src="transparent-image.png" />
span {
color: deeppink;
border: 4px solid deeppink;
border-radius: 15px;
}
span, img {
box-shadow: -6px 18px 4px 0 gray;
}
「テキスト」「画像」ともに影を付けられますが、あくまでも「要素」の形に合わせて付きます。
そのため、「透過PNG」であっても画像要素の形（長方形の形）に影がつきます。
書き方
/* サンプル */ box-shadow: -6px 18px 4px 0 gray; /* それぞれの値の意味 */ box-shadow: 横方向の位置 縦方向の位置 [ぼかしの強さ] [拡張する量] [影の色];
[] で囲んだものは記述を省略できます。
「ぼかしの強さ」「拡張する量」を省略した場合は 0 になります。また、「影の色」を省略した場合は「文字の色」の color プロパティの値と同じになります。
【透過用の影】 drop-shadow
drop-shadow は、「透過画像」に影を付けるときに便利なプロパティです。
サンプル
<span>テキスト</span> <img src="transparent-image.png" />
span {
color: deeppink;
border: 4px solid deeppink;
border-radius: 15px;
}
span, img {
filter: drop-shadow(-6px 18px 4px gray);
transform: translateZ(0);/* Safari での表示崩れ対策 */
}
「透過PNG」の形に合わせて影が付きます。
「テキスト」は、要素に背景色がある場合は「要素」の形に、ない場合は「テキスト」の形に影が付きます。
書き方
/* サンプル */ filter: drop-shadow(-6px 18px 4px gray); /* それぞれの値の意味 */ filter: drop-shadow(横方向の位置 縦方向の位置 [ぼかしの強さ] [影の色]);
drop-shadow は前述の2つとは異なり、filter の機能の一種です。記述するときは、filter プロパティの中に書く必要があるので注意しましょう。
また、[] で囲んだものは記述を省略できます。
「ぼかしの強さ」を省略した場合は 0 になります。また、「影の色」を省略した場合は「文字の色」の color プロパティの値と同じになります。
知ってると便利なこと
影は複数個つけることもできます。
サンプル
<span>テキスト</span> <img src="transparent-image.png" />
:root {
--shadow-color: brown;
}
span {
color: gold;
/* 擬似的にテキストをフチ取り */
text-shadow:
1px 1px 0 var(--shadow-color),
-1px 1px 0 var(--shadow-color),
1px -1px 0 var(--shadow-color),
-1px -1px 0 var(--shadow-color),
0px 1px 0 var(--shadow-color),
1px 0px 0 var(--shadow-color),
0px -1px 0 var(--shadow-color),
-1px 0px 0 var(--shadow-color);
}
img {
/* 擬似的に画像を複製 */
filter:
drop-shadow(-30px 0 0 skyblue)
drop-shadow(30px 0 0 lightgreen);
transform: translateZ(0);/* Safari での表示崩れ対策 */
}
色の記述は変数を使うと、後で変更することがあっても楽です。
影を複数個付ける場合、text-shadow box-shadow は , で区切る必要がありますが、drop-shadow は スペース でOKです。
微妙に仕様が違ってややこしいです。間違えないようにしましょう。
コメント