【照片】如何利用CSS製作圖片陰影(參考Oui-Blog)

呈現的效果如下圖:




詳細做法如下:

I. 下載圖檔,併上傳至自己的網路空間(我是放在Google Page Creator)中:
fuzzy_shadow.png

fuzzy_shadow1.png

fuzzy_shadow2.png


II. 編輯style-sheet模板,並加入以下css控制碼:
.shadow {

float: left;

width: auto;

background: url(http://bangdoll2k.googlepages.com/fuzzy_shadow.png) no-repeat bottom right;

}

.shadow div {

background: url(http://bangdoll2k.googlepages.com/fuzzy_shadow1.png) no-repeat right top;

}


.shadow div a {

background: url(http://bangdoll2k.googlepages.com/fuzzy_shadow2.png) no-repeat left bottom;

padding: 0 6px 6px 0;

display: block;

}

.shadow img {

background-color: #fff;

color: #000;

border: 1px solid #999;


padding: 4px;

vertical-align: bottom;

}



III. 在html中想要出現圖片地方加上:
<div class="shadow"><div><a href="連結網址"><img src="圖片來源網址" /></a></div></div>

<br style="clear: both;" />


製作方法參考自Oui-Blog │如何利用CSS製作圖片陰影

留言

熱門文章