We Blog Weblog

影をつける

Web

2023年5月15日

box-shadow

みなさんこんにちは。
ケミストの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ずらすか」
最後に「影の色」を指定します。

ex1

数字3つだと「右に何pxずらすか」「下に何pxずらすか」「ぼかす半径」「影の色」となります。

.ex2 {
  box-shadow: 10px 10px 10px #999;
}
ex2

数字4つだと「右に何pxずらすか」「下に何pxずらすか」「ぼかす半径」「影の広がり具合」「影の色」となります。

.ex3 {
  box-shadow: 10px 10px 10px 5px #999;
}
ex3

insetを設定すると、要素の内側に影ができます。

.ex4 {
  box-shadow: inset 0 0 10px 10px #d39e00;
}
ex4

コンマで区切ると複数の影をつけることができます。

.ex5 {
  box-shadow: 10px -10px #dc3545, 20px 10px #ffc107, -10px 20px #28a745;
}
ex5

filter:drop-shadow

画像にbox-shadowで影をつけると、枠に対して影がつきます。これは背景を透明にしたPNGやSVGでも同様です。

.ex6 {
  box-shadow: 10px 10px 10px 5px #999;
}


画像の図形に影をつけたい場合は、filterdrop-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にも影をつけようかなあ

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP