经过一段时间的整理，Iconmoon Icon UI整理出来了，这个ICON UI总共具有316个不同的图标，所有图标都是通过@font-face来制作的。方法和前面介绍的制作Icon方法类似，如果你是初次接触，建议你先点击这里，阅读相关的文章。你会懂的。如果你知道是怎么一回事，那就继续往下吧，直接先浏览有什么样的图标，而且所有的图标，我们都配上了类名，使用时类名查询，就OK了。

站上放了好几个ICON UI，这些ICON UI其实没有特别之处，从效果上看，但他们具有一个共同点，都是使用@font-face来实现这些ICON的效果，而他们之间的区别是这些ICON都是使用了不同的字体。今天这个例子，藤藤给大家整理了一份163个Entypo ICON效果，希望大家喜欢，并能在项目中使用上。

关于@font-face制作ICON的技巧不在是技巧了，最主要的关键是如何得到这些icon的svg等字体文件，今天藤藤为大家整理了另外一个字体库“iconic”，这个字体库包含了172个常用的ICONl图标，希望大家喜欢。至于怎么制作，就不用我说了，因为站上这方面的案例和实现方法已经介绍很多篇了，如果你是第一次接触，你可以在搜索框中搜索“icon”，这样在w3cplus会给你呈现出你需要的icon制作方法教程与相关案例。那么到今天为止，藤藤在w3cplus上为大家共提供了五份有关于字体制作 icon图标的案例，有兴趣的围观吧。

这个ICON库工程真是浩大，其实藤藤整理出来是350个ICON，可是被我弄丢了五个，找不回来了，真是罪过罪过呀，实在找不回来的情况之下，我只好把她的350个ICON换成了一个345个ICON标题。这个345个ICON是由Branic字体库生成，可以说，你需要的ICON图标都基本上全了，有生活的、有工业的、有技术的等等，不信你自己看看。我是信了。(^_^)，制作方法是不用了说，主要是大家苦于没有这样的字体库，那么现在我们给大家提供了，需要的就直接下载吧，不过转载的话，注明一下来源哟，别让我们辛苦过后一点余香都没了。

这个案例是一个登录后个人信息控制面板，包含了个人用户头像，整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。

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

这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果，整个效果未采用任何js脚本代码，其中下接的折叠效果是通过transform的rotate来实现的，而transition是用来控制动画更具线性，当然这个效果也用到了transform的3d旋转属性，感兴趣的可以围观一下。扩大你自己的视野。

早期制作手风琴菜单都需要依赖于js的脚本来实现，自从CSS3出现后，制作这种效果不在需要依赖于任何脚本。另外实现手风琴效果的制作方法有很多种，但较为常见的是使用css3的“:target”选择器来实现。在本例中也是一样的，通过“:target”选择器来控制下接菜单的“max-height”，原理简单，方法也简单，只是细节处理稍加注意。

Accordion Slider 以前都是使用jQury或别的js脚本来制作，今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处，第一是HTML结构中的input[type="radio"]是必备的，第二是样式通过radio的选中与未选中来控制对应的img显示和隐藏。这里采用的是css的兄弟元素选择器（~），这个是一个很好的应用。当然实现这种效果还可以通过“target”来实现，不过这种方法实现要借助js来显示默认的第一张图片，有兴趣的可以将这个案例改装一下。

Lavalamp Menu是一种很好的效果，早期在国外的博客中看到过这种效果，是通过jquery插件制作的，一开始还不知道这种效果就叫Lavalamp呢？后来为之告诉我的，今天使用CSS3写了一个垂直的Lavalamp的导航效果，这个效果其实很简单，主要是ribbons的制作要点功夫，然手就是选择器的使用，如果你掌握了这两个部分的知识，那么制作这个效果只是一个思路问题，看看代码你就知道了。