网页制作之CSS像素图制作攻略

↑上一篇:网站制作让IE也支持HTML5的方法
↓下一篇:HTC Sense 体验与体验背后的故事 2   

网页制作之CSS像素图制作攻略

今天才得以有时间搞一个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=utf-8" />
<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">
 <em class="r0c2-21">&nbsp;</em>
    <em class="r0c5-21">&nbsp;</em>
    <em class="r0c8-21">&nbsp;</em>
    <em class="r0c11-21">&nbsp;</em>
   
    <em class="r1c1-11">&nbsp;</em>
    <em class="r1c3-21">&nbsp;</em>
    <em class="r1c5-11">&nbsp;</em>
    <em class="r1c6-11">&nbsp;</em>
    <em class="r1c8-11">&nbsp;</em>
    <em class="r1c10-21">&nbsp;</em>
    <em class="r1c12-11">&nbsp;</em>
    <em class="r1c13-11">&nbsp;</em>
   
    <em class="r2c0-14">&nbsp;</em>
    <em class="r2c2-54">&nbsp;</em>
    <em class="r2c7-14">&nbsp;</em>
    <em class="r2c9-54">&nbsp;</em>
    <em class="r2c14-14">&nbsp;</em>
   
    <em class="r3c1-12">&nbsp;</em>
    <em class="r3c8-12">&nbsp;</em>
    <em class="r3c15-14">&nbsp;</em>
   
    <em class="r5c1-11">&nbsp;</em>   
   
    <em class="r6c1-21">&nbsp;</em>
    <em class="r6c3-21">&nbsp;</em>
    <em class="r6c5-21">&nbsp;</em>
    <em class="r6c7-11">&nbsp;</em>
    <em class="r6c8-21">&nbsp;</em>
    <em class="r6c10-21">&nbsp;</em>
    <em class="r6c12-21">&nbsp;</em>
    <em class="r6c14-11">&nbsp;</em>
   
    <em class="r7c0-16">&nbsp;</em>
    <em class="r7c1-16">&nbsp;</em>
    <em class="r7c2-16">&nbsp;</em>
    <em class="r7c3-21">&nbsp;</em>
    <em class="r7c5-51">&nbsp;</em>
    <em class="r7c10-21">&nbsp;</em>
    <em class="r7c12-15">&nbsp;</em>
    <em class="r7c13-16">&nbsp;</em>
    <em class="r7c14-16">&nbsp;</em>
   
    <em class="r8c3-94">&nbsp;</em>
    <em class="r8c15-16">&nbsp;</em>
      
    <em class="r9c6-12">&nbsp;</em>
    <em class="r9c8-12">&nbsp;</em>
   
    <em class="r10c7-12">&nbsp;</em>
   
    <em class="r12c3-121">&nbsp;</em>
   
    <em class="r13c1-11">&nbsp;</em>
    <em class="r13c2-111">&nbsp;</em>
    <em class="r13c13-11">&nbsp;</em>
    <em class="r13c14-21">&nbsp;</em>
   
    <em class="r14c13-21">&nbsp;</em>
    <em class="r14c2-111">&nbsp;</em>
   
    <em class="r15c3-111">&nbsp;</em>
</div>
</body>
</html>
 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

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

 

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像素图制作攻略 广州网站制作|天传网络 http://www.snl.cn

发布时间:2012-2-3  修改时间:2012-2-3  点击次数:  
↑上一篇:网站制作让IE也支持HTML5的方法
↓下一篇:HTC Sense 体验与体验背后的故事 2   
相关文章:
网友评论: