您现在的位置是:网站首页> 编程资料编程资料
CSS 像素图制作攻略_CSS教程_CSS_网页制作_
2021-09-09
654人已围观
简介 以图片中的色青蛙为例子。 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 (宽和高)
以图片中的色青蛙为例子。

16X16的像素图,所以使用了如下的命名方法:
1.命名的规则抄袭了XXX栅格化的那篇文章。
(觉得最好是使用连字符这样对于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像素青蛙。
效果:
提示:您可以先修改部分代码再运行

16X16的像素图,所以使用了如下的命名方法:
r N c N - NN = r[0-15]c[0-15]
(r = rol, c-col, N为自然数:0-15 )
(r = rol, c-col, N为自然数:0-15 )
1.命名的规则抄袭了XXX栅格化的那篇文章。
r0c1 即表示:0 横列 1 纵列,也是top跟left的值
NN表示:W H (宽和高)
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教程_CSS_网页制作_
- css 横排 实现代码_CSS教程_CSS_网页制作_
- css 背景透明 实现代码_CSS教程_CSS_网页制作_
- 针对firefox ie6 ie7 ie8的css样式hack_浏览器兼容教程_CSS_网页制作_
- 一个非常精典的纯CSS漫画,登峰造极._CSS教程_CSS_网页制作_
- 关于css @import url()总结_CSS教程_CSS_网页制作_
- CSS 各种滤镜代码解释 用法案例_CSS教程_CSS_网页制作_
- css 控制图片大小 小于固定值 控制大小_CSS教程_CSS_网页制作_
- DIV+CSS 网页布局心得_CSS布局实例_CSS_网页制作_
- CSS 网页内容换行控制_CSS教程_CSS_网页制作_