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

这是一个很简单的案例，不过效果很有创意，一个标题“w3cplus”，默认只显示一个字母“w”，但当你的鼠标悬浮到这个标题上时，整个“w3cplus”会动态的给你展开，其实这个效果很类似于Letteringjs的效果，整个效果中letter-spacing属性的运用非常关键，然后配上CSS3的transition和opacity属性。

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

css3的text-shadow属性能帮助我们设计很多有特效的文字效果，特别是运用在英文字体上。早前在《CSS3的文字阴影—text-shadow》和《CSS3 制作文字特效》两篇文章中有介绍过一些使用css3的text-shadow制作的特效，今天老调重谈，我使用css3的text-shadow写了十个文字效果，希望大家喜欢。

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

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

这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处，简单明了，也是我常常去逛的一个网站。今天收到一个CSS3效果，就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角，同时使用旋转transform以及定位到每个角落上，其中最难的一点就是，使用gradient制作了四个切角效果，这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。

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

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

Codrops CSS3 Lightbox总供有三个效果，今天把最后一个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，能把CSS3运用到如此完美，真是让人折服。最后一个案例与前两个Lightbox的效果上没有多大的区别，这一部如何制作，如果你观注了本站的相关案例，我想您是懂了，而这个效果与前两个不同之处是添加了向前向后播放的按钮效果。