[CSS] CSSの影のつけ方　box-shadowで立体デザインを作ろう！

立体デザインを作ってみたい、ボックスへの影の付け方をマスターしたい、カスタマイズの幅を広げたい

そんな疑問に答えます。

box-shadowプロパティの使い方

ボックスの影を指定するプロパティは、box-shadowを使います。こんな風に記述します。

a{box-shadow: <横> <縦> <ぼかし> <大きさ> <色> inset;}

それぞれの値について説明します。

横の値影の水平的な位置を指定
縦の値影の垂直的な位置を指定
ぼかし影のぼかしの強さ
大きさ影の大きさ
色影の色
insetボックスの内側に影を付けたい場合に使用

縦、横を除く値は省略できる

  • ぼかし
  • 大きさ
  • 色

は省略することが出来ます。その場合は以下の値をとります。

  • ぼかし：0
  • 大きさ：0
  • 色：black（本文の色が指定してある場合はそれに同じ）

ぼかしのない影をつける

ぼかしなしの影は、紙が2枚重なっているようにも見えます。

縦横だけをプラスの値で指定

プラスの値で指定すると、右と下に向けて影がつきます。

縦、横に5pxずつずれた影の一例です。

.shadow1{
background: #c6eeee;
box-shadow: 5px 5px;
}

縦横だけをマイナスの値で指定

マイナスの値で指定すると、左と上に向けて影がつきます。

縦、横に-5pxずつずれた影の一例です。

.shadow2{
background: #c6eeee;
box-shadow: -5px -5px;
}

ぼかしのある影をつける

ぼかしつきの影は、まるで浮いているかのような立体感を出すことが出来ます。

3つ目の値ではぼかしの強さを指定出来ます。

数値が大きくなる程ぼかしが強くなります。

10pxでぼかしをつけた一例です。

.shadow3{
background: #c6eeee;
box-shadow: 5px 5px 10px;
}

2pxでぼかしをつけた一例です。

.shadow4{
background: #c6eeee;
box-shadow: 5px 5px 2px;
}

影の大きさを指定する

こちらも値が大きくなるほど、影も大きくなります。

影の大きさを10pxにした一例です。

.shadow5{
background: #c6eeee;
box-shadow: 0px 0px 0px 10px;
}

影の大きさを10px、その他の値も設定した一例です。デザイン的にあれですが、分かりやすい様に、ちょっと極端な数値にしています。

.shadow52{
background: #c6eeee;
box-shadow: 5px 5px 5px 10px;
}

影の大きさを1pxにした一例です。

.shadow6{
background: #c6eeee;
box-shadow: 0px 0px 0px 1px;
}

影の大きさを1px、その他の値も設定した一例です。デザイン的に良い感じ🙆‍♀️

.shadow62{
background: #c6eeee;
box-shadow: 5px 5px 2px 1px;
}

カラフルな影をつける

ピンクの影をつけた一例です。

.shadow7{
background: #c6eeee;
box-shadow: 5px 5px #ef97e8;
}

背景と同じ色の影を全体にかけると、ふんわり光っているように見えます。

.shadow8{
color:#ffffff;
background: #ef97e8;
box-shadow: 0px 0px 8px 8px #ef97e8;
}

insetでボックスの内側に影をつける

insetを使うと、凹んでいるように見えます。

.shadow9{
padding: .3em;
box-shadow: 2px 2px 3px 1px inset;
}
/* 既にお気付きかもしれませんが、実はこのシンタックスハイライターの囲み枠も、insetで影をつけています */

box-shadowを応用した例

このブログのh2見出し

実は当ブログのh2見出し、破線でボーダーをつけたボックスの上下に、ぼかし無しの影をつけて作成しています。

他にもいくつか例を載せておりますので、詳しくは以下の記事もご覧ください。

ちなみにシンタックスハイライター（コードを囲ってある枠）のCSSはこちらです。

ネオン風ボタン

box-shadowを使用して、ネオンの様に光るCSSボタンを作ってみました。

2つとも押し心地が良いので、ぜひ実際に押して感覚を味わってみてください（笑）

See the Pen Neon button by Yuhomyan (@yuhomyan) on CodePen.

ネオン風ボタン2

See the Pen Neon-button-2 by Yuhomyan (@yuhomyan) on CodePen.

最後に

box-shadowを使うと、ブログデザインが一気に立体的、お洒落になるので是非知っておきたいプロパティの一つです。

デザインカスタマイズ系は少しずつアップしていくので、今後も楽しみにしていていただけたら幸いです！

スポンサーリンク

プロパティ

Posted by Yuhostyles