CSS 像素图制作攻略

时间：2016-04-19

以图片中的色青蛙为例子。

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

效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>像素图色青蛙</title> 
<style type="text/css"> 
/* 
For: pixe img 
Author: San 
Date: 2009-05-13 
*/ 
body{ 
background:#fff; 
} 
.pixe{ 
position:relative; 
width:16px; 
height:16px; 
} 
.pixe em{ 
position:absolute; 
font-size:1px; 
line-height:1px; 
} 
/* row 0 */ 
.r0c2-21{ 
top:0; 
left:2px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r0c5-21{ 
top:0; 
left:5px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r0c8-21{ 
top:0; 
left:8px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r0c11-21{ 
top:0; 
left:11px; 
width:2px; 
height:1px; 
background:#000; 
} 
/* row 1 */ 
.r1c1-11{ 
top:1px; 
left:1px; 
height:1px; 
width:1px; 
background:#000; 
} 
.r1c3-21{ 
top:1px; 
left:3px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r1c5-11{ 
top:1px; 
left:5px; 
width:1px; 
height:1px; 
background:#f00; 
} 
.r1c6-11{ 
top:1px; 
left:6px; 
width:1px; 
height:1px; 
background:#000; 
} 
.r1c8-11{ 
top:1px; 
left:8px; 
width:1px; 
height:1px; 
background:#000; 
} 
.r1c10-21{ 
top:1px; 
left:10px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r1c12-11{ 
top:1px; 
left:12px; 
width:1px; 
height:1px; 
background:#f00; 
} 
.r1c13-11{ 
top:1px; 
left:13px; 
width:1px; 
height:1px; 
background:#000; 
} 
/* row 2*/ 
.r2c0-14{ 
top:2px; 
left:0px; 
width:1px; 
height:4px; 
background:#000; 
} 
.r2c2-54{ 
top:2px; 
left:2px; 
width:5px; 
height:4px; 
background:#f00; 
} 
.r2c7-14{ 
top:2px; 
left:7px; 
width:1px; 
height:4px; 
background:#000; 
} 
.r2c9-54{ 
top:2px; 
left:9px; 
width:5px; 
height:4px; 
background:#f00; 
} 
.r2c14-14{ 
top:2px; 
left:14px; 
width:1px; 
height:4px; 
background:#000; 
} 
/* row 3 */ 
.r3c1-12{ 
top:3px; 
left:1px; 
width:1px; 
height:2px; 
background:#ff8080; 
} 
.r3c8-12{ 
top:3px; 
left:8px; 
width:1px; 
height:2px; 
background:#ff8080; 
} 
.r3c15-14{ 
top:3px; 
left:15px; 
width:1px; 
height:4px; 
background:#b4b4b4; 
} 
/* row 5 */ 
.r5c1-11{ 
top:5px; 
left:1px; 
width:1px; 
height:1px; 
background:#e4b4b4; 
} 
/* row 6 */ 
.r6c1-21{ 
top:6px; 
left:1px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r6c3-21{ 
top:6px; 
left:3px; 
width:2px; 
height:1px; 
background:#f00; 
} 
.r6c5-21{ 
top:6px; 
left:5px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r6c7-11{ 
top:6px; 
left:7px; 
width:1px; 
height:1px; 
background:#ff0; 
} 
.r6c8-21{ 
top:6px; 
left:8px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r6c10-21{ 
top:6px; 
left:10px; 
width:2px; 
height:1px; 
background:#f00; 
} 
.r6c12-21{ 
top:6px; 
left:12px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r6c14-11{ 
top:6px; 
left:14px; 
width:1px; 
height:1px; 
background:#b4b4b4; 
} 
/* row 7 */ 
.r7c0-16{ 
top:7px; 
left:0px; 
width:1px; 
height:6px; 
background:#000; 
} 
.r7c1-16{ 
top:7px; 
left:1px; 
width:1px; 
height:6px; 
background:#d0b000; 
} 
.r7c2-16{ 
top:7px; 
left:2px; 
width:1px; 
height:6px; 
background:#ffd700; 
} 
.r7c3-21{ 
top:7px; 
left:3px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r7c5-51{ 
top:7px; 
left:5px; 
width:5px; 
height:1px; 
background:#ff0; 
} 
.r7c10-21{ 
top:7px; 
left:10px; 
width:2px; 
height:1px; 
background:#000; 
} 
.r7c12-15{ 
top:7px; 
left:12px; 
width:1px; 
height:5px; 
background:#ffffaf; 
} 
.r7c13-16{ 
top:7px; 
left:13px; 
width:1px; 
height:6px; 
background:#fff; 
} 
.r7c14-16{ 
top:7px; 
left:14px; 
width:1px; 
height:6px; 
background:#000; 
} 
/*row 8 */ 
.r8c3-94{ 
top:8px; 
left:3px; 
width:9px; 
height:4px; 
background:#ff0; 
} 
.r8c15-16{ 
top:8px; 
left:15px; 
width:1px; 
height:6px; 
background:#b4b4b4; 
} 
/* row 9 */ 
.r9c6-12{ 
top:9px; 
left:6px; 
width:1px; 
height:2px; 
background:#f00; 
} 
.r9c8-12{ 
top:9px; 
left:8px; 
width:1px; 
height:2px; 
background:#f00; 
} 
.r10c7-12{ 
top:10px; 
left:7px; 
width:1px; 
height:2px; 
background:#f00; 
} 
.r12c3-121{ 
top:12px; 
left:3px; 
width:11px; 
height:1px; 
background:#ffd700; 
} 
/*row 13 */ 
.r13c1-11{ 
top:13px; 
left:1px; 
width:1px; 
height:1px; 
background:#000; 
} 
.r13c2-111{ 
top:13px; 
left:2px; 
width:11px; 
height:1px; 
background:#d0b000; 
} 
.r13c13-11{ 
top:13px; 
left:13px; 
width:1px; 
height:1px; 
background:#000; 
} 
.r13c14-21{ 
top:13px; 
left:14px; 
width:2px; 
height:1px; 
background:#b4b4b4; 
} 
/* row 14 */ 
.r14c2-111{ 
top:14px; 
left:2px; 
width:11px; 
height:1px; 
background:#000; 
} 
.r14c13-21{ 
top:14px; 
left:13px; 
width:2px; 
height:1px; 
background:#b4b4b4; 
} 
/* row 15 */ 
.r15c3-111{ 
top:15px; 
left:3px; 
width:11px; 
height:1px; 
background:#b4b4b4; 
} 
</style> 
</head> 
<body> 
<div class="pixe"> 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
&nbsp; 
</div> 
</body> 
</html>

提示：您可以先修改部分代码再运行

上一条：CSS 样式层裁剪图片 下一条:十个非常实用的CSS属性(IE不支持)

CSS 像素图制作攻略

相关文章

最新文章