影をつける

2023年5月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。ちょっ 影がかぶってるっ

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は図形、画像、文字などに影をつける方法について調べました。

参考：MDN｜box-shadow

参考：MDN｜drop-shadow()

参考：MDN｜text-shadow

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にも影をつけようかなあ