【css】影とぼかしのbox-shadow

影とぼかしのbox-shadow

今回は、box-shadowについて解説します。

使えると、便利というよりコードを書くのが楽しくなるはずです。

「コーディングできてる!デザインしてる!」

ってなるとか、ならないとか。

それでは、さっそく影やぼかしを入れてみましょう。

box-shadow

box-shadowは、影をつけたい要素へ指定します。

※要素 = <h2> <p> <img>などのこと

書き方は、こんな感じ。

要素 {
  box-shadow: 3px 5px 7px 2px #eee inset;
}

たくさん書いてあるので、何がなんだかってなりそう…

というわけで、表にしてみました。

3px5px7px2px#eeeinset
左右方向の影上下方向の影ぼかし広がり影の色内向きの影
※スマホの方は、横にスクロールしてください。

少しは分かりやすくなったかと。

ですが、まだイメージしにくいはずなので、具体例をどうぞ。

<p>
</p>
p {
  width: 100px;
  height: 100px;
  background-color: #fbd251; /* 黄色 */
  box-shadow: 3px 5px; /* 右 下 */
}

影が、右と下につきました。

この2つの数値だけは、指定が必須です。

1つだけの指定

1つだけだと、指定が効かないので気をつけましょう。

p {
  box-shadow: 3px;
}

マイナス値を指定

数値には、マイナス値も指定できます。

p {
  box-shadow: -3px -5px; /* 左 上 */
}

影が、左向き・上向きになりました。

ぼかしと広がり

今度は、「ぼかし」と「広がり」です。

「ぼかし」は何となく分かる。

けど、「広がり」がイメージしにくいですよね。

というわけで、これも実例を。

ぼかし

まずは、「ぼかし」から。

p {
  box-shadow: 3px 5px 7px; /* 右 下 ぼかし */
}

影がうすまりつつ広がったのが分かりますね。

補足ですが、この「ぼかし」だけはマイナス値を指定できません。

以下のようにすると、影の指定すべてが効かなくなります。

p {
  box-shadow: 3px 5px -7px; /* 右 下 ぼかし */
}

検証画面でも確認できます。

影のぼかしにマイナス値を指定したら、指定が効かなくな流。

打ち消し線が引かれ、指定が有効でないのが分かります。

広がり

次は、「広がり」です。

p {
  box-shadow: 3px 5px 7px 5px; /* 右 下 ぼかし 広がり */
}

一応ことばで説明すると、

「影にぼかしをつけた状態で、それを広がらせる指定」

となります…

ちなみに、この「広がり」にはマイナス値をつけれます。

p {
  box-shadow: 3px 5px 7px -3px;
}

影がシマった感じになりますね。

いろんなサイトでも使われてるやり方です。

色とinset

今度は、影に色をつけます。

p {
  box-shadow: 3px 5px 7px -3px blue;
}

これは大丈夫ですね。

あまり影っぽくない色なので、色をつける時にはご注意を。

ちなみに、色を指定しないと、影は要素(ここではp)の文字色と同じになります。

inset

さいごは、影を内向きにする「inset」。

※inset = はめ込み。影をボックスの内側にする → はめ込むというニュアンスなのか…

p {
  box-shadow: 3px 5px 7px -3px blue inset;
}

影が左と上になりつつ、ボックスの内側についています。

ということは、左右・上下の影の値をマイナスに指定すると、

p {
  box-shadow: -3px -5px 7px -3px blue inset;
}

影が右と下になりました。

一方向だけに影をつける

影を上、または下だけ。

と一方向にのみ、つけたい時もあるもやしれません。

下だけ

以下は、左右方向の影を0pxとし、下だけに影をつけた例です。

p {
  box-shadow: 0px 12px 7px 3px #777;
}
/* 影の色:濃いめのグレー */

しかし、「ぼかし」と「広がり」で左右方向に影がついてしまいます。

ボックスが浮いてるようにも見えますね。

ここで、指定の順番を忘れてしまった方のために、再び表にしたのをどうぞ。

0px12px7px3px#777
左右方向の影上下方向の影ぼかし広がり影の色
※スマホの方は、横にスクロールしてください

話を戻しますね。

左右の影をなくすには、どうするかというと…

「ぼかし」につけた値と同じマイナスの値を「広がり」につけてあげる。

これで、オッケーです。

プラマイゼロみたくする、と覚えましょう。

p {
  box-shadow: 0px 12px 7px -7px #777;
}
/* 影の色:濃いめのグレー */

無事、下にだけ影がつきました。

上だけ

「上だけにしたい!」

と思ったら、-12pxとしましょう。

p {
  box-shadow: 0px -12px 7px -7px #777;
}
/* 影の色:濃いめのグレー */

右だけ・左だけ

ついでに、右だけ・左だけバージョンも見ときましょうか。

box-shadow: 12px 0px 7px -7px #777

box-shadow: -12px 0px 7px -7px #777

複数指定

影を複数指定するのも可能です。

書き方は『 , 』で区切って、次の影を指定。

こういう感じで書きます。

p {
  box-shadow: 3px 5px 7px -3px blue,1px 2px 3px red inset;
}

※スマホの方は、横にスクロールしてください。

青と赤の影、2つを作れました。

ちなみに、3つにもできます。
(ここではしません、実例放棄です!気が向いたらやりまーす)

検証画面で影の長さを変えてみよう

影は、以下のように「検証」画面で変化させられます。

検証画面

矢印のとこをクリックすると、パネルが出てきます。

検証画面で影の長さを調節する。
X offsetY offsetBlurSpreadInset
左右方向の影上下方向の影ぼかし広がり内向きの影
※スマホの方は、横にスクロールしてください

数値を変えて、いろいろ試してみてください。

影の例

影のつけ方でいろいろな表現ができるので、いくつか例をあげてみますね。

と言っても、4つですが…

ぼかしのみ

こちらは、ぼかしだけを入れた場合です。

p {
  box-shadow: 0px 0px 7px;
}

少し浮いてる感じに見えなくもない、ですかね。

ぼかしを内側に

ぼかしだけを内側にした場合はどうでしょう。

p {
  box-shadow: 0px 0px 7px inset;
}

んー、何て表現していいのか分からず…

ボタンのように見せる

また、ボタンっぽくも出来ます。

a {
  box-shadow: 0px 3px 5px -1px #999;
}

急にピンクにしてみました。

これをマウスが乗った時、影をなくすとボタンを押したように見えるはず。

あっ、つけた影をなしにする時は、box-shadow: noneとしてください。

a {
  box-shadow: 0px 3px 5px -1px #999;
  transition: all 0.5s ease-in-out;
}
a:hover {
  box-shadow: none
}

マウスを乗せてー

transition: all 0.5s ease-in-out;でヌルッとした動きにしてます。
【参考記事】時間をかけて変化させる|transition

見たことのある動きになったんじゃないしょうか。

画像に影をつける

さいご、画像にも影をつけてみました。

img {
  padding: 5px;
  box-shadow: 0 2px 3px 0 #e5e5e5;
}
画像に影をつけた。

パディングを入れたことで、より額縁っぽい感じに見えますね。

※パディング・・・内側の余白

参考サイト

今さらですが、この記事は「CSS3」をもとに紹介しました。

CSS3は、cssのルールブックみたいなもので、その最新版です。

どちらも翻訳あります。

やや専門的に書かれてるので、読む時はお気をつけくださいー

まとめ

影を少しつけるだけで、一段上の見せ方になると思います。

よかったら、いろいろ取り入れて遊んでみてください。

こちらは、マウスを乗せた時に影がつく例です。

フワッと浮き上がるような動きになります。

記事の中にある「hover時に画像をズームさせる」をご覧ください。

クリックしたら、該当箇所にジャンプします。

タイトルとURLをコピーしました