帝王谷资源网 Design By www.wdxyy.com
以图片中的色青蛙为例子。
CSS 像素图制作攻略

16X16的像素图,所以使用了如下的命名方法:
r N c N - NN = r[0-15]c[0-15]
(r = rol, c-col, N为自然数:0-15 )
1.命名的规则抄袭了XXX栅格化的那篇文章。
r0c1 即表示:0 横列 1 纵列,也是top跟left的值
NN表示:W H (宽和高)
(觉得最好是使用连字符这样对于10以上的数字,可以直接看出来宽和高的数值,我的这个就不优化了 :P)

2.使用相对定位给个基点,然后使用绝对定位的top和left来控制数值,直接对应rNcN,方便快捷的对应起来。比如:

复制代码代码如下:
.r0c8-21{
top:0; /* 对应row的第0行 */
left:8px; /* 对应col的第8列 */
width:2px; /* 对应width的2px */
height:1px;/* 对应height的1px */
background:#000;
}
.r2c0-14{
top:2px;
left:0px;
width:1px;
height:4px;
background:#000;
}

3.使用PS的信息结合坐标方便查找r和c的值。CSS 像素图制作攻略

各位有兴趣,可以做其他的CSS像素青蛙。

效果:

提示:您可以先修改部分代码再运行
标签:
CSS,像素图

帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com