今回は、box-shadowについて解説します。
使えると、便利というよりコードを書くのが楽しくなるはずです。
「コーディングできてる！デザインしてる！」
ってなるとか、ならないとか。
それでは、さっそく影やぼかしを入れてみましょう。
box-shadow
box-shadowは、影をつけたい要素へ指定します。
※要素 = <h2> <p> <img>などのこと
書き方は、こんな感じ。
要素 {
box-shadow: 3px 5px 7px 2px #eee inset;
}たくさん書いてあるので、何がなんだかってなりそう…
というわけで、表にしてみました。
| 3px | 5px | 7px | 2px | #eee | inset |
| 左右方向の影 | 上下方向の影 | ぼかし | 広がり | 影の色 | 内向きの影 |
少しは分かりやすくなったかと。
ですが、まだイメージしにくいはずなので、具体例をどうぞ。
影
<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;
}
/* 影の色：濃いめのグレー */しかし、「ぼかし」と「広がり」で左右方向に影がついてしまいます。
ボックスが浮いてるようにも見えますね。
ここで、指定の順番を忘れてしまった方のために、再び表にしたのをどうぞ。
| 0px | 12px | 7px | 3px | #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 offset | Y offset | Blur | Spread | Inset |
| 左右方向の影 | 上下方向の影 | ぼかし | 広がり | 内向きの影 |
数値を変えて、いろいろ試してみてください。
影の例
影のつけ方でいろいろな表現ができるので、いくつか例をあげてみますね。
と言っても、4つですが…
ぼかしのみ
こちらは、ぼかしだけを入れた場合です。
p {
box-shadow: 0px 0px 7px;
}少し浮いてる感じに見えなくもない、ですかね。
ぼかしを内側に
ぼかしだけを内側にした場合はどうでしょう。
p {
box-shadow: 0px 0px 7px inset;
}んー、何て表現していいのか分からず…
ボタンのように見せる
また、ボタンっぽくも出来ます。
急にピンクにしてみました。
これをマウスが乗った時、影をなくすとボタンを押したように見えるはず。
あっ、つけた影をなしにする時は、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時に画像をズームさせる」をご覧ください。
クリックしたら、該当箇所にジャンプします。