CSS高級技巧:陰影效果

 

點擊上方「web前端網頁設計」一鍵關注，更多網頁設計 UI設計 Html div css HTML5+CSS3、JavaScript、JQuery，PHP、mysql、帝國CMS建站教程盡在掌握。

一點陰影可以給平板的設計增加縱深的感覺, 很多時候我們都是直接用PhotoShop直接製作帶陰影的圖片以供使用, 這裡介紹的是一種不需要修改圖片, 而只需要用CSS完成的技巧.

原理:

給<img />標籤增加一個容器, 給容器設置一個大的陰影背景圖像, 然後把<img />利用負值外補丁進行偏移, 使陰影落在圖像外側以達到效果.

 
              備用的陰影圖像 shadow.gif

HTML代碼如下:

<div>
    <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準備的, 不然...

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;} Webjx.Com

 

 

上面的陰影都有點生硬(hard), 我們可以通過建立一個額外的div標籤, 再運用一個帶透明度的png蒙板來遮蓋陰影圖片的邊緣.

     具有Alpha的陰影蒙板圖片 shadow_mask.png

HTML代碼如下:

<div>
    <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的方法創建陰影, 同樣可以做到自然. 但是額外標籤過多, 不推薦.