这是一款带漂亮阴影效果的响应式图片画廊界面设计。该图片画廊中每一幅图片都带有炫酷的底部阴影效果。它采用网格布局，图片的列数会随着浏览器屏幕尺寸的大小而相应改变，效果非常炫酷。
在线预览 源码下载
制作方法 HTML结构该图片画廊使用一个<div>元作为包裹容器。里面使用无序列表作为图片的网格系统。每一张图片的超链接父元素上的data-tooltip属性用于制作图片的标题效果。
<divclass="wrapper"><ulclass="gallery"><li><ahref="#"class="gallery_links"data-tooltip="Country scenery"><imgsrc="img/1.jpg"/></a></li>......</ul></div>
CSS样式在CSS样式中，整个包裹元素.wrapper居中放置。整个无序列表采用相对定位，
.wrapper{margin:0 auto;margin-top:2%;
}ul.gallery{position:relative;z-index:1;overflow:hidden;list-style:none;padding:5px;
}
无序列表中的<li>元素的显示方式设置为display:inline-block，使所有的<li>元素可以一个接一个的排列，组成网格。并且为每一个网格设置了固定的宽度和高度，以及阴影效果。