导航是WEB页面中不可或缺的一部分，以前制作渐变、圆角类型的导航，都需要使用背景图片来制作，今天给大家介绍一个使用CSS3制作的导航效果，在这个实例中主要运用了CSS3的渐变和box-shadow。

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

CSS3制作一个类似于文件Loading的效果，在这里没有写动画效果，主要考虑文件加载对应的文本，css实现效果会有难度。在这个DEMO中主要运用了四个知识点：第一是google font api，用来制作特殊的英文字体效果；第二个是使用CSS的渐变，制作了渐变的面板效果；第三使用box-shadow，制作面板之类的描边效果；第四就是使用border-radius制作圆角效果。

本实例看起来有点像太极，其实更如一块环形的玉佩，设计比较好看。先设计一个圆形填充一个135deg的两个颜色的渐变，各位一半。然后设计三个子元素为上中下的小圆，一个为浅色的与渐变背景的浅色的一样，一个为黑色的充当中间的孔，一个为深色的与渐变背景的深色一样，为了表现更佳，给这三个小圆各自应用了box-shadow生成阴影。然后就是父元素的animate转动360deg。

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

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

导航菜单其实是没有什么可说的，制作方法到处可见，今天这个案例本来不只是一个导航，还有一个搜索表单的，可是为了偷懒，把搜索表单部分去掉了，就变成了一个CSS3制作的下拉菜单。在这个导航中主要两点，一个是渐变运用，另一个就是box-shodow制作的立体效果。

W3cplus从今天刚开推出藤藤练习的CSS3系列。出这个系列主要是为了让同样有着CSS3兴趣的同学更有动力，在这个系列中都是由W3cplus美女成员藤藤每天根据国外搜集的有关psd设计图，然后将设计图通过css3的代码转换成DEMO案例。一是为了自己提高，二是与其他有同样爱好的同学一起分享。如果你喜欢，那就持续关注w3cplus的有关更新。

站上已经放了多个CSS3制作的表单效果了，但为增强大家的视野，继续跟大家分享一个CSS3制作的登录表单。这个案例其实很简单，主要使用box-shadow做了分层纸张效果，使用gradient制作渐变按钮效果，然后就是@font-face制作的icon效果。其实这些理论方面的知识在站上都能找到，如果你是第一次接触这些，不仿试着查找一下。

这个案例是由@猫仔同学提供的。最大的亮点就是使用了CSS3制作了卷边效果，配上js的移动效果，真是与众不同。在这个demo中主要运用了border-radius制作卷边效果，使用gradient实现了导航的渐变效果，而且还使用了border绘制了向上的箭头，同时给箭头配上了一个css3的动画效果。真的不错哟。