白牙同学好久都没有做练习了，今天为大家带来一个CSS3制作的简单大型导航，运用到的CSS3属性包括圆角border-radius、渐变、盒子和文字阴影等等。

这个表单效果是很普通，但其制作采用的方法却很有创新，其中用到老技术的是@font-face制作icon、box-shadow制作阴影等，最亮点是使用了calc（）函数来计算定位的值。这可是一种新玩法，虽然前面有介绍过这个属性的使用方法，后期的制作中却很少使用他，这个案例让我再次领略了calc()函数的功能。如果你喜欢，也可以尝试一下，自己动手丰衣足食。

好久没有发布案例了，今天发布一个@白牙同学制作的登录表单，这个表单风格类似于日历。其中较为复杂的是登录表单的中链环效果。通过五个span标签，配合CSS3的伪类来制作。详细制作请查看Demo制作过程。

Tooltip的效果，在Web上的运用对大家来说不在陌生了，然而很多tooltip的效果都是依赖于JavaScript或者jQuery来实现。但是随着IE6的慢慢死去，制作这样的效果是无需任何脚本语言来支持。今天我们一起来看一款使用CSS3制作的下拉工具条，也类似于tooltip的效果。在这个效果中比较难处理的是阴影色配合，另个整个效果最有特色的是CSS3属性选择器的运用。感兴趣的话继续往下看吧。

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

Buttons的制作，现在几乎无需任何图片就可以实现（当然需要忽略IE低版本），而且我现在做的项目，按钮基本上使用CSS3来制作，让那些不支持CSS3的浏览器就用纯色显示，让现代浏览器给用户带来更好的体验。至于Buttons的制作，在W3cplus上也是有很多案例了，今天我再次老调重弹，制作了Icon的button，而且制作了三种形态，3D立体按钮，内描边按钮，圆角按钮，而且配置了多个颜色，希望这些按钮能让你直接用到你的项目中（w3cplus的案例效果，已经有很多网站在直接使用（^_^））。

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

Sprites熟悉的人较多，在国内有有称之为精灵，也有人称之为雪碧，我个人更喜欢称之为Sprites图像。在一张图上集成了很多个图，然后通过background-position定位，达到背景图显示正确的效果，减少Http的请求个数，从而优化性能。而background-size来说，如果你没有接触过CSS3方面的相关知识，那可能会比较陌生，不知道如何使用，其实很简单，就是通过这个属性来改变背景图片的大小。很神奇吧。那么，为什么 这两个东东就跟Retina屏幕设备扯上了关系呢？要是你有了解过Retina，你就知道是为什么了，要是你从未了解过，也无需担心，继续阅读这篇博文，你就知道为什么了。

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

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