Pagination（分页导航）效果，可以说每个网站都会有的效果，制作原理简单，今天我们也用css3制作了一个分页导航的效果，整个效果使用的CSS3属性很少，主要使用gradient来制作了渐变图片，使用border-radius来制作了圆角，不过藤藤在这个案例中为了模仿“active”效果，使用了“:target”属性来做的，实际生产中建议这么使用，因为active可以通过程序来控制，不是我们CSS的菜。详细的看代码吧，希望大家喜欢。

Breadcrumbs（面包屑），在网站上也是常见的一种UI效果，但这种效果大家看到的都是很普通普通的效果，使用CSS3制作的一些特殊效果，可能很少见吧。虽然早前在《CSS 制作Breadcrumbs》一文中搜集和制作了一些效果，但这些效果都没有运用动画效果。今天这个案例使用CSS3的几个属性制作了一个带有动画的Breadcrumbs效果，感兴趣的可以看看。

由于藤藤忙于考试，所以好久没有和大家分享CSS3的案例了，今天藤藤特意整理了一个DEMO与大家分享。这个案例是一个圆形转盘导航，初看效果可能很多人都会认为不可思议，CSS3能做出这样的效果，是的，真的是CSS3做的。在整个效果中有几个关键之处,扇形形是通过clip、border-radius和transfrom来实现，其中使用gradient和box-shadow制作了不同的颜色块。对于icon就不用说了，@font-face来完成的。如果你感兴趣，不仿自己先思考一下。

下拉菜单如果不需要兼容IE6的话，完全可以不依赖于任何js脚本实现，今天这个案例也是有关于CSS下拉菜单，但有别于以往的，主要区别是子菜单是固定显示在那，而不是默认隐藏，鼠标悬浮显示的那种，另外还通过CSS3添加了一个滑动块的效果，以前这种滑动块效果也是需要js来实现，今天看到的是没有使用任何脚本代码，感兴趣的不仿一看。

辞岁迎新，在2012年w3cplus为大家提供了116个案例，其中案例有原创，也有仿制，同时也有转载，但这些案例都是最新，最有创意的，也是我们精心挑选的，让我从中获益不浅。从藤藤加入w3cplus后，我们开辟了一个藤藤每日一练 栏目，她经过自己的努力和大有分享了近四十个有关于CSS3的案例，这些案例有的是独立创造的，有的是根据国外知名的设计图，将设计转换为CSS3的code。我想有很多同学从中学到了自己想学的知识。我们将在2013年会为大家推出更多的、更有意义的案例。今天藤藤为大家提供新年来第一个案例。希望大家喜欢，更希望大家能支持我们w3cplus的发展。

Metro UI风格大家一定见识了不少，至于其好坏我们在此不做讨论，今天开始，我们在w3cplus上会推出一系列的Metro UI设计风格的DEMO，当然这些DEMO不是仅仅的Metro UI风格，我们会尽量使用CSS3属性，让其效果更佳优美，或者我们也会将其结合Bootstrap制作一些DEMO以供大家学习。另外广大网友提意在DEMO中加入简单的介绍，方便理解。那么从今天开始的DEMO，我们会加入一些说明，如果您有更好的建议，希望能告诉我们。谢谢！

这是一个很简单也很普通的登录表单的效果，只不过这个案例采用的是Metro的UI设计风格，当然不是Metro UI CSS中的东西，设计风格，色彩类似于Metro。另外在加载表单时，给部分元素使用了transition属性，让你在视觉上加载有动画，其在input[type="text"]得到焦点时，使用了box-shadow模仿了border效果。

这一个个人信息面板导航效果，整个效果展示的是个人相关信息的菜单项，以及搜索功能。在这个案例中使用的CSS3属性相对较多，有transition做的过渡动画效果、有transform做的3D旋转动画、@font-face实现的icon效果，gradient制作的双色块导航背景。而其中运用的最好的是CSS3的选择器，整个案例中使用了多个CSS3选择器，来控制需要选择的元素，比如说“:not”选择器，“nth-children()“选择器，详细的请看Demo的整个实现过程。

这个效果我一拿到效果，让我惊叹了一翻，使用纯CSS3代码制作了一个莲花开放的效果，藤藤利用自己所掌握的CSS3知识将Niels Doorn使用js和CSS3制作的莲花开放的案例修改成了纯CSS3的案例。在这个案例中，最关键之处是莲花开放的八个花瓣开放时的时间配合与旋转角度的配合。藤藤为了调整这个时间，花费了不少精力。你看到这个DEMO也会像我一样惊叹。

Metro风格成了一种新的设计风潮，久违的了藤藤根据国外友人提供的Metro设计图，把整个Metrostyle设计转换成CSS代码，其中一些效果使用了CSS3来制作，比如说自定义时间动画、加载进度长，复选框自定义、tooltip提示框等效果。在整套Metrostyle UI中包括了：导航（含下拉导航效果）、登录表单、下拉控件、搜索表单、自定义选择框、时钟、加载进度条、日历、icon图标、视图按钮、分享按钮、复选框、色板、功能按钮、垂直手风琴、视频播放器面板、选项卡、按钮和价格区块等20个Web中常见的UI效果。