多彩文字(MultiColoredText)的制作Clip屬性_CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　
　　多彩文字(Multi Colored Text)的制作的原理是，將二個(gè)文字相同而色彩不同的文字重合在一起，通過(guò)分別給元素加 clip 屬性，使上面和下面的文字被剪切位置不同，設(shè)置不同的色彩，從而產(chǎn)生多彩文字的效果，即Multi Colored Text。
　　clip 屬性：

示例代碼 [hl5o.cn]

　　clip : auto | rect ( number number number number )
　　參數(shù)：
　　auto：對(duì)象無(wú)剪切
　　rect ( number number number number ) :
　　依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不剪切
　　說(shuō)明：
　　檢索或設(shè)置對(duì)象的可視區(qū)域。區(qū)域外的部分是透明的。
　　必須將position的值設(shè)為absolute，此屬性方可使用。

CSS代碼：（具體內(nèi)容請(qǐng)看運(yùn)行代碼）

示例代碼 [hl5o.cn]

.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代碼：（具體內(nèi)容請(qǐng)看運(yùn)行代碼）

示例代碼 [hl5o.cn]

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

查看運(yùn)行效果：

代碼調(diào)試框 [hl5o.cn]

<!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>hl5o.cn</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   class="znjbzjn"   id="top">
  <div   id="znjbzjn"   class="container"> <a href="/tz.php?url=hl5o.cn/" class="textTop">welcome to mb5u.com </div>
  <p>文字的上半部分</p>
  <div   id="znjbzjn"   class="container"> <a href="/tz.php?url=hl5o.cn/" class="textBottom">welcome to mb5u.com </div>
  <p>文字的下半部分</p>
  <div   id="znjbzjn"   class="container"> <a href="/tz.php?url=hl5o.cn/" class="textTop">welcome to mb5u.com <a href="/tz.php?url=hl5o.cn/" class="textBottom">welcome to mb5u.com </div>
  <p>二組文字重合的效果</p>
</div>
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]