一點陰影可以給平板的設計增加縱深的感覺, 很多時候我們都是直接用Photoshop直接制作帶陰影的圖片以供使用, 這裡介紹的是一種不需要修改圖片, 而只需要用CSS完成的技巧.
網頁教學網
原理:
給<img />標簽增加一個容器, 給容器設置一個大的陰影背景圖像, 然後把<img />利用負值外補丁進行偏移, 使陰影落在圖像外側以達到效果.
備用的陰影圖像 shadow.gif
Html代碼如下: 網頁教學網
<div class="image_shadow">
<img src=/School/UploadFiles_7810/201603/20160324091204760.jpg" alt="" />
</div> 網頁教學網
CSS代碼如下:
.image_shadow{position:relative;float:left;clear:right;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;display:block;margin:-5px 5px 5px -5px;padding:3px;background:white;border:solid 1px #ccc;}網頁教學網
紅色代碼部分是為IE 6准備的, 不然... 網頁教學網
Clagnut陰影 : 網頁教學網
Richard Rutter提供了一個類似的陰影方法, 他用的是相對定位來偏移圖像.
CSS代碼如下:
.image_shadow{float:left;line-height:0;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;left:-5px;top:-5px;padding:3px;background:white;border:solid 1px #ccc;} .Com
.Com
上面的陰影都有點生硬(hard), 我們可以通過建立一個額外的div標簽, 再運用一個帶透明度的png蒙板來遮蓋陰影圖片的邊緣.
具有Alpha的陰影蒙板圖片 shadow_mask.png .Com
Html代碼如下:
<div class="image_shadow">
<div>
<img src=/School/UploadFiles_7810/201603/20160324091204760.jpg" alt="" />
</div>
</div>
CSS代碼如下: 網頁教學網
.image_shadow{float:left;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow div{float:left;padding:0 5px 5px 0;background:url(..//School/UploadFiles_7810/201603/20160324091204242.png) no-repeat left top;}
.image_shadow div img{padding:3px; background:white; border:solid 1px #ccc;} 網頁教學網
效果如下:
蒙板效果的陰影, 更加自然 網頁教學網
無蒙板的陰影, 邊緣有點生硬 .Com
對於IE 6以下不支持png-24的透明效果, 我們要用到filter 和 hacks了
* Html .images_shadow div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/School/UploadFiles_7810/201603/20160324091204242.png" ,sizingMethod="crop");} 網頁教學網
另還有類似CSS Sprites的方法創建陰影, 同樣可以做到自然. 但是額外標簽過多, 不推薦.
到此為止CSS高級教程結束．