一起CSS

当前位置:一起CSS

用CSS制作彩色文字

日期:2008-11-20 分类:CSS

网页上的文字和美观的图片相比似乎显得比较单调,因为文字只有颜色、字体、大小等效果。那如何才能让文字更有特点呢?那就让文字变成彩色的吧,不过不是每个文字设置不同的颜色(当然也有这样的,比如google的logo,虽然用的并不是文本,但用文本也可以实现),是文字的上半部分和下半部分颜色不用。先看一下效果吧:

彩色文字

其实这里有两个相同的但颜色不同文本,他们重叠在一起了,一个显示上半部分,一个显示下半部分,合在一起就达到了彩色的效果。

所用到的关键属性是 clip ,此属性 CSS手册上的说明是:

语法:

clip : auto | rect ( number number number number )

取值:

auto : 默认值。对象无剪切

rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪切

说明:

检索或设置对象的可视区域。可视区域外的部分是透明的。

此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。

我们一步一步来做。先做上半部分的文字:

XHTML代码:

<a href="#" class="textTop">多彩文字 multicolor</a>

CSS代码:

.textTop{
color:#cc0000;
font-size:24px;
clip:rect(auto auto 15px auto);
position:absolute;
}

查看效果,效果如下图左边所示。

下半部分:

XHTML代码(除了 class ,其他和上面相同):

<a href="#" class="textBottom">多彩文字 multicolor</a>

CSS代码:

.textBottom{
color:#3399ff;
font-size:24px;
clip:rect(15px auto auto auto);
position:absolute;
}

查看效果,效果如下图右边所示。

彩色文字

把代码合在一起,就达到了最终的效果:

XHTML代码:

<div class="container">
<a href="#" class="textTop">多彩文字 multicolor</a>
<a href="#" class="textBottom">多彩文字 multicolor</a>
</div>

CSS代码:

.container {
position:relative;
}
.container a{
position:absolute;
font-size:24px;
}
.textTop{
color:#cc0000;
clip:rect(auto auto 15px auto);
}
.textBottom{
color:#3399ff;
clip:rect(15px auto auto auto);
}

查看最终效果,最终效果如最上图所示。

查看:686 评论:没有评论

制作半透明效果

日期:2008-11-17 分类:CSS

半透明效果越来越常见,如果应用的好的话,能给网页带来很美观的效果。

由于各个浏览器差异,所以半透明效果实现起来还是有一点麻烦的。

IE 使用滤镜,即 filter:alpha(opacity=x) ,x 取值范围为 0 - 100 。默认值为 100 ,不透明。 0 为完全透明。

FF 使用其私有属性:-moz-opacity ,其后直接加数值,取值范围为 0.0 - 1.0 。默认值为 1 ,不透明。 0 为完全透明。

CSS3 半透明属性 opacity ,其后也是直接加数值,取值范围同样为 0.0 - 1.0 。

虽然 IE 和其他浏览器实现的方法不一样,但一起用,就都有效果了。看例子:

XHTML代码:

<div id="wrap">
<br />
<br />
<div id="box">
<br />
<br />
</div>
<br />
<br />
</div>

CSS代码:

#wrap{
background:#FF0000;
}
#box{
background:#fff;
filter:alpha(opacity=60); /* for ie */
opacity:0.6; /* for ff or other */
width:100%;
}

虽然 FF 有私有属性设置半透明效果,但它支持 CSS3 标准半透明属性 opacity ,那当然选择标准了。

查看效果

从效果里可以看到子元素的半透明效果,透出了父元素的背景颜色。

要注意的是:必须给需要半透明的元素设置背景颜色为白色,否则没有效果。而对于 IE 又还需要设置宽度或高度属性,否则也没有效果。如上例把 width:100% 去掉则没有效果。

还需要说明的是:IE 滤镜不能通过 W3C 验证。

一个更具体的例子

查看:722 评论:没有评论 标签:

纯css下拉菜单详解

日期:2008-11-10 分类:CSS

下拉菜单由于实用,所以受到人们的欢迎。下拉菜单通常是由 javascript 来实现的,也应该由 javascript 来实现,因为这属于行为层范围。然而大家知道,使用 CSS:hover 伪类也可以制作下拉菜单,比起 javascript 来,使用 CSS 制作更简单,且更容易理解。但由于 IE6 只有 a 标签支持 :hover 伪类,所以又给这种带来了“阻碍”。不过大家还是比较喜欢纯 CSS 下拉菜单,现在我们就利用 IE条件注释来制作一个纯 CSS 下拉菜单。为了便于理解,选择了很很简单的代码,至于更复杂的,大家可以触类旁通、举一反三。

XHTML 代码:

<dl>
	<dt>一级菜单</dt>
	<dd>二级菜单</dd>
	<dd>二级菜单</dd>
	<dd>二级菜单</dd>
</dl>

CSS 代码:

dd { display:none; }
dl:hover dd { display:block; }

查看Demo

在 IE7 和 FF 等标准浏览器中,下拉菜单可以正常使用,但 IE6 中却没有效果。 既然 IE6 只有 a 标签才支持 :hover,那就加上 a 标签。XHTML 代码改写成:

<!--[if lte IE 6]><a href="#"><![endif]-->
<dl>
	<dt>一级菜单</dt>
	<dd>二级菜单</dd>
	<dd>二级菜单</dd>
	<dd>二级菜单</dd>
</dl>
<!--[if lte IE 6]></a><![endif]-->

CSS 代码改写成:

dd { display:none; }
dl:hover dd, a:hover dd { display:block; }

查看Demo

然而在 IE6 中依然没有效果,为什么呢?难道代码有错?其实代码没有错,这是 IE6BUG,关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG,这里给 a:hover 加 border:0,即 CSS 代码再次改写成:

dd { display:none; }
dl:hover dd, a:hover dd { display:block; }
a:hover { border:0; }

查看效果

此时在 IE6 中鼠标移动到上面下拉菜单出现了。然而给每个菜单加上连接的时候,IE6 里又不行了,为什么?为什么?不知道。。。不过再给 IE条件注释里的 a 标签里再套上一个表格,即 XHTML 代码改写成如下:

<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
	<dt><a href="#">一级菜单</a></dt>
	<dd><a href="#">二级菜单</a></dd>
	<dd><a href="#">二级菜单</a></dd>
	<dd><a href="#">二级菜单</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 

查看Demo

此时,下拉菜单在 IE6 里没有问题了。

更多例子:

查看:2,122 评论:12 标签:,,,

IE条件注释续

日期:2008-11-6 分类:CSS

上次发表的《IE条件注释》一直都觉得不完整,还存在一个问题,即:如何让非 IE 浏览器显示 IE 条件注释里的内容。曾经在嗷嗷的博客里看到相关方法,可今天再去已经没有了(难道我记错了?)。还好又在蓝色理想里一种方法(似乎比嗷嗷的更好些),这种方法是把 IE 条件注释和 HTML 的注释一起使用,以达到“欺骗”浏览器的效果。具体看例子:

XHTML代码:

<!--[if !ie]>-->
这段文字非IE浏览器可以显示
<!--[end if]-->

以上代码 IE 浏览器识别 IE 条件注释,其解释为:如果不是 IE 浏览器则显示其中的内容,所以 IE 浏览器不显示其中的内容;而非 IE 浏览器则只识别 HTML 注释,即“<!--”和“-->”之间的会被看成是注释,并且是完整的解释,所以非 IE 浏览器显示了其中的内容。

查看:611 评论:2 标签:

用标准W3C盒子模型

日期:2008-11-5 分类:前端技术

盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟悉的标准盒子模型:

标准盒子模型

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

IE 盒子模型

ie盒子模型

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,如果用标准 W3C 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;如果用IE 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。

那应该选择哪中盒子模型呢?当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢?很简单,就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

再用 jQuery 做的例子来证实一下。

代码1:

<html>
<head>
<title>你用的盒子模型是?</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持:"+sBox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

查看效果

上面的代码没有加上 DOCTYPE 声明,在 IE 浏览器中显示“IE盒子模型”,在 FF 浏览器中显示“标准 W3C 盒子模型”。

代码2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是标准W3C盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持:"+sBox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

查看效果

代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。

所以为了让网页能兼容各个浏览器,让我们用标准 W3C 盒子模型。

查看:976 评论:2 标签:,,

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved