影をつける
2023年5月15日
みなさんこんにちは。
ケミストのWeb担当みやのです。ちょっ 影がかぶってるっ
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は図形、画像、文字などに影をつける方法について調べました。
box-shadow
要素に影をつけるにはbox-shadowを使います。
.ex1 {
box-shadow: 10px 10px #999;
}
最初の数字で「右に何pxずらすか」
2番目の数字で「下に何pxずらすか」
最後に「影の色」を指定します。
数字3つだと「右に何pxずらすか」「下に何pxずらすか」「ぼかす半径」「影の色」となります。
.ex2 {
box-shadow: 10px 10px 10px #999;
}
数字4つだと「右に何pxずらすか」「下に何pxずらすか」「ぼかす半径」「影の広がり具合」「影の色」となります。
.ex3 {
box-shadow: 10px 10px 10px 5px #999;
}
insetを設定すると、要素の内側に影ができます。
.ex4 {
box-shadow: inset 0 0 10px 10px #d39e00;
}
コンマで区切ると複数の影をつけることができます。
.ex5 {
box-shadow: 10px -10px #dc3545, 20px 10px #ffc107, -10px 20px #28a745;
}
filter:drop-shadow
画像にbox-shadowで影をつけると、枠に対して影がつきます。これは背景を透明にしたPNGやSVGでも同様です。
.ex6 {
box-shadow: 10px 10px 10px 5px #999;
}
画像の図形に影をつけたい場合は、filterのdrop-shadowを使います。
.ex7 {
filter: drop-shadow(10px 10px 10px #999);
}
drop-shadowは「右に何pxずらすか」「下に何pxずらすか」「ぼかす半径」「影の色」は指定できますが、「影の広がり具合」とinsetは指定できないようです。
text-shadow
文字に影をつけるにはtext-shadowを使います。
.ex8 {
text-shadow: 5px 5px 5px #999;
}
CHEMIST
text-shadowも「右に何pxずらすか」「下に何pxずらすか」「ぼかす半径」「影の色」は指定できますが、「影の広がり具合」とinsetは指定できないようです。
まとめ
影をつけることで立体感が出ますね!
ボタンとかcardにも影をつけようかなあ