如何利用HTML5/CSS3 只要五步 就可以用HTML5/CSS3快速制作
本篇文章将详细展示如何利用 HTML5 和 CSS3，仅通过五个步骤就制作出便签贴效果的 HTML 页面。以下是最终效果图（注：图里的文字纯属杜撰，用于搞笑目的，如有雷同，纯属巧合）。
需要注意的是，该效果可以在 Safari、Chrome、Firefox 和 Opera 浏览器中正常显示，而在 IE 浏览器上，由于其对 HTML5 的支持不完全，可能无法看到预期效果。
第一步：创建基本 HTML 和正方形
首先，我们要添加基本的 HTML 结构，并构建基本的正方形。以下是相应的代码：
<ul>
<li><a href="#">
<h2>Dudu：</h2>
<p>最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!</p>
</a></li>
<li><a href="#">
<h2>汤姆大叔：</h2>
<p>Team 的一个成员去了 Microsoft 做 SDE3，又得 hire new member 了</p>
</a></li>
<li><a href="#">
<h2>技术弟弟：</h2>
<p>O2DS 和我翻译的书是一样，我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>
</a></li>
<li><a href="#">
<h2>Artech：</h2>
<p>WCF 的帖子真是少，看来我得多发点帖子让大家学习呢</p>
</a></li>
<li><a href="#">
<h2>吉日嘎拉：</h2>
<p>将权限管理、工作流管理做到我能力的极致，一个人只能做好那么很少的几件事情</p>
</a></li>
<li><a href="#">
<h2>某武林高手：</h2>
<p>低于 25000 块的面试再也不去了，它 grandma 的</p>
</a></li>
</ul>
为每个便签添加 href 链接，主要是为了支持键盘访问。接下来是对应的 CSS 代码：
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 100%;
margin: 3em;
background: #666;
color: #fff;
}
h2, p {
font-size: 100%;
font-weight: normal;
}
ul, li {
list-style: none;
}
ul {
overflow: hidden;
padding: 3em;
}
ul li a {
text-decoration: none;
color: #000;
background: #ffc;
display: block;
height: 10em;
width: 10em;
padding: 1em;
}
ul li {
margin: 1em;
float: left;
}
完成上述代码添加后，页面将呈现初步效果。
第二步：阴影和手写草体字
在这一步，我们要实现正方形的阴影效果，并将字体改为草体（仅限英文）。由于 Google 提供了 Font API 的支持，我们可以直接使用。首先，添加对 Google API 的调用：
<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
然后，设置引用这个字体：
ul li h2 {
font-size: 140%;
font-weight: bold;
padding-bottom: 10px;
}
ul li p {
font-family: "Reenie Beanie", arial, sans-serif, 微软雅黑;
font-size: 110%;
}
关于阴影效果，由于各个浏览器对相关属性的支持不完全一致，所以需要分别处理。以下是对应的代码：
ul li a {
text-decoration: none;
color: #000;
background: #ffc;
display: block;
height: 10em;
width: 10em;
padding: 1em;
/* Firefox */
-moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
/* Safari+Chrome */
-webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
/* Opera */
box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
}
完成上述操作后，页面效果将得到进一步提升。
第三步：倾斜正方形
为了让正方形呈现倾斜效果，我们需要在 li > a 中添加如下代码：
ul li a {
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
}
但是，为了让正方形随机倾斜，而不是全部统一倾斜，我们需要使用新的 CSS3 选择器。具体来说，让正方形每 2 个倾斜 4 度，每 3 个倾斜 -3 度，每 5 个倾斜 5 度。以下是相应的代码：
ul li:nth-child(even) a {
-o-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
position: relative;
top: 5px;
}
ul li:nth-child(3n) a {
-o-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
position: relative;
top: -5px;
}
ul li:nth-child(5n) a {
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
top: -10px;
}
添加上述代码后，正方形将呈现出随机倾斜的效果。
第四步：Hover 和 Focus 时放缩正方形
若想在鼠标悬停（hover）和元素获得焦点（focus）时实现正方形的缩放效果，我们需要添加如下代码：
ul li a:hover,
ul li a:focus {
-moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
-webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position: relative;
z-index: 5;
}
设置 z-index 为 5 是为了让正方形在放大时能够覆盖其他正方形。同时，由于设置了 focus，也支持使用 Tab 键切换访问。完成代码添加后，即可看到相应的效果。
第五步：平滑过渡和添加颜色
第四步实现的特效在视觉上可能会显得有些生硬，我们可以通过添加 Transition 来实现平滑动画效果。另外，当前颜色较为单一，我们可以设置不同的颜色。首先，在 ul > li > a 中添加 Transition：
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
-webkit-transition: -webkit-transform .15s linear;
然后，在 even 和 3n 中定义不同的颜色：
ul li:nth-child(even) a {
-o-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
position: relative;
top: 5px;
background: #cfc;
}
ul li:nth-child(3n) a {
-o-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
position: relative;
top: -5px;
background: #ccf;
}
完成以上操作后，我们就完成了最终的便签贴效果。
总结
至此，我们利用 HTML5 和 CSS3 的基本特性成功制作出了一个不错的便签贴效果。HTML5 和 CSS3 确实功能强大，如果再结合一些高级特性，比如与 JavaScript 结合，能够实现更加复杂和出色的效果。从相关专家提供的 HTML5 实验室系列文章中，我们可以更深入地了解其强大之处。
再次声明，图里的文字纯属杜撰，如有雷同，纯属巧合。