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

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

这个Demo是一位在校大三的学生白牙制作的，从今天开始白牙同学也将为大家带来很多CSS3的DEMO效果，将会涉及各个方面的UI效果，比如说常见的Button UI，Form UI，Menu UI等等。同样这些CSS3 UI效果都是将国外的一些优秀的UI设计图（psd）转换成CSS代码，让更多的学习受益，同时将在W3cplus上打造一个优秀的UI库，这个库里的代码可以随时使用，可以随时拿来学习。

白牙第一次给大家带来的案例是通过CSS3的渐变属性、阴影、CSS3的伪类和@font-face属性制作的添加物品到购物车的效果。如果你喜欢就往下看吧。

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

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

Metro UI自己提供了一套font-face制作icon的字体库，而且这个字库可以制作三百多个icon，今天藤藤根据别的Metro UI设计图，制作了一个icon方面的案例，在这个案例中，使用到的知识很简单，主要是两个方面，第一是字体@font-face的属性使用，第二个就是属性选择器的灵活运用。而且这个案例中的icon我们是分两部分的，第一部分是纯CSS绘制的icon，第二部分是@font-face实现的icon。详细的请看案例代码。

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

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

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