用CSS3和HTML5五步打造便签效果

在本教程中，你会学到如何把HTML的列表项（li元素）转换成下图的“便签墙”。该效果分5步实现。内核为webkit的Safari和Chrome浏览器以及Firefox和Opera中支持该效果，其它浏览器不能实现倾斜和动画效果（译者在IE9中进行了亲测，无法实现）。

演示 下载

第一步：HTML和基本的方形

我们先从最简单的，能在所有浏览器上正常显示的便签做起。 因为我们要使用HTML5来实现效果，便签的HTML内容的最外一层是不排序列表，其中包含多个列表项，每个列表项中又包含其它元素链接：

注意：每个便签的内容都包括在链接元素当中（即），同时通过键盘可对其进行操作。如果想要对列表项实现效果，我们需要设置atabindex属性，Google字体API找到名为“Reenie Beanie”的字体实现字体替换。使用API最简单的办法就是玩玩Google字体预览器：

CSS代码很简单就把便签背景色变成黄色：

重新设置列表项在浏览器中通常显示的外边距（margin）和内边距（padding），并去掉它的样式（list-style:none）（译者注：即去掉li元素前的圆点，方框等样式）。

然后设置UL元素的内边距并隐藏它的溢出属性overflow，这样做可以保证稍后为列表项进行浮动排列（float）时，他们不会超出列表，文档中的下列元素会自动清除浮动。

我们把黄色的矩形整体作为链接，并为其设计样式，所有的列表项（即代码中的li元素）向左浮动（float:left）。最终就是一系列的黄色方框排列成下图的效果：

这个排列效果（其实是float元素的浮动）在包括IE6的所有的浏览器中都生效。

第二步：投影效果和草书风格字体

现在，为了让便签突出显示，需要给它增添投影效果，然后，使用草书风格的字体替换掉之前的内容。我们通过

通过该方法，我们得到了一行简单的HTML代码，然后将其放到页面中去。所有浏览器都支持这种网络替换字体的方式。

然后设置便签的内边距（padding），为便签的文字段落换上最新的字体。注意：为了便于阅读，Reenie Beanie字体尽量要设置大一点。

为了让便签在页面中突出显示，需要为它添加投影，这时我们要用到框投影（box-shadow）。为了该样式正确显示，我们必须为每一个想要显示该效果的浏览器添加一行代码（见下面代码所示）。

好在每一个浏览器所需要的狂投影效果不变，语法也就不变：偏移量，阴影扩展量，颜色值。深灰色的不透明度值设为70%。添加新字体之后的便签效果如下图：

第三步：倾斜便签

声明：这一步中将要实现的倾斜效果和下一步的放大效果在Zurb的文章已经做过解释，但是这两个效果并不是在所有浏览器中都生效，因为在写那文章时，他们并没有过时。所以非常感谢他们分享这些技巧。

为了实现倾斜效果，你需要用到CSS3中的transform当中的旋转属性（transform:rotate），在该属性前面添加支持该效果的浏览器前缀：

所有框都向左倾斜6度（即：rotate（-6deg））。接下来，通过CSS3对中的nth-child属性对便签进行随机倾斜。

 

每2个框（即当前框的数目为2的倍数时）向右倾斜4度，距离顶部的偏移量为5像素（top:5px）。每3个框（即当前框的数目为3的倍数时）向左偏移3度，每5个框（即当前框的数目为5的倍数时）向右倾斜5度，距离底部的偏移量为10像素。总的来看，便签的随机倾斜效果如下：

第四步：鼠标悬停时，便签放大

为了让便签引人注目，我们使用了加强了的投影效果，并用CSS3为便签添加了过渡效果。另外，我们需要为每一个浏览器定义过渡效果的scale值：

为确保放大的便签覆盖其它的，我们增大了z-index的值（增加到了5）。因为我们为它应用了：hover和：focus两个伪类，也就意味着当鼠标悬停，或使用键盘的tab键时，便签会产生放大的突出效果：

 第五步：添加平滑过渡效果及颜色

最后一步是做一些小变化，让放大效果更平滑，更吸引人。我们使用CSS3中的过渡模型（transition）在不同的浏览器里实现这一效果：

从本质上讲，如果这些元素发生改变（译者注：当鼠标滑过时），不要马上切换到我们所定义效果，经过0.25秒或1秒的过渡时间，这样看起来才自然。另外，我们为这些框进行混色添加，每两个便签（ul li:nth-child（even））填充绿色，每三个便签（ul li:nth-child（3n））填充淡蓝色：

为了看到不同浏览器中所实现的效果，你最好将最后一个展示demo放在其它浏览器中试一下。

总结

我们的便签效果终于完成了，在没借助任何图片和JavaScript，我们实现了便签的倾斜和平滑动画效果。不过该效果只支持FireFox，Opera，Safari和Chrome浏览器，而老式浏览器是不支持倾斜和动画效果的。在nth-child选择器和CSS的变形效果，过渡效果帮助下，我们不用脚本同样达到了自己想要的效果。此外，Google的网络字体API对于自定义字体的使用很简单。hover和focus两个伪类的使用意味着用户通过键盘操作也能看到效果。