www.iklfy.com

网页变灰CSS实现

全站变灰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%);
}

www.iklfy.com

改用"em"使IE可以调整字体大小

关键点:
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那么死板。

www.iklfy.com

HTML5 Shiv – 让该死的IE系列支持HTML5吧

HTML5 Shiv – 让该死的IE系列支持HTML5吧

下面是引用Google的html5.js文件,好处就不说了:
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)

然后在css里面加上这段:
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状,像div那样。

好了,简单吧,一句话概括就是:引用html5.js 使html5标签成块状

www.iklfy.com

靳氏DIVCSS网页兼容口诀

1、学习DIV的方法

第一,掌握css、html语法。css中除了一般语法之外,特别是float、clear、overflow、line-height等,对于html标签重点是div、ul、li、dl、dd等几个。
第二,其实div最好的教程就是你把qq.com 163.com sohu.com ifeng.com这几个大门户网站的做法研究一下 ,如果你一下子看不懂这么大的网站,可以参考我讲课中带着学生一起开发的www.ccopen.net及www.chinajwork.org。

2、让DIV兼容的方法:

www.iklfy.com

CSS 文字发光效果

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 也一样表现犀利的办法。通过观察可以得知在无模糊的情况下,也就是文本描边效果,各浏览器里的表现是一致的。

www.iklfy.com

用Photoshop设计时尚进度条

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

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

www.iklfy.com

CSS透明度在各浏览器下的兼容

几款浏览器对透明度的支持方式各不相同,为了保证在IE, Firefox, Chrome, Safari等主流浏览器下都能正常显示透明度的效果,我们可以定义一个透明度的class,因为一写就要写3条,省的每次都复制来复制去了。
具体代码如下:
.transparent{
filter:alpha(opacity=60); /*支持 IE 浏览器*/
-moz-opacity:0.60; /*支持 FireFox 浏览器*/
pacity:0.60; /*支持 Chrome, Opera, Safari 等浏览器*/
}

www.iklfy.com

[转]加载网页后自动安装字体

语法:
@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>