[CSS]ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシート

inline-blockを使ってシンプルなグリッドで、ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシートを紹介します。

Gallery -Inline Block Grid

• デモ
• 実装

デモ

デモは、最新のモダンブラウザでご覧ください。
※CSS3はベンダープレフィックスの記述なしです。

Gallery -Inline Block Grid

実装

Step 1: HTML

HTMLはシンプルでimg要素をdiv要素で内包するだけです。
.galleryのdiv要素は、ギャラリーとして画像を配置するためのものです。

<div class="gallery">
<div class="panel"><img src="image.jpg" alt="" /></div>
<div class="panel"><img src="image.jpg" alt="" /></div>
</div>

Step 2: CSS

まずは、画像にシャドウを適用するスタイルシートです。
画像のimg要素と白いパネルの.panelにbox-shadowを適用します。画像が浮いてる感をだすために、画像の方がシャドウが大きめです。

img{
  margin-left:-2em;
  box-shadow:10px 10px 35px rgba(0,0,0,0.4);
}
.panel {
  display:inline-block;
  background:#e4e4e4;
  margin:2em;
  box-shadow:5px 5px 15px rgba(0,0,0,0.4),inset -1px -1px 1px  #fff;
  padding:2em 0;
  max-width:20em;
}

各画像を配置するスタイルシートです。
box-sizingはborder-boxにし、inline-blockで画像を配置します。

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  background-color:#e43;
  position:relative;
}

img {
  max-width:100%;
  height:auto;
}
.gallery {
  width:90%;
  float:right;
}