[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;
}

top of page

©2017 coliss