这是第三个tabs的标题设计了，这次应用的又跟上两个不是一样的技术。这里用了:after来生成了，然后对生成的内容水平方向上扭曲skewX来达到斜切的效果。当然li的margin距离要刚好等于生成a:after生成内容的宽度。然后就是注意box-shadow了。注意火狐14.0更新后，skew得写成skewX或skewY分别表示水平方向和竖直方向偏移，这里它的demo用的是skew，所以火狐下并没有斜切的效果，我们可以firebug手动添加。

这里总共有四种面包屑效果，其中第一种运用:before和:after，运用border生成同等大小的尖角，叠加起来左右错动1px；第二个还是运用:before和:after，运用border生成不同的尖角，一个在左一个在右；第三个是运用一个:after生成一个正方形，设置border-radius然后rotate旋转45度；第四个直接运用水平扭曲就skewX就可以了。

本实例主要是对:before及:after的应用，比较初级，浅显易懂，适合入门。第一个使用border-left和负margin，跟css3没有关系，就是应用了rgba这个属性，使border的颜色有一定的透明值；第二个运用:before和:after生成两个三角叠加起来；第三个背景应用了linear-gradient，然后加上:before和:after生成的三角左右两边各一个；第四个则应用了:after生成元素，然后box-shadow生成阴影，再加上rotate旋转一点角度。这四个虽然比较简单，但是还是非常实用的。

本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容，两个不同点在于绝对定位的位置一个为left，一个为right，然后渐变背景的方向刚好相反；最后当鼠标滑过改变高度宽度及透明度，就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化，所以该实例如同先前的那个:hover状态下的激发伪元素动画一样，webkit内核是不支持的。

今天在群讨论一个导航制作（凤凰网娱乐），看过同学发来的gif动画图，想将此图转画为CSS3导航，动手试了一下，还是可以实现的。在这个实例中中要运用了以下知识点：box-shadow,CSS制作图形，旋转，动画。感兴趣的同学可以来围观。

首先非常感谢藤藤提供的代码，是她用CSS3写的一个分享按钮的效果，而且写得非常不错。结过她的同意，我稍加做了点点的修改，增加了ICON图标上去，让效果看上去更清晰一些。在这个效果中主要使用了：CSS3的伪类选择器（伪元素）、box-shadow和@font-face三个属性，结过颜色细腻的搭配，制作了这么一个完美的分享按钮。

本实例主要应用了checkbox的:checked状态来设置其同级后面的label元素的样式及:before&:after生成的内容。所以我们看到的样式其实不是checkbox的，而是其同级后面的label元素的。

在发这个案例前，首先非常感谢藤藤加入w3cplus，今天开始w3cplus又多了一员猛将，我们会继续为大家制作一些实际可用的CSS3案例，帮助喜欢CSS3的同学一起学习和成长。今天这个案例就是藤藤（本来是要用藤藤的名发布，但由于我们设置还出了问题，所以先放上来让大家看看效果吧）制作的，将两张psd图转换到一个CSS3案例中。在这个案例中主要使用了：CSS3渐变制作日期的头部渐变效果；使用box-shadow制作了多层纸张的效果。

这个效果是一个CSS3制作的时钟，不过并不是我们传统的时钟风格，分别用三块显示时、分、秒三个部分，而且这个DEMO中藤藤还为其加上了一个js的效果，能让这个效果和现实时钟的时间同步。这个效果运用到的CSS3知识点就是渐变、阴影，而最为关键的就是CSS3的渐变制作。

W3cplus第三版本皮肤更新好长一段时间了，早就想把站点上的一些CSS3效果分割成单独的案例出来，与大家分享，但受限于时间，今天抽空把页面底部面板效果整理出来了。首先这个效果是有原因的，因为这个效果是当初自己左拼右拼出来的一个效果，后来自我感觉还能接受。上线后也有很多同学问我是图片制作的吗？其实不是的，他是一个CSS3制作的效果。