使用@font-face运用本地字体，制作一些特殊的字体效果非常方便，特别是使用@font-face制作图标，更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体，这样一来就有很多同学在问，如何制作自己需要的字体呢？或者说如何将自己需要的图标转换成自己需要字体，在运用到web页面中？这个问题问得很好，其实实现思路并不复杂，我们需要通过一些适量图的软件，绘制出矢量图标，然后通过一定的工具将这些图标转换成需要的字体。或许你会说，这不是废话，还是没有谈到怎么做出来。大家不用着急，根据Martin Gittins的《How to turn your icons into a web font》文章介绍，你只需要一款制作矢量图的应用软件，和一个免费的Web应用程序IcoMoon将矢量图转换成Web字体工具就可以轻松的帮你实现。如果你不信，不仿往下看，我想你看后，以后再也不会使用位图了。（^_^）

今天为大家带来一个CSS3制作的网站后台管理面板的模板。主要运用到了CSS3新增加的target伪类结合opacity来制作Tab选项卡，以及fontface制作图标等，另外还通过这个- -input-placeholder伪类来统一placeholder内字体在各个浏览器下的样式，具体请看代码注释。

上回@格子同学使用div模仿了一个价格表格，外观优美，只是其中有一些内容和样式结合在一起，分离不够完美。今天她再次为大家制作了一个价格表格。这次案例中修正了上一回的内容与样式的结合问题，并且利用CSS3制作出完美的UI效果。其中最为有特色的就是CSS3渐变的运用。第一使用渐变制作了一个大背景，第二使用渐变制作了一个网格纹理效果，第三使用渐变制作了锯齿花边效果。在这三个效果中应数锯齿花边难做，如果你不知道如何制作这样的效果，不仿跟着这个案例往下看看。

制作一个表格容易，但是要设计一个表格，让它爽心悦目，对于前端攻城师来说可是一个挑战——我们不仅需要考虑表格的外观好看，而且要提高用户的体验，让用户方便阅读表格，方便从表格中找到自己需要的数据。早前参考Red Team的Red介绍的CSS3制作表格的教程——《Feature table design with CSS3》做了一定的讲解《CSS3美化表格》。今天我们换过一种思路，完全使用div来模仿表格，而且这个模仿出来的表格更具扩展，最大的特点是设计完美。

CSS3条件判断，听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话，你会发现CSS中的“@media”就是条件判断之一。是的，在CSS3的条件判断规范文档中包含了两个部分，其一是“@media”规则，主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中，发挥的作用更是强大)；其二是“@supports”规则，主要用来代替前面常用的Modernizr库，在不支持CSS3的浏览器下实现渐进增强式设计。换句话来说，@supports可以让我们在不支持CSS3属性的浏览器下配上单独的样式，看起来很强大，那具体如何使用呢？我们今天一起简单的来学习一下。

这是格子同学提供的一款由CSS3制作的迷你播放器面板的案例（时间效果是由jQuery完成）。这个案例仿Mac电脑的窗口风格设计，整个面板分成三部分，顶部由标题和最小化、最大化以及关闭按钮组成（这三个按钮功能未添加）；中间部分类似于播放器一样，左边是播放的按钮（播放、中止和停止）三个组成，以及播放时间的计算（时间效果由jQuery完成）；最底下部分是整个时间的统计文本。整体效果清爽，设计层次清晰。当然大家关注的还是使用了什么技术，这里我们仅仅面板效果来说的话，并不复杂，只使用了CSS3的圆角、阴影、渐变和@font-face几个简单的属性，感兴趣的话继续往下看代码吧。

简约而又养眼的一个导航。

Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？

Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段，以供大家参考。