CSS像素图制作攻略
作者：goos 来源：蓝色理想 发布时间：2009-05-19 19:32:00
标签：像素,青蛙,css
嗯，你可以说我很无聊。
最近疯狂加班，今天才得以有时间搞一个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像素青蛙。
0
投稿猜你喜欢
QQ影音至9月发布之后一直口碑很好，视觉界面和交互设计也颇受好评，这是设计师们努力的结果，也是众多用户反馈的功劳。我们希望可以提供更多价值回- <SCRIPT language=vbscript event=BeforeInitialBind(i
- ASP如何分两段读取数据库？中间插入广告。代码如下：<!--#include file="conn.asp"--&
- 大家在写按钮（input、button）的时候会发现在 IE 下：随着字数的增多，两边的间距也会越来越大。在 WIN 的XP 风格下，当字数
- Yahoo发布了一款基于FireFox的插件，名叫YSlow，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则而进行优
- SQL Server 2008的独到之处：安装SQL Server 2008的设置和安装也有所改进。配置数据和引擎位已经分开了，所以它使创建
- 阅读上一篇：W3C优质网页小贴士（一） 使用 alt 属性描述每幅图像alt 属性有什么用？alt 属性可以在一系列标签中使用（如
- Windows 8 终于发布了，虽然现在可用的只是开发者预览版，好消息是，IE 10 也随着发了，虽然现在还只有Windows 8可用。我们
- 更轻量－ 出色的颗粒化模块，子模块划分；－ 延迟加载；－ 强调代码重用（公共基类、插件、扩展）；更易用－ 统一的API；－ 便利（each,
- 啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样的 PSD 文件：就哭了。一般说来，这
- 对于个人站长来说，如何能使自己的网站与众不同、充满个性，一直是不懈努力的目标。除了尽量提高页面的视觉效果、互动功能以外，如果能在打开网页的同
- 被AJAX中DOM的操作郁闷了好几天，今天总算搞明白了，自学就是苦啊，苦的一把鼻涕一把泪的，把教训些出来，给后来者提个醒，老鸟就不要看了。下
- 在Https页面中，如果iframe所引入页面是非https协议的页面，或者src属性不存在都可能导致浏览器弹出安全警告。本人在网上查找相关
- 一．WITH AS的含义 WITH AS短语，也叫做子查询部分（subquery factoring），可以让你做很多事情，定义一个SQL片
- MySQL字符集多种多样，下面为列举了其中三种最常见的字符集查看方法，该方法供您参考，希望对学习MySQL数据库能有所启迪。一、查看MySQ
- 一.权限表mysql数据库中的3个权限表：user 、db、 host权限表的存取过程是：1)先从user表中的host、 user、 pa
- 对于软件来说，每一个新版本的推出都应该是一种进步，不可否认，阿里旺旺2008版相较于之前的版本的确是有很多的进步，但进步的同时却也有着比之前
- 米随随在国外某站看到的国际上十四个优秀网页设计审核站，他发现还有中国的哦~HOHO~1.荷兰 strangefruits &nb
- 用途:将UTF-8编码汉字转换为GB2312码,兼容英文和数字版权:虽说是原创，其实也参考了別人的部分算法asp源代码：<％
- ASP由于是一种古老的语言，它的一些功能对UTF-8支持非常差。比如，你想生成一个UTF-8格式的文件，使用常用的 scrīpting.Fi
