CSS3のbox-shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

  • あとで読みたい人は…

@cappeeです。

よく見かける紙が浮いたようなシャドウをデザインして、それをコーディングする場合、今までは画像置換でシャドウ用のdivをひとつ増やしていましたが、CSS3の box-shadow を使えば画像なしで実現できます。

box shadow effect CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

デモ:Creating Different CSS3 Box Shadows Effects

詳しいコードサンプルはこちらをご覧ください。

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ

box-shadowを使う場合の注意点

上記を参考にCSS3のbox-shadowを使用してシャドウをつけようと思ったのですが、コードを見てみるとサンプルに  z-index と position: absolute が指定されているものがあります。

z-index: -1;
position: absolute;

z-index: -1

z-index: -1 が指定されていると、例えばコンテンツ全体の背景に白い画像をセンタリングで表示していた場合、シャドウがその後ろに隠れて見えなくなってしまいます。
ただし、こちらは画像を指定しているコンテンツのIDに z-index: 1 など指定すればなおります。

position: absolute

position: absolute をボックスに指定すると高さがとれないため、高さが可変のボックスに対してはつけることができません

box-shadowを使ってデザイン性の高いシャドウを実現するには縦横のサイズを固定する必要があります。

画像置換でシャドウをつけるサンプルコード

画像置換でボックスの下に丸みのあるシャドウをつける場合(上記デモのEffect6)のサンプルコードも記載しておきます。

シャドウ用の画像を書きだしてください。こちらを右クリックでダウンロードしていただいてもOKです。

シャドウ用の画像

shadow CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

HTML

<div class="shadow">
 <p>シャドウ用のボックス</p>
 </div>

CSS

.shadow{
 background: url("/images/shadow.jpg") no-repeat 50% 100%;
 padding-bottom:10px;
 }

padding-bottom には作成したシャドウの画像の高さを入力してください。

Pocket
article clipper CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)