这个效果是没有任何设计图，也没有任何参照样版，藤藤从设计到效果一线完成。使用了CSS3的animation、transform、transition制作了一个动画导航效果，其中利用了Ligature Icon UI制作了导航中的ICON图标。当然还使用了CSS3的其他属性，比如说圆角属性制作了一个圆形，使用opacity控制菜单的动效果效果，最明显的效果是鼠标悬浮时会放大当前菜单项，怎么实现的，你知道？我想你知道的，要是不知道就继续往下看吧。

大家好久没有看到藤藤的每日一练了吧，会不会觉得少了什么？难道藤藤同学不写案例了吗？不是的，因为最近我和藤藤一起在整理ICON　UI的库，希望这些UI的库能帮助大家解决一些ICON的制作时间，做到拿来就可以用。这些ICON　UI我们都是使用字体来制作的，用到的就是ＣＳＳ３的＠font-face属性，制作方法简单。只是类名和实体符的对应，大家可以查对应的类名。您只需要把鼠标悬浮在每个ICON上就能得到相应的类名和实体符。今天要给大家展示的是Kazuyuki Motoyama的Ligature　Symbols，希望大家喜欢。

这个效果是一个类似于彩带的导航菜单效果，整个效果之中，使用的方法都比较简单，关键之处就是如何实现导航菜单两边折角的效果。常用的方法就是“:after”和“:before”生成折角部分，如果你以前从没接触过这种彩带效果制作，不仿先看看《Pure CSS3 Ribbons》以及《CSS3 Ribbons》、《CSS制作图形速查表》、《纯CSS制作的图形效果》几篇教程，能更好的帮助你学习这个案例的制作原理与方法。不过本案例中有一个最不好的地方，就是定死了菜单项的宽度，不能做到收缩自如，所以您要是有兴趣可以在此基础上进行改良。与我们分享。

这个案例主要展示的是使用CSS3实现一个购物车清单下拉列表的效果，在整个效果制作过程中没有过多的技术难题，主要一点是使用什么方法来实现下拉列表的隐藏与显示效果，在本例中还是通过max-height来实现的，至于其他的效果，我想大家要是一路跟着藤藤走下来了的话都非常熟悉了，如果你没有跟着练习也不用害怕，这些效果无外呼包括了gradient制作渐变、box-shadow制作阴影，@font-face实现icon等等。

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

很早以前在Google Plus UI Button制作一文中详细介绍了Google Plus的UI按钮制作方法以及相关代码，今天藤藤特意将其中tip的提示按钮UI制作方法单独拿出来培析，与大家分享，希望大家喜欢这套由@font-face制作的TIP按钮库。

今天的案例是个老案例，使用ＣＳＳ３代码来制作３D按钮效果，ｗ３ｃｐｌｕｓ有关于ｂｕｔｔｏｎｓ的介绍已经很多，如果你没有看过，不仿点击这里。今天藤藤给大家带来的还是一个系列的３D按钮制作效果，制作方法是老套（万变不离其中），但其中色彩的调各让我很折服，因为很多效果在ｐｓ中制作是容易，特别对于设计师来说更容易，但对于一名ｃｏｄｅｒ来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服，至少我已膜拜藤藤以ｃｓｓ３的了解，以及其对制作过程中的细节的追求。

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

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

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