多彩文字(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,此屬性方可使用。
參數(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;
}
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>
<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]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)CSS教程:
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-多彩文字(MultiColoredText)的制作Clip屬性
。