|
嗯，你可以說(shuō)我很無(wú)聊。
最近瘋狂加班，今天才得以有時(shí)間搞一個(gè)CSS的像素圖來(lái)消遣休息下。
先看效果：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
以圖片中的色青蛙為例子。
16X16的像素圖，所以使用了如下的命名方法：
r N c N - NN = r[0-15]c[0-15]
(r = rol, c-col, N為自然數(shù):0-15 )
1.命名的規(guī)則抄襲了XXX柵格化的那篇文章。
r0c1 即表示：0 橫列 1 縱列，也是top跟left的值
NN表示：W H （寬和高）
(覺(jué)得最好是使用連字符這樣對(duì)于10以上的數(shù)字，可以直接看出來(lái)寬和高的數(shù)值，我的這個(gè)就不優(yōu)化了 ：P)
2.使用相對(duì)定位給個(gè)基點(diǎn)，然后使用絕對(duì)定位的top和left來(lái)控制數(shù)值，直接對(duì)應(yīng)rNcN，方便快捷的對(duì)應(yīng)起來(lái)。比如：
.r0c8-21{
top:0; /* 對(duì)應(yīng)row的第0行 */
left:8px; /* 對(duì)應(yīng)col的第8列 */
width:2px; /* 對(duì)應(yīng)width的2px */
height:1px;/* 對(duì)應(yīng)height的1px */
background:#000;
}
.r2c0-14{
top:2px;
left:0px;
width:1px;
height:4px;
background:#000;
}
3.使用PS的信息結(jié)合坐標(biāo)方便查找r和c的值
各位有興趣，可以做其他的CSS像素青蛙。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2927758-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/6717.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
