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像素青蛙。

效果:
<script language="JavaScript">ffcod = delpost.runcode3 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode3 .value = ffcod;</script> 提示:您可以先修改部分代码再运行

本文CSS 像素图制作攻略到此结束。远去的飞鸟,永恒的牵挂是故林;漂泊的船儿,始终的惦记是港湾;奔波的旅人,无论是匆匆夜归还是离家远去,心中千丝万缕、时时惦念的地方,还是家。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例

CSS浮动引起的高度塌陷问题