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 (宽和高)
以图片中的色青蛙为例子。


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

效果:



提示:您可以先修改部分代码再运行
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

子绝父相 这个子绝父相太重要了,是我们学习定位的口诀,时时刻刻记住的。 这句话的意思是 子级是绝对定位的话, 父级要用相对定位。 首先, 我们说下, 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位)的父元素(祖先)进行定位。 就是说, 子级
分页条是web开发中常用的前端组件之一,它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件,但是你的项目可能不用到Bootstrap,你想自己定制一个属于你自己项目的漂亮的分页条,那么请看本文。 本文给大家介绍用纯CSS
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行。 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/*
css margin用于设置对象标签之间距离间隔,例如如果要使两个div标签之间有一定的间距,我们可以使用css margin属性来设置。本文章向码农介绍css margin外边距使用方法和实例,需要的朋友可以参考一下。
在网站开发中,css float是一个经常需要使用的css属性,改属性用于设置css块级元素的浮动方向(左右浮动)。本文章向码农介绍css float使用方法和实例应用,需要的码农可以参考一下。
css sprite直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下。