网络生活——关注网络，关注前端设计

存档

文章标签 ‘css’

CSS3 Columns属性研究

2009年8月6日雨无形没有评论

CSS3 Columns属性研究

Columns属性是用来制作类似杂志布局，下面是该属性的简单介绍：

这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下：

-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */

这段代码分别是定义的栏数根每栏的宽度

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+

属性的使用很简单，比如要做一个宽度固定为800px，4栏的布局可以用如下代码：

width: 800px;
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;

同样如果要制作一个高度固定为400px，每栏宽度300px的布局可以用如下代码

height:400px;
-moz-column-width: 300px;
-webkit-column-width: 300px;
column-width: 300px;

但是如果同同时使用了column-width和column-count会有怎么样的效果呢？
我们实验一下最开头的代码，

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-width: 250px;
-webkit-column-width: 250px;
column-width: 250px;

分别用FF3.5和chrome/safari打开看一下
我们发现chrome/safari是按照设定的每栏宽250px，两栏显示的，但是FF下却成了两栏，但是每栏的宽变成了整个容器的50%的宽度。说明在FF下优先考虑的是容器的宽度。

然后我们再测试一下极端一点的情况：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .textcol { height:400px; background:#FC0; -moz-column-count: 2; /* For FireFox */ -webkit-column-count: 2; /* For Safari/Chrome */ column-count: 2; /* For when the standard gets fully supported */ -moz-column-width: 250px; /* For FireFox */ -webkit-column-width: 250px; /* For Safari/Chrome */ column-width: 250px; /* For when the standard gets fully supported */} </style> </head> <body> <div class="textcol"> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

在限定了高度，栏数，栏宽，字数又超过了的情况下，在FF下，栏宽还是容器宽度的50%，栏宽的限制也不起作用了，唯一起作用的是高度，在chrome/Safari下，栏宽跟高度还是保持，栏数超出设置。这个在使用这个属性的时候都是要注意的。

分类: css, 网页设计标签: css, css3

CSS文字阴影效果

2009年8月5日雨无形没有评论

上回说到用css模拟图片阴影效果，那么文字有办法吗？

其实在css3中已经有一个text-shadow属性专门来实现这个效果，不过目前只有Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)等几个现代浏览器可以支持该属性，IE系的暂时无法实现该属性。

text-shadow的语法：

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度阴影模糊半径”

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

具体请参考：http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows

值得注意的是，text-shadow可以应用多组属性，也就是可以如下方法使用：

0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

下面看几个范例：(请使用Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)浏览器运行查看效果。)

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <h2 id="test4">4 : This is heading with text-shadow 中文标题</h2> <h2 id="test5">5 : Multiple shadows are Hot</h2> </div> </body> </html>

提示：你可以先修改部分代码再运行。

至于顽固的IE，只能用滤镜来实现类似效果了，下面也顺便介绍一下IE滤镜制作阴影。

IE滤镜的语法为：

filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
其中color为阴影颜色 direction为角度 strength为阴影距离

下面一样看个例子

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影IE滤镜版</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <p id="test4">4 : This is heading with text-shadow 中文标题</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

可以看到效果比较差，只有在小字体的时候才能用下。另外要注意要是用滤镜的元素必须触发haslayout

最后把两个方案结合一下即可实现支持大部分浏览器的CSS阴影效果。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影</title> <style type="text/css">  </style>  </style> <![endif]--> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <p id="test4">4 : This is heading with text-shadow 中文标题</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

分类: css, 网页设计标签: css, css3

适合自己的才是最好的——打造最适合自己习惯的reset.css

2009年7月14日雨无形没有评论

最近准备写一个符合自己习惯的css框架，首先第一步当然是reset.css

研究了一些网上的资料，整合了一下，以YUI为蓝本，整理出了最符合自己的reset.css。

参考资料有

1、玉伯同学的Reset CSS研究（八卦篇）

2、蓝色理想上的打造自己的Reset.css

3、Eric的reset css

4、YUI 3的CSS RESET

5、Less is more – my choice of Reset CSS

首先是最基本的清除padding跟margin：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
margin: 0;
padding: 0;
}

这个我在YUI的基础上进行的修改，去除了pre,code,blockquote三个标签，因为我一般做的项目都是企业或门户型网站，用到这三个标签的机会极少，因此就去除了这三个标签的重置，节省几个字节。

然后是清楚border，一般常用的需要清除的只有fieldset、img两个元素，特别是img，如果不清楚在加上链接的时候会出现蓝色边框。

1
2
3

fieldset, img {
border: 0;
}

对于h标签,我只重置了该标签的font-size其它都没重置，在yui中的font-weight:normal;重置被我去除了，因为在我的使用中的大多数情况下h标签都是需要font-weight:bold的，在这里去除了以后还要加，反而麻烦了。

1
2
3

h1,h2,h3,h4,h5,h6 {
font-size:100%;
}

li标签的list重置，我选择了eric大牛的方法，

1
2
3

ol, ul {
list-style: none;
}

而没有用yui的方法

1
2
3

li {
list-style: none;
}

因为蓝色理想那篇文章里写，前一种方法的性能更好，这个目前没有什么实例证明，不过3个直接姑且就先用第一种吧。

再下来是table的样式

table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
font-weight:normal;
}

最后几个伪类的样式

1
2
3

:focus {
outline: 0;
}

这个主要是针对非IE浏览器链接点击时的虚线框。

另外我一直很犹豫是否把链接的下划线去掉，经过考虑以后还是不在reset里面去掉了。

秉承够用就好的原则，代码中我去掉了那些我不常用的标签的重置，比如abbr,acronym,sup,sub,code,address,cite,dfn,var,blockquote,q标签，一般项目中基本上用不到，所以就不设置了。strong,em等标签还是使用默认样式，这里也不重置了。

将前面的综合一下最后的代码是：

/*
reset css version: 1.0 | 20090714
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
	margin: 0;
	padding: 0;
}
fieldset, img {
	border: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
	font-weight:normal;
}
:focus {
	outline: 0;
}

分类: css, 网页设计标签: css, reset

根据访问者分辨率，自动调用不同版式CSS的代码

2009年7月8日雨无形没有评论

虽然现在已经基本淘汰800分辨率了1024已经成为主流，但是随着大屏幕液晶的不断降价，更高的分辨率将会逐步成为主流，为了适应越来越大的分辨率，有时候我们会采用流体布局，但是流体布局有时候也有局限性，下面一段js可以实现根据用户客户端分辨率的不同，调用不同的css代码来实现适应不同分辨率的效果。

var Swidth = screen.width;
var Surl = "http://www.yours.com/";
var Skin = ["cssstyle1.css", "cssstyle2.css"];
var Skintemp;
if (Swidth >= 1280) {
    Surl += "skin_1200";
} else {
    Surl += "skin";
}
for (var i = 0; i < Skin.length; i++) {
    Skintemp = document.createElement("link");
    Skintemp.type = "text/css";
    Skintemp.rel = "stylesheet";
    Skintemp.href = Surl + "/" + Skin[i];
    document.getElementsByTagName("head")[0].appendChild(Skintemp);
}

分类: JavaScript, 网页设计标签: css, JavaScript, 分辨率

Acid2 Browser Test

2008年11月14日雨无形没有评论

恕我火星了，今天才知道有Acid2 Browser Test这个东西，动手测试了一下手头的浏览器，IE8 FF3 谷歌浏览器都正常FF2和IE7及以下版本都不正常。

上网搜索了一下

Acid2 Browser Test

Acid2 is a test page, written to help browser vendors ensure proper support for web standards in their products. Please take the Acid2 test!

If you’d like more in-depth information about the Acid2 test, we’ve provided a detailed technical guide that explains how the test works.

Note: Some 827 people (rough estimate, contents may have settled during shipping) have written to point out that the CSS used in the test is invalid. This is deliberate, as a means of exposing the ability of user agents to handle invalid CSS properly.

Note: When taking the test, you should use the default settings of the browser you are testing. Changing the zoom level, minimum font size, applying a fit-to-width algorithm, or making other changes may alter the rendition of the Acid2 page without this constituting a failure in compliance. (Added 21 July 2006)

更深层次的研究放在以后吧，工作先

分类: css, 网页设计标签: css

详解CSS的优先权（ZT）

2008年11月14日雨无形没有评论

原文出处：http://www.planabc.net/2008/05/06/css_specificity/

看这篇文章之前，对这个问题一直没深入研究，导致有时候遇到一些问题会很麻烦，看到这篇文章让我茅塞顿开，转帖回来保存一下以便今后复习。

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则：

元素的 style 样式属性，加 1,0,0,0。
每个 ID 选择符（#id），加 0,1,0,0。
每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
其他选择符（例全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则：

!important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
如果优先权一样，则按源码中“后来者居上”的原则。
由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例全局选择符 * ）。

范例分析：

h1 {color: red;}/* 只有一个普通元素加成，结果是 0,0,0,1 */body h1 {color: green;}/* 两个普通元素加成，结果是 0,0,0,2 *//*0,0,0,1 小于 0,0,0,2 ，后者胜出*/

h2.grape {color: purple;}/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/h2 {color: silver;}/*一个普通元素，结果是 0,0,0,1 *//*0,0,1,1 大于 0,0,0,1 ，前者胜出*/

html > body table tr[id=”totals”] td ul > li {color: maroon;}/* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */li#answer {color: navy;}/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 *//*0,0,1,7 小于 0,1,0,1，后者胜出*/

分类: css, 网页设计标签: css

举国同悲，一条CSS代码把网页变黑白

2008年5月19日雨无形没有评论

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

加在CSS里面网页就可以变黑白的了，但是FLASH还是彩色

分类: css, 网页设计标签: css

IETester多IE版本共存的解决方案

2008年5月14日雨无形没有评论

用WEB标准设计网页最麻烦的可能就是在各浏览器里面的兼容性问题，其中IE的各版本兼容性问题又是最头疼的，多版本IE共存一直是个难题，现在好了，有了IETester，可支持支持IE5.5——IE8，可以基本满足所有这方面的需求了（IE5,IE4就算了吧。。。）截止到09年8月最新版本0.3.5已经可以支持win7了

下载地址：http://www.my-debugbar.com/ietester/install-ietester-v0.3.5.exe

分类: css, 网页设计标签: css, ietester

div层总是被flash层遮盖的解决方案

2008年5月9日雨无形没有评论

在网页设计中经常由于客户的种种需求，而需要DIV层和FLASH的交互，但是往往DIV都被FLASH遮盖住了。

过去参与的一个项目：http://www.digitalwuhan.gov.cn/index.html（该网站问题多多就不说了，各位就不用批网站的问题了，现在只讨论本论题。）

顶部的flash就涉及此问题，具体是怎么解决的呢？因为今天看到有人提出此问题，就把解决方案拿出来分析一下。

先看该网站的FLASH加载代码：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" name="red1" width="1003" height="218" align="middle" id="red1">
     <param name="allowScriptAccess" value="sameDomain" />
     <param name="movie" value="images/top_blue.swf" />
     <param name="quality" value="high" />
     <param name="wmode" value="transparent" />
     <param name="bgcolor" value="#ffffff" />
     <embed src="images/top_blue.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="1003" height="218" name="red1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

主要起作用的就是用红色和绿色标注的这两句，其中红色的<param name="wmode" value="transparent" />这句主要用于IE下的效果实现，绿色的wmode="transparent"则是Firefox下效果实现的代码。

附加资料：

关于wmode属性资料：

（可选）允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。

"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。

"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。

"Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。

"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而"opaque"则不会显示。

如果忽略此属性，默认值为 Window。仅适用于 object。

最后更新：2009-2-16

分类: css, 网页设计标签: css, flash

几个纯CSS菜单效果

2008年3月21日雨无形没有评论

分类: css, 网页设计标签: css, 菜单

Page 1 of 212 »

网络生活——关注网络，关注前端设计

存档

CSS3 Columns属性研究

CSS文字阴影效果

适合自己的才是最好的——打造最适合自己习惯的reset.css

根据访问者分辨率，自动调用不同版式CSS的代码

Acid2 Browser Test

Acid2 Browser Test

详解CSS的优先权（ZT）

举国同悲，一条CSS代码把网页变黑白

IETester多IE版本共存的解决方案

div层总是被flash层遮盖的解决方案

先看该网站的FLASH加载代码：

附加资料：

几个纯CSS菜单效果

最近评论

分类目录

功能

月度索引

链接表

我在读的书

我想读的书