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

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

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

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

……（10分钟过去鸟）

好，看下面的代码（只贴了webkit的实现，其他的太多，不想写，下同～ <......

例牌的唠叨

想当年哇，刚写编程的时候，做页面想用些绚丽的效果，可那个时候不会js，才刚学java，哪那么快搞股这么多东西呢。无奈只好google搜（当年google这愣头青还才跑进中国呢），找了一大堆，不是运行出错就是只支持ie，真是坑爹啊~~

当年菜单特效很流行，好像没有动画就不能进菜单家门了。在google N久之后，我也终于找到一个滑动背景效果的代码。不懂原理，也用得不亦乐乎。

以上都是废话

嗯，以上都是废话 :oops:。最近偶然看到以前做的滑动背景菜单，看了下代码，都快笑喷了 -- 天啊，我竟然写过这么挫的代码! 所谓滑动背景菜单，就是鼠标移上去，会有一个气泡什么的垫......

倒倒苦水

做完这个小玩意之后，我觉得，我一定是闲得蛋疼才做的。嗯，一定是的。

话说昨天今天加班，下午下班前总算把临时变更的需求完成的七七八八了，昨晚又爬了一趟南山，累的不行...

想起某个产品说的，工作累了，就写写代码，休息一下 =_=||

好了，言归正传。下午偶然看到一个jquery+css3实现的时钟，挺漂亮的，突然觉得是不是也可以用纯css3整一个，于是乎...先看看最终效果

或者你也可以直接点这里看代码（因为我太喜欢啰嗦啦...）

more

表盘

好了，先搭个结构，html挺简单的，没几个代码，看看下面：

<div class=&qu......

话说，CSS3的事实标准出来那么久了，很多属性都开始去掉私有前缀了，如 box-show。如果你还不知道box-show是什么，那只能说你是个正常人类，不是前端攻城师，可以离开这里回去地球了。

既然你还在继续看到这，那么你可能知道box-shadow，不过我还是要讲概念，^_^。 box-shadow，顾名思义就是盒子阴影，可以给一个块级容器加上阴影或者发光效果。效果如下：

把阴影的颜色和透明度调整下，就可以整成发光效果了。不过今天的主角不是他。略过。

说回正事，这box-shadow虽然好用，可是有时还会遇到蛋疼的设计。 搞出只有一边的内阴影。而box-sh......

话说，很久很久以前，一直到不久前，浏览器原生的checkbox(复选框)的样式大部分都不能改的，在各个浏览器中的外观和行为都不一致，这是一件相当让人蛋疼的事。

而在那个远古的蛮荒时代，还生活着一种叫攻城师的生物，每天被产品经理们强迫着，想方设法让checkbox外观一统江湖，苦不堪言。

在那个时代，css2和dom level2风行，却对checkbox束手无策，苦逼的攻城师们只能用JS来模拟checkbox的行为，无辜的checkbox只能灰溜溜的束之高阁~.~more

终于，新时代还是来临了~攻城师的救世主——CSS3，就像十字军东征一样，所向披靡，一往直前的来到我......

该方法用到主要特性是 gradient

gradient只有ff和webkit内核的浏览器有支持，不过目前都还是私有的，不知道何时才能标准化

在ff和webkit的调用方式都还不一样，具体可以看这里和这里，说明的很清楚了

ie可以用滤镜达到效果，一如既往的无视它

来看看效果先：

more

用到的主要代码如下：

完整的demo请点击这里

废话少说，先上图：

当然了，transform属性目前的ie不支持，但那不关我事。

传说也可以用滤镜解决，具体办法到google搜"css 垂直排列日期"就有了。more

rotate是一个使目标旋转的属性，属性值从-180到180都行，可以认为是试一个点绕着圆心转，不过转360也没意义。

目前支持的浏览器有Ff、webkit内核、以及opera

原理很简单，将日期按照"月/日/年"的顺序上下排列，然后旋转年份-90度，再通过translate属性进行位移定位

主要代码如下，demo请点击这里：

下午在看《ajax权威指南》，看了多级菜单部分，想了想，觉得可以用纯CSS做一个。

用了CSS2的子对象选择符“>”和伪类“hover”，可以IE6不支持子对象选择符，除A之外的标签页不支持hover，所以无视IE6，咱们做web前端的已经被IE6害的够惨的了。

兜远了……直接上图，想要多少级就多少级。

more

demo请点击这里 , CSS代码如下：