CSS陰影效果 (Drop Shadows)
一點陰影可以給平板的設(shè)計增加縱深的感覺, 很多時候我們都是直接用PhotoShop直接制作帶陰影的圖片以供使用, 這里介紹的是一種不需要修改圖片, 而只需要用CSS完成的技巧.
原理:
給＜img />標(biāo)簽增加一個容器, 給容器設(shè)置一個大的陰影背景圖像, 然后把＜img />利用負(fù)值外補丁進(jìn)行偏移, 使陰影落在圖像外側(cè)以達(dá)到效果.
備用的陰影圖像
HTML代碼如下:
＜div class="image_shadow">
＜img src="../images/origin_image.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準(zhǔn)備的, 不然...
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;}
上面的陰影都有點生硬(hard), 我們可以通過建立一個額外的div標(biāo)簽, 再運用一個帶透明度的png蒙板來遮蓋陰影圖片的邊緣.
具有Alpha的陰影蒙板圖片
HTML代碼如下:
＜div class="image_shadow">
＜div>
＜img src="../images/origin_image.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(../images/shadow_mask.png) no-repeat left top;}
.image_shadow div img{padding:3px; background:white; border:solid 1px #ccc;}
效果如下:
蒙板效果的陰影, 更加自然
無蒙板的陰影, 邊緣有點生硬
對于IE 6以下不支持png-24的透明效果, 我們要用到filter 和 hacks了
* html .images_shadow div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow_mask.png' ,sizingMethod='crop');}
另還有類似CSS Sprites的方法創(chuàng)建陰影, 同樣可以做到自然. 但是額外標(biāo)簽過多, 不推薦.
|
