也许你有注意到本站的logo，点击之后，会产生一个纸飞机飞翔的过程，是一个3D动画效果，目前仅支持webkit内核浏览器预览效果。
http://xuanfengge.com/demo/201402/plane
消息面板翻转、飞机两翼折叠、飞机平放预备飞行、飞机后退助跑、飞机向前飞翔、整个过程的背景颜色过渡。
主要的动画效果（步骤分解状态）使用CSS3的变形(transform)、转换(transition)、动画(animation)、视图距离(perspective)等等新属性实现，并结合js的setTimeout控制动画时间，通过增减css的class来实现整个过程动画。 查看全文
在CSS3盛行的年代，我们要学会极致的运用它的属性来装点我们的网站，学会CSS3的渐变就可以做出一些非常炫的效果。
在没有CSS3之前，为了显示一个渐变而专门制作一个图片，这种不法不但不灵活还增加请求数。那我们能用gradient做些什么呢？做渐变背景、做渐变导航、做按钮、按钮的四态（default、hover、active、focus）、绘制图形、配合CSS3动画做特效等。
对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}
对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);} 查看全文
在做web开发的过程经常需要修改CSS文件，而每次修改后都需要手动去刷新浏览器才能看到效果，相当麻烦。
这里推荐一个开源的JS工具，可以帮助我们在修改CSS文件后，自动刷新页面查看效果，提高了开发的效率。
使用方法很简单，只要在页面中引入后面的的cssrefresh.js文件，那么当前页面的css代码修改之后，页面就会自动刷新呈现效果了。需要注意的是，项目必须在服务器下预览，因为使用ajax请求，所以本地项目无法正常工作，并出现XMLHttpRequest cannot load … Cross origin requests are only supported for HTTP错误。 查看全文
在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。这次来看下CSS hack
为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-11（主要是6-9）。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本。 查看全文
是不是也曾经为编写CSS而苦恼，重复性的编写、存在兼容性等问题，接下来就分享下我是如何使用LESS快乐编写CSS的，让你事半功倍~
在此之前你可能听说过或使用过LESS, Sass 和其他 CSS 预处理器，它们是一种超棒的方法用来扩展 CSS 功能，使之更适合程序员。你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS，以更少的代码完成更多的样式。
如果你还没接触过 LESS，可以先行阅读以下教程：
LESS CSS中文官网：http://www.lesscss.net/article/home.html
或者对于选择使用LESS或者SASS有疑问：
Less介绍及其与Sass的差异：http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html
基础组件包括：layout.less、reset.less（源码附后），接下来可在其他的less文件中引入这些文件：@import “include/reset.less”;即可，分成更多的模块文件，使结构更清晰。
layout.less：包含reset.css，及部分常用的兼容性代码，包括圆角、省略号、文本隐藏、阴影、渐变、折行等，一一介绍. 查看全文