在cssplay網(wǎng)站看到有一組CSS像素畫,于是也想摩仿一下,于是在網(wǎng)絡(luò)上找到一組頭像圖標(biāo),看其結(jié)構(gòu)比較簡(jiǎn)單,就拿它開刀吧!先看看預(yù)覽圖
圖一
基本原理:
沒有什么技術(shù)含量,主要是利用背景色和邊框色來(lái)渲染每一個(gè)像素點(diǎn),加上絕對(duì)定位,就可以變換出不同的風(fēng)格。在制作一幅圖片之前最好是將圖片黑白風(fēng)格化,然后用PS放大圖片,將各個(gè)點(diǎn)的位置計(jì)算精確。剩下的事情就是無(wú)窮的耐心和細(xì)心了。
演示:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
經(jīng)典論壇交流: http://bbs.blueidea.com/thread-2915003-1-1.html
本文鏈接:http://www.95time.cn/tech/web/2009/6489.asp
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|