实例:利用样式CSS的Clip属性制作多彩文字

css

  多彩文字(Multi Colored Text)的制作的原理是,将二个文字相同而色彩不同的文字重合在一起,通过分别给元素加 clip 属性,使上面和下面的文字被剪切位置不同,设置不同的色彩,从而产生多彩文字的效果,即Multi Colored Text。

  clip 属性:

  clip : auto | rect ( number number number number )

  参数:

  auto:对象无剪切

  rect ( number number number number ) :

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

  说明:

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

  必须将position的值设为absolute,此属性方可使用。

CSS代码:

.textBottom {
    color: #333333;
    position: absolute;
    left: 3em;
    top: 1em;
    font: 26px Century Gothic,Arial, Helvetica, sans-serif;
    clip: rect(18px auto auto auto);
}

.textTop {
    color: #CC0000;
    position: absolute;
    left: 3em;
    top: 1em;
    font: 26px Century Gothic,Arial, Helvetica, sans-serif;
    clip: rect(0 auto 18px 0);
}

.container {
    width: 28em;
    height: 5em;
    margin: 1em auto;
    position: relative;
    background: #F6F6F6;
}

XHTML代码

<div class="container">
 <a href="#" class="textTop">welcome to webjx.com</a>
 <a href="#" class="textBottom">welcome to webjx.com</a>
</div>

查看运行效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.webjx.com</title><style type="text/css"><!-- body{ background: #FFFFFF; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 140%; text-align: center; padding: 0; margin: 0;}p{ margin: 0; text-aglin: center; }address{ font-size: 75%; }body,html{ height: 100%; }* html, * html body{ overflow: hidden;}#top{ min-height: 90%; overflow: auto; }* html #top{ height: 90%;}a{ text-decoration: none;}.textBottom { color: #333333; position: absolute; left: 3em; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(18px auto auto auto);}.textTop { color: #CC0000; position: absolute; left: 3em; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(0 auto 18px 0);}.container { width: 28em; height: 5em; margin: 1em auto; position: relative; background: #F6F6F6;}.textTop:hover { color: #808080;}.textBottom:hover { color: #FF4646;}--></style></head><body><div id="top"> <div class="container"> <a href="http://www.webjx.com/" class="textTop">welcome to webjx.com</a> </div> <p>文字的上半部分</p> <div class="container"> <a href="http://www.webjx.com/" class="textBottom">welcome to webjx.com</a> </div> <p>文字的下半部分</p> <div class="container"> <a href="http://www.webjx.com/" class="textTop">welcome to webjx.com</a> <a href="http://www.webjx.com/" class="textBottom">welcome to webjx.com</a> </div> <p>二组文字重合的效果</p></div></body></html>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2016-07-07

实例:利用样式CSS的Clip属性制作多彩文字的相关文章

用CSS的Clip属性创造多彩文字

原理 将二个相同而色彩不同的文字重合在一起,通过分别给其加 clip 属性,使上面和下面的文字被剪切位置不同,从而产生二种不同的色彩. clip : 摘自苏沈小雨CSS手册clip : auto | rect ( number number number number )参数:auto : 对象无剪切rect ( number number number number ) :依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切说

利用CSS的Clip属性来创造多彩文字

css 原理 将二个相同而色彩不同的文字重合在一起,通过分别给其加 clip 属性,使上面和下面的文字被剪切位置不同,从而产生二种不同的色彩. clip : 摘自苏沈小雨CSS手册 clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换

CSS教程:clip属性完全解答

核心提示:clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少. clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐标都是以左上角即(0,0)点开始计算,如图三所示,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下边开始计算的. clip属性基础语法: clip : auto rect ( nu

巧用CSS的Border属性制作特效菜单

css|菜单 许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮:鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果.你是否也想使网页中的导航菜单产生这种迷人的效果?  上面这种菜单效果的制作思路是这样的:利用CSS属性可以动态改变的特点,我们先定义两组CSS,一组是鼠标不在菜单上的CSS,另一组是鼠标在菜单上用的CSS.再在onmouseover和onmouseout事件中分别调用不同的CSS就能实现本例的效果了.下面讲具体的

入门实例:用CSS实现hover悬停时链接文字产生阴影

css|链接 在前面,我们说过了链接文字的下划线的一些情况,现在我们考虑如何实现链接文字产生阴影?当鼠标移到链接文字上时,链接文字可以改变颜色,并产生一定的阴影而营造出立体效果,一定比较引人注目. 链接文字阴影效果CSS代码:     ul,li{ margin:0px; padding:0px; list-style-type: none;}    #nav{font-family: Verdana, "宋体", Arial;}    #nav li{ float:left; mar

CSS3实例教程:详细讲解Clip属性

文章简介:我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在Drupal的主题之中,他们有一段用来隐藏文本的代码,就是使用的clip属性. Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果. 我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在Drupal的主题之中,他们有一段用来隐藏文本的代码,就是使用的clip属性. /* Hide only visually,

CSS实现分页效果制作实例

CSS实现分页效果制作实例,教程和代码如下:  这个教程要说明的是如何为搜索结果或更长记录列表设计分页.因为经常有人问我这个问题,所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计出完美的分页样式. 这个教程也包含有实现Flickr.Digg式的简洁分页样式的HTML/CSS代码,随时可以应用于你的WEB项目中. Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and

《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性

6.6 单元格属性 HTML.CSS.JavaScript 网页制作从入门到精通 单元格是表格中最基本的单位.< td >单元格全部包含在行< tr >中,一个行里面可以有任意多个单元格.可以自定义设置单元格的各项属性,这些样式将覆盖< table >和< tr >已经定义的样式. 6.6.1 单元格大小width.height 默认情况下,单元格的宽度和高度会根据内容自动调整,也可以通过width.height设置单元格的宽度和高度. 语法: 说明: 单元

css所有背景属性在一个声明之中 css实例

css所有背景属性在一个声明之中 css实例