藤藤今天给大家带来一款使用CSS3制作的3D立体表单效果。在这个案例中主要使用了CSS3的渐变制作了body的背景；使用box-shadow制作的3D立体input框和3D立体按钮；使用@font-face制作的icon图标。

今天与大家分享一款使用CSS3制作的Twitter信息分享框。在这个DEMO中，使用的CSS3属性还是那么几个，css3的渐变gradient，盒子阴影box-shadow，css3的选择器等，不过在这个案例中两个特色之处，一个是使用了":before"配合gradient制作了内凹圆角效果，类似于chrome浏览器上的tabs效果，这个效果可有点难度（思路来自于Tabs with Round Out Borders）,还有一个亮点就是使用gradient制作了渐变的线条。想一探究竟的同学，看下面的代码吧。

这个案例主要使用css3来制作标签，不过使用的的属性还是常见的那几种，可是要实现还是有一定的难度。其中最有亮点的是使用css3来实现斜线背景以及方格背景，然后就是使用@font-face来制作icon图标。原理简单，重要的是思路，以及这两种背景实现的细节。感兴趣的同学直接看源码。

这是一个CSS3使用gradient、box-shadow制作的按钮集合，在w3cplus有关于按钮方面的实例不少，随便搜索css3 button就会有大把相关介绍。今天老调重谈，还是使用按钮的制作，不过这里想给大家呈现的一种思想是，只要你敢想，就有实现的方法，在这里一共展示了15种不同颜色的按钮，而且在":hover"和“:active”下都有不同的效果。制作方法是一样，但配色，特别是gradient实现渐变色还是需要一定的功底的，不信你就试试吧，我可是信了，因为我也做不到。（^_^）

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

今天这个案例不单单是一个CSS3的练习案例，他还是一个按钮库，在这个基础上你可以演变更多的按钮效果。说得在大一点，这个案例还能让你了解如何组织你的CSS代码。当然这个案例中的效果制作的非常的细腻，藤藤花了很多心思，正如她所说，在制作这些按钮时，学到很多新的东西，CSS3的属性运用就不多说了，还学到了如何组织代码，如何供用共性的东西等等，如果你感兴趣不仿跟藤藤一起做一下这个案例，我想你会有所收获的。

今天这个案例是使用CSS3的常用属性制作的一个ICON圆开按钮效果，在这个案例中使用@font-face属性制作了三个浏览器的icon(chrom/firefox/ie)，使用gradient制作的径向渐变效果，并且使用box-shadow实现立体效果，用text-shadow制作的icon发光效果，详细的可以看代码。

这个案例是将Button UI Kit的设计图转换成CSS3的DEMO，效果简单，制作的方法也相对简单，说名实话用来用去的属性也就是那么几个，渐变gradient 、阴影text-shadow和box-shadow、还有就是字体icon的制作@font-face。但话说回来，属性简单，制作方法简单，但对渐变色的配置，阴影效果的拿捏还是要一定的技术，不信，你试试，反正我是信了。（^_^）

今天这个案例是使用CSS3制作了四个不同的App下载按钮。这个效果中主要使用了gradient制作渐变按钮效果，配合@font-face制作向右的箭头效果，同时使用box-shadow制作阴影效果,而且使用了:nth-child选择器来控制不同按钮的效果。详细的请看具体代码。

这个案例制作了两个效果，一个是CSS制作的导航效果，这个导航效果配一点js代码实现active状态下改变当前项的效果（从文字转变为icon），导航其他效果都是使用css3的常用属性制作的，具体什么属性我就不多说了，大家一看就知道。第二种效果使用纯css3制作了一个twitter的分享按钮，而且这个按钮还带有Tip的提示效果，详细的请看下面的实现代码：