话说昨天在写在线素描的时候,想着给画布加上些网格,就跟PS里面的一样。但是用canvas画是不行的(注:不是它不行……),图片又让我不齿,就作罢了。

今天想着要不尝试着用CSS3画一个,找了些资料,看了下CSS3的所有属性,竟然也被我找到画网格的方法了,喔~哇哈哈哈~~

这些属性就是——linear-gradient、background-size,大家鼓掌欢迎他们~

那到底要怎么做呢?我们暂时不考虑网格,先想想,怎么画一条横线呢?more

……(10分钟过去鸟)

好,看下面的代码(只贴了webkit的实现,其他的太多,不想写,下同~ <_<):

.grid{
    background:
        -webkit-linear-gradient(top, transparent 39px, blue 40px);
}

它的效果是酱紫滴:

前面39px的都是透明的,那只要让40px之后的也是透明的或者看不到不就成了一条线了么。这时background-size就上场咯。何谓background-size?w3cschool如是说:

The background-size property specifies the size of the background images.
也就是指定背景图片(渐变也是个图片)的大小。比如说一张100 x 100的图片,可以用这个属性指定只显示其中的30 x 20(纯属举例)。这里把水平限制设置为100%(也就是不限制),垂直方向限制成只显示40px的范围。这样就会漏出1像素的蓝色,看上去就成了一条线了。

.grid{
    background:
        -webkit-linear-gradient(top, transparent 39px, blue 40px);
        background-size: 100% 40px;
}

可以看到,当不设置背景平铺的时候,横线就出来了吧。加上repeat之后,hoho,就成了信纸咯~

那么,接下来的事就容易过剃头啦(么剃头很容易么)!利用CSS3的多重背景,依个葫芦画个瓢再加个垂直的竖线,就搞定咯。完整的代码如下:

.grid{
    background:
        -webkit-linear-gradient(top, transparent 39px, blue 40px),
        -webkit-linear-gradient(left, transparent 39px, blue 40px)
        ;
    background-size: 40px 40px;
}

呼~大功告成!如果你的浏览器支持CSS3,可以到这里查看live demo。不过这个网格是不是有点单调?如果你够创意,可以整成更炫哦~比如说:2px宽,颜色相间的网格——

嗯,剩下的就各位自由发挥了,hoho~~

Comments
Write a Comment
  • www.94haha.com reply

    很多东西都挺实用呢

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟