这个DEMO是使用CSS3制作的一个分步注册表单，每个input对应的是每一步，在表单得到焦点时，对应的step也会进行对应的改变。不过这个效果是使用js代码来实现，但整个表单的外观是由CSS3来完成的，整个案例中使用了：@font-face来制作icon图标，使用gradient来制作渐变的按钮效果，使用text-shadow来制作文字阴影效果等等，方便简单点，但细节与创意才是最重要的，喜欢的同学可以看看是怎么实现的吧。

今天仿制了Twitter的登录表单，除了大背景是使用的img，其他都是纯CSS3代码实现。整个效果使用了Bootstrap的表单风格，并且运用box-sizing改变了元素默认的box module风格，同时使用了CSS3的gradient、box-shadow和text-shadow制作了其他效果。具体请查看相关代码。

表单元素向来是前端人员最为头痛的一件事情，众说周知，表单元素的兼容性是最为难处理的，而且想制作一个美丽好看的表单元件，都需要依赖于脚本来实现自定义。其实我们抛开低版本的浏览器，使用ＣＳＳ３来美化还是可以的，她不需要依赖任何脚本代码，能将表单的元件美化的很靓丽。今天就给大家推荐一个纯ＣＳＳ３美化的表单中的下拉选择框（select）的效果。这个效果很简单，使用渐变制作了表单ｓｅｌｅｃｔ的背景色，同时使用ｌａｂｅｌ标签的伪元素“：ａｆｔｅｒ”来制作向右的三角。其中最为有特色的是，使用渐变制作了一个美丽的背景方格效果，详细的请看代码。

这个案例是使用了ＣＳＳ３制作了六种不同风格的checkbox效果。表单的checkbox自定义效果，在webkit内核下，我们可以随心所意的进行自定义样式的美化，但在其他浏览器下还是有些麻烦，早期使用jQuery插件或者别的JavaScript脚本代码来实现，今天的ＣＳＳ３属性能让你解决这个难题。当然你要知道制作的思路，不然还是有难度的。在整个效果中，最关键的是标签的配合以及":before"和“:after”等ＣＳＳ３选择器的应用，特别声明一下，由于input的伪类选择器在部分浏览器下还不支持，所以需要添加一些标签来辅助实现":before"这样的伪类选择器的效果，详细的请看藤藤是怎么制作的吧。

今天把《CSS3制作超酷的SearchBox》教程中的案例整理了一下，把教程中的DEMO单独拿出来与大家分享。这个DEMO中一共制作了四个不同的搜索表单的效果，希望大家喜欢。

登录表单的案例，在w3cplus上已经有很多个，但我们一直没有放下这一块的效果制作，虽然结构与制作方法是类似的，但有很多效果实现的技巧还是略有差别，因为我们有一个目标，希望这上面展示的案例效果，能直接拿到项目中使用，另外一件事就是帮助有需要的同学在工作闲空时间学习CSS3的各种知识以及实战经验，来回馈广大前端人员一直对w3cplus的大力支持，希望大家喜欢。

好久没有写案例了，今天邮件收到Team Dzyngiri 设计的Creating Beautiful Login Form。他这个案例用了很多CSS3效果，不过有些地方还是使用了图片和jQuery来实现。后来兴趣来了，我根据他的设计效果进行了一些修改。比如说，icon我使用了我们常用的@font-face来制作，icon显示与隐藏，他是通过jQuery来实现，我现在改了他的结构和样式，通过css来实现。感兴趣的同学可以对比一下两种方法的实现过程与区别。

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

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

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