这是一个纯CSS3制作的工具提示下拉菜单，当你鼠标悬浮在工具条上时，会自动的向下弹出下拉菜单项。整个工具条是通过@font-face来制作的icon，并使用了gradient给每个下拉菜单块制作了一个不同的渐变色，而下拉菜单的隐藏和显示并不是按照我们传统的制作方法，此处是控制下拉菜单的高度来实现显示与隐藏的效果。当你加载页面时，整个下拉菜单的高度为0，但当你的鼠标悬浮在对应的工具图标上时，此时下拉菜单的高度为180px,当然这个值是一个固定例的值，要完美一点的方法最好不要控制死他的高度，具体如何实现，大家自己想想，前面有讲过这样的案例哟。（^_^）。

Colorful CSS3 Animated Navigation Menu是Martin Angelov制作的，今天看到这个效果很有意思，特意扒过来与大家分享。整个效果是ＣＳＳ３使用了Bootstrap的Font Awesome字体图形制作了一个彩色的动画下拉菜单。其中运用到的ＣＳＳ３属性有：nth-child()选择器，gradient制作渐变效果，@font-face配合:before伪选择器制作的ICON。其中最具特色的是使用max-height来控制下拉菜单的显示与隐藏。你有试过吗？没试过请继续吧！

这个案例是使用CSS3制作的一个媒体分享圆形按钮。效果看起来很简单，其实制作也非常的简单的，主要就是径向渐变的运用，以及@font-face实现的ICON效果，当然其中也离开不其他属性的点缀效果，比如说box-shadow制作的阴影，transition制作的动画效果等。

Codrops CSS3 Lightbox总供有三个效果，今天把第一个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，真的很完美，不得不让人折服。能把CSS3运用到如此完美。在这个效果中把CSS3常用的属性几乎都用上了，比如说：@font-face制作特殊字体效果；border-radius制作圆角效果；box-shadow实出盒子阴影效果；text-shadow实现文字阴影效果；opacity制作透明效果；gradient制作的渐变背景图片；transition实现过渡的动画效果；animation制作的动画效果等等。而且最为精彩的部分，图片能随浏览器大小进对绽放，要是你对这个感兴趣，不仿看看。

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

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

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

首先非常感谢藤藤提供的代码，是她用CSS3写的一个分享按钮的效果，而且写得非常不错。结过她的同意，我稍加做了点点的修改，增加了ICON图标上去，让效果看上去更清晰一些。在这个效果中主要使用了：CSS3的伪类选择器（伪元素）、box-shadow和@font-face三个属性，结过颜色细腻的搭配，制作了这么一个完美的分享按钮。