金沙国际会员登录

将想法与焦点和您一起共享

用CSS3和HTML5五步打造便签效果发布者:本站     时间:2019-12-20 11:12:42

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

演示 下载

第一步:HTML和基本的方形

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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