css3

CSS3 Columns属性研究

八 6th

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, css3

CSS文字阴影效果

八 5th

由雨无形发表在css

1个评论

上回说到用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, css3

css3

CSS3 Columns属性研究

CSS文字阴影效果

用户登录

友情链接