全站变灰CSS

body,.gray{
  -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
    filter: grayscale(100%);
   filter: gray;
}

图片变灰CSS

img {
 opacity: 0.8;
  -webkit-transition: all 0.3s ease-out;
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

关键点：
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；
3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。这意味这中国网站的字体大小可以被认为不可调。
95%的中国网站需要重写CSS
在我所观察的中国网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。
而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。
没错，px比em更加容易使用，我也敢打赌大部分读者不知道em为何物或者它相当于多少px。
国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因为有一部法律来约束他们—例如美国的Section 508，强制网站达到一定的易用性。所以没有哪个主流站点愿意被那些视力下降或是残缺的人告上法庭。
注: 在中国, 可能把微软告上法庭来的更简单点，为什么IE对于px那么死板。

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

CSS 文字的发光效果通过 text-shadow 实现起来很方便的。

text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513, 
    0 -1px 1px #8B4513, -1px 0 1px #8B4513;

在 Firefox, Chrome, Opera, Safari 中的效果：

看上去这几款浏览器都支持。不过就是在 Chrome 里面，可以看见出来的效果并不好，奇怪的一点是为什么它的模糊会往里发展了，开始还以为 webkit 都这样，看了看 Safari，表现挺好的，边缘比 Firefox 还要锐利。 几经尝试，终于找到可以让 Chrome 也一样表现犀利的办法。通过观察可以得知在无模糊的情况下，也就是文本描边效果，各浏览器里的表现是一致的。

这是一个非常实用的CSS属性，且IE6也支持！用于缩放成不同比例的小图片时非常简单，而不需要多余的<div></div>做为容器来装载图片
clip(剪辑)属性就像一个蒙版。它允许你掩盖矩形的可见区域。要剪辑一个元素：你必须指position:absolute。然后，指定top rightbottom left值相对于元素的距离。

/*上面的是除了IE6的主流浏览器通用的方法*/

看到一篇《css3时尚进度条的设计》的文章，很是喜欢，准备好好研究一下，不过本文我先用photoshop把它设计出来，大家一块分享，非常简单。

这个在ps里面实现比较简单，但想用css来实现，实在是非常的复杂，里面涉及到很多新样式的应用，希望在下节中可以好好和大家一块学习。
1、定义图案，设置背景

把代码贴上来与大家一起分享：
HTML Markup

css修改图片颜色演示代码如下：

<style type="text/css" media="screen">
  html,body {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>

几款浏览器对透明度的支持方式各不相同，为了保证在IE, Firefox, Chrome, Safari等主流浏览器下都能正常显示透明度的效果，我们可以定义一个透明度的class，因为一写就要写3条，省的每次都复制来复制去了。
具体代码如下：

.transparent{
  filter:alpha(opacity=60); /*支持 IE 浏览器*/
  -moz-opacity:0.60; /*支持 FireFox 浏览器*/
  pacity:0.60; /*支持 Chrome, Opera, Safari 等浏览器*/
}

语法：

@font-face { font-family : name ; src : url( url ) ; sRules }

说明：

name : 　字体名称
url : 　使用绝对或相对地址指定OpenType字体
sRules : 　样式表定义

设置嵌入HTML文档的字体。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。
示例：

<style stype="text/css">
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot);
</style>

语法：FILTER: FlipV   
说明：垂直翻转对象内容。
使用代码：style="FILTER: FlipV"
语法：FILTER：FlipH   
说明：水平翻转对象内容。
使用代码：style="FILTER: FlipH"