用CSS3与HTML5五步打造便签效果.docVIP

HYPERLINK / 武汉建网站 HYPERLINK / / 用CSS3和HTML5五步打造便签效果 在本教程中，你会学到如何把HTML的列表项（li元素）转换成下图的“便签墙”。该效果分5步实现。内核为webkit的Safari和Chrome浏览器以及Firefox和Opera中支持该效果，其它浏览器不能实现倾斜和动画效果（译者在IE9中进行了亲测，无法实现）。 HYPERLINK /771_sticky/step5.html \t _blank 演示 HYPERLINK /771_sticky/stickynotes.zip \t _blank 下载 第一步：HTML和基本的方形 我们先从最简单的，能在所有浏览器上正常显示的便签做起。 因为我们要使用HTML5来实现效果，便签的HTML内容的最外一层是不排序列表，其中包含多个列表项，每个列表项中又包含其它元素链接： 注意：每个便签的内容都包括在链接元素当中（即），同时通过键盘可对其进行操作。如果想要对列表项实现效果，我们需要设置atabindex属性， HYPERLINK /apis/webfonts/docs/webfont_loader.html \t _blank Google字体API找到名为“Reenie Beanie”的字体实现字体替换。使用API最简单的办法就是玩玩 HYPERLINK /webfonts/preview \l font-family=Reenie+Beanie \t _blank Google字体预览器： CSS代码很简单就把便签背景色变成黄色： 重新设置列表项在浏览器中通常显示的外边距（margin）和内边距（padding），并去掉它的样式（list-style:none）（译者注：即去掉li元素前的圆点，方框等样式）。 然后设置UL元素的内边距并隐藏它的溢出属性overflow，这样做可以保证稍后为列表项进行浮动排列（float）时，他们不会超出列表，文档中的下列元素会自动清除浮动。 我们把黄色的矩形整体作为链接，并为其设计样式，所有的列表项（即代码中的li元素）向左浮动（float:left）。最终就是一系列的黄色方框排列成下图的效果： 这个排列效果（其实是float元素的浮动）在包括IE6的所有的浏览器中都生效。 第二步：投影效果和草书风格字体 现在，为了让便签突出显示，需要给它增添投影效果，然后，使用草书风格的字体替换掉之前的内容。我们通过 HYPERLINK /userfiles/Auto/2012581335174317341.png  通过该方法，我们得到了一行简单的HTML代码，然后将其放到页面中去。所有浏览器都支持这种网络替换字体的方式。 然后设置便签的内边距（padding），为便签的文字段落换上最新的字体。注意：为了便于阅读，Reenie Beanie字体尽量要设置大一点。 为了让便签在页面中突出显示，需要为它添加投影，这时我们要用到框投影（box-shadow）。为了该样式正确显示，我们必须为每一个想要显示该效果的浏览器添加一行代码（见下面代码所示）。 好在每一个浏览器所需要的狂投影效果不变，语法也就不变：偏移量，阴影扩展量，颜色值。深灰色的不透明度值设为70%。添加新字体之后的便签效果如下图： 第三步：倾斜便签 声明：这一步中将要实现的倾斜效果和下一步的放大效果在Zurb的 HYPERLINK /playground/css3-polaroids \t _blank 文章已经做过解释，但是这两个效果并不是在所有浏览器中都生效，因为在写那文章时，他们并没有过时。所以非常感谢他们分享这些技巧。 为了实现倾斜效果，你需要用到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键时，便签会产生放大的突出效果： ?第