用CSS3和HTML5五步打造便签效果（2）
发布时间：2012-04-25 20:47:51
标签：css3,html5,便签
通过该方法，我们得到了一行简单的HTML代码，然后将其放到页面中去。所有浏览器都支持这种网络替换字体的方式。
然后设置便签的内边距（padding），为便签的文字段落换上最新的字体。注意：为了便于阅读，Reenie Beanie字体尽量要设置大一点。
为了让便签在页面中突出显示，需要为它添加投影，这时我们要用到框投影（box-shadow）。为了该样式正确显示，我们必须为每一个想要显示该效果的浏览器添加一行代码（见下面代码所示）。
好在每一个浏览器所需要的狂投影效果不变，语法也就不变：偏移量，阴影扩展量，颜色值。深灰色的不透明度值设为70％。添加新字体之后的便签效果如下图：
第三步：倾斜便签
声明：这一步中将要实现的倾斜效果和下一步的放大效果在Zurb的文章已经做过解释，但是这两个效果并不是在所有浏览器中都生效，因为在写那文章时，他们并没有过时。所以非常感谢他们分享这些技巧。
为了实现倾斜效果，你需要用到CSS3中的transform当中的旋转属性（transform:rotate），在该属性前面添加支持该效果的浏览器前缀：
所有框都向左倾斜6度（即：rotate（-6deg））。接下来，通过CSS3对中的nth-child属性对便签进行随机倾斜。
0
投稿猜你喜欢
- ancestor：祖先adjacent：相邻algorithm：运算法则anonymous box：无名盒子。例： anonymous in
- 在近日的写Web程序时用到了Access的模糊查询,在Acces里写代码怎么也找不到记录后来才起来原来Acess和SqlServer的模糊查
- 见下：<％ FOR i = 1 TO 1000 n =
- function createobj() { if (window.ActiveXObject)&n
- 滚动图片可以说是做网站经常会遇到的，特别是做企业网站，最常用的像产品展示，图片展示等，滚动的好处是吸引眼球，让人一下就注意到。之前本站发了一
- 本文回答了如下问题：“MySQL服务器有多稳定?”，以及“在本项目中我能依靠My
- 这里提供三种方法：1,使用正则表达式Function regKillHTML(str) &nb
- 在MySQL数据库中导出整个数据库：1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
1、什么是超链接图标规范超链接图标规范是我根据《Iconize Textlinks with CSS》修改调整完成的。主要是整理出常用到的一- 有时候，因为内容的更改或者隐私问题，我们往往不 希望别人通过“百度快照”的方法 查看 自己网站的某一些网页，对于网站管理员来说，百度快照也分
- 本章的前面讨论如何使用SQL向一个表中插入数据。但是，如果你需要向一个表中添加许多条记录，使用SQL语句输入数据是很不方便的。幸运的是，My
- 看看下面：<％Set objQuery = Server.CreateObject("ixss
- 做项目的时候，一位同事导数据的时候，不小心把一个表中的数据全都搞重了，也就是说，这个表里所有的记录都有一条重复的。这个表的数据是千万级的，而
- 读《论语》，子张十九，子夏曰：博学而笃志，切问而近思，仁在其中矣。 博学：架构需要广度，要尽量多学习各方面的知识。笃志：除了广度，架构师还需
- Jaslabs的Justin Silverton列出了十条有关优化MySQL查询的语句，我不得不对此发表言论，因为这个清单非常非常糟糕。另外
- Oracle是世界上用得最多的数据库之一，活动服务器网页(ASP)是一种被广泛用于创建 * 页的功能强大的服务器端脚本语言。许多ASP开发人
- 以前工作的时候由于Oracle8i数据库经常出现用户过多的错误,由于数据量大,经常出现ORA:12500错误,但主要原因是访问过多而引起的,
- 内容摘要：统计在线人数的方法很多，可以使用Application来统计在线人数，也可以使用IP来统计在线人数。各有优点。本文介绍了通过判断S
- 说到这个话题，我们有个产品叫群组，为什么人们需要群组？简单说，群组就是个圈子，是有共同爱好和话题的人群聚在一起讨论、分享的地方。这个产品的诞
- 刚刚登甲发来一个文章,看到只要一行代码,就可以把IE6弄死.<style>*{position:relative}&
