CSSで、オブジェクトなどに影を落とす事のできる「box-shadow」について解説致します。
オブジェクトに影をつける事で、立体感が出て、よりリッチなサイトの演出をする事ができるでしょう。
box-shadowの使い方
box-shadowの設定は、以下のようにCSSの記述を行います。
| プロパティ | 値 | ||||||||
| box-shadow | : | 1.左右開始位置 | 2.上下開始位置 | 3.ぼかし | 4.広がり | 5.色 | 6.内側指定 | ; | |
| 例 | box-shadow | : | 0px | 0px | 10px | 10px | #333 | （なし） | ; |
各値の間には「半角スペース」が必要ですので、ご注意ください。
左右開始位置
左右開始位置とは、横方向の影をどの位置から伸ばしたいかを決める事ができます。
正の値だと右側、負の値だと左側に開始位置がずれます。
<div style="box-shadow: 50px 0px 0px 20px #333;width: 80%;margin: 0 auto;">正の値なので右にずれます</div>
上下開始位置
上下開始位置とは、縦方向の影をどの位置から伸ばしたいかを決める事ができます。
正の値だと下側、負の値だと上側に開始位置がずれます。
<div style="box-shadow: 0px -10px 0px 20px #333;width: 80%;margin: 0 auto;">負の値なので上にずれます</div>
ぼかし
3番目の値では、ぼかし具合を決める事ができます。
<div style="box-shadow: 0px 0px 30px 20px #333;width: 80%;margin: 0 auto;">30pxぼかします</div>
広がり
4番目の値では、影をどれだけ広げたいかを決める事ができます。
<div style="box-shadow: 0px 0px 0px 20px #333;width: 80%;margin: 0 auto;">20px幅の影</div>
色
5番目の値では、影の色を指定する事ができます。
今までの例では、ダイレクトに色を指定しておりましたが、透明度を利用できる「rgba」の値を利用する事もできますので、細かい調整を考えると「rgba」で色指定をする方が何かと便利かもしれません。
<div style="box-shadow: 0px 0px 0px 20px rgba(255,241,0,0.5);width: 80%;margin: 0 auto;">黄色の影</div>
「rgba」の事がわからない方は、以下の記事よりご確認ください。
-
重ねたオブジェクトをopacityを使わずrgba値で背景色だけを透過する方法【CSS初心者講座】
続きを見る
内側指定
6番目の値は、指定しなくても問題ありません。
ただし、影を内側に落としたい場合には「inset」という値を付与する事で、今まで外側に広がっていた影を内側に広げる事ができます。
<div style="box-shadow: 0px 0px 0px 5px #333 inset;width: 80%;margin: 0 auto;">影を内側に落とす</div>
box-shadowジェネレーターを利用する
CSSの制作する際に役立つ色々な便利ツールが公開されている事もあります。
box-shadowに関しても「box-shadowジェネレーター」という便利なツールが公開されており、このジェネレーターを利用する事で、簡単に影のイメージとコードの排出をする事ができますので、とっても便利です。
慣れてくるとあまり必要もないかもしれませんが、数値の感覚などが慣れていないうちはこういった便利ツールを利用するのもおすすめです。
filter: drop-shadowも使いこなそう
しかし、例えばPNGなどの透過画像にbox-shadowで影をつけた場合はどうなるでしょうか？
.imageboxshadow{box-shadow: 0px 0px 0px 20px #333;}
当然のようにこのような影になりますね。
もちろん、このような形では使い物にならないと思いますので、採用できず、根本的なオブジェクトそのものに影を落とした状態で書き出しをするというやり方をする事になると思います。
しかし、このような時には、「filter: drop-shadow」というのを利用する事で簡単にPNGデータにも影を落とす事ができます。
.imageboxshadow2{filter: drop-shadow(0px 0px 3px red);}
上の画像のように「filter: drop-shadow」を適用させると、影を落とすべきところを画像から勝手に判断し、シャドウの演出をする事ができるようになります。
試しに、上の画像を右クリックで保存してみてください。
影の落ちていない画像で保存されるはずですよ。
「filter: drop-shadow」のルール
「filter: drop-shadow」の効果は、box-shadowと似ていますが、基本的には全く違うものだと認識しておきましょう。
まず第一にプロパティ名が違い、「filter: drop-shadow」は、「filter」プロパティの中の「 drop-shadow」という値をとっているという形になります。
また、box-shadowと違い、若干の記述方法の違いと適用できない要素があります。
- 「値」は、そのまま書くのではなく、drop-shadow( )の中に書かなければならない
- 「広がりサイズの指定」ができない
- 「内側指定」ができない
box-shadowとの違いを以下の表でまとめました。
| プロパティ | 値 | |||||||
| : | 左右開始 位置 | 上下開始 位置 | ぼかし | 広がり | 色 | 内側指定 | ; | |
| box-shadow | : | 0px | 0px | 10px | 10px | #333 | （なし） | ; |
| filter | :drop-shadow( | 0px | 0px | 10px | 使えない | #333 | 使えない | ); |
まとめ
いかがでしたでしょうか？
CSSでオブジェクトに影を落とす「box-shadow」と「filter: drop-shadow」を紹介してきました。
「filter: drop-shadow」に関しては、とっても便利で、スタイリッシュなコードで実装する事ができますが、扱いに癖もありますので、中級者以上の方が使うワンランク上のテクニックかなとも思います。
ですので、初心者の方などであれば、まずは基本形として「box-shadow」をきっちり理解する事が大事だと思います。
オブジェクトの中身に影を落としたい場合は、影の落ちた画像を最初から用意しましょう。そっちの方がきっと早いと思います。
慣れてきたらPNGだけではなく、SVGファイルなども多様しながら、よりスタイリッシュなコーディングで自由に記述できるようになっていくといいかなと思います。
