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
投稿猜你喜欢
- 本文实例讲述了Python验证码识别的方法。分享给大家供大家参考。具体实现方法如下：#encoding=utf-8import Image,
解决空格和空行报错问题到build文件夹下面的webpack.base.conf.js文件。然后打开该文件，找到图下这段代码，把他注释掉。注- 目录一、目标二、环境准备1、基本信息2、数据库环境准备3、建库 & 导入分表三、配置&实践1、pom文件 &nbs
- 一、Sql Server中的日期与时间函数 1. 当前系统日期、时间 select getdate() 2. dateadd 在向指定日期加
- 安装方法一：①进入python文件夹执行指令(前提是支持pip指令)：pip3 install Beautifulsoup4②回车待安装完成
- 1. 定义用一行构建代码例题# 构建一个1-100的列表l1 = [i for i in range(1,101)]print(l1)# 输
- 图片数据一般有两种情况：1、所有图片放在一个文件夹内，另外有一个txt文件显示标签。2、不同类别的图片放在不同的文件夹内，文件夹就是图片的类
- python处理数据时，可以将数据保存至excel文件中，此处安利一个python利器，openpyxl，可以自动化处理数据值excel表格
- 如何在第10000名来访者访问时显示中奖页面？看看下面的代码：< SCRIPT LANGUAGE=VBScript
- 1.数组的索引我用的是iloc函数。导入数据是data，索引data.iloc[i,j]，i代表行，j代表列。如果要索引i行之后的所有行元素
- DW2004的中文乱码情况你遇到过么？乱码一般是怎么出现的呢？也许很多时候用其他软件（比如Editplus）写程序的时候，忘了meta标签里
- 本文实例讲述了Python爬虫之pandas基本安装与使用方法。分享给大家供大家参考，具体如下：一、简介：Python Data Analy
- 对于内容驱动的网站，设计好坏的关键是关系型数据库。在这个教程中，我们已经使用了MySQL关系型数据库管理系统(RDBMS)建立了我们的数据库
- 1069错误（由于登录失败而无法启动服务）解决方法在本版面出现这个问题的频率也算是很高的了，新手通常会比较多遇到这个问题原因很简单，安装SQ
- 使用eslint和editorconfig方式使用eslint的好处1、避免运行时因格式问题报错2、方便团队合作，代码风格统一安装eslin
- 很多开发人员在使用MySQL时经常会在部分列上进行函数计算等，导致无法走索引，在数据量大的时候，查询效率低下。针对此种情况本文从MySQL5
- 一，extract方法的使用extract函数主要是对于数据进行提取。场景一般对于DataFrame中的一列中的数据进行提取的场合比较多。例
- 查询死锁进程语句select request_session_id spid, OBJECT_NAME(resource_associate
- 今天发现sympy依赖的库mpmath里也有很多数学函数，其中也有在复平面绘制二维图的函数cplot，具体例子如下from mpmath i
- template 概述最近在做脚手架相关的内容, 研究了一下 Go 的 text/template 包, 接下来跟大家分享下 templat
