Principle
Two identical and different colors of the text together, by adding clip attributes, so that the above and below the text is cut position different, resulting in two different colors.
Clip: Excerpt from the Su Shen light rain CSS Manual
Clip:auto | Rect (number number number number number) parameter: Auto: Object without clipping rect (number number number number): The upper-right-left order is provided from the upper-left corner of the object as The four offset values computed by (0,0) coordinates, where any of the values can be replaced with auto, which means that this side does not cut the description: retrieves or sets the viewable area of the object. The parts outside the area are transparent. The position value must be set to absolute, which can be used by this property.
Test environment
Firefox1.5, IE6.0, Opera8.5, IE5.01 Green Edition passed.
Css
The following is a reference fragment:
. 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
The following are reference fragments:
<div class= "container" >
<a href= "#" class= "Texttop" >cascading Style Sheet </ a>
<a href= "#" class= "Textbottom" >cascading Style Sheet </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" xml:lang= "en" "lang=" en "><pead><meta http-equiv=" Content-type "Content=" text/html; Charset=utf-8 "/><meta name=" Keywords "content=" colorful text, Multi colored text "/><meta http-equiv=" Description " content= "Use CSS Clip attributes to create colorful text (Multi colored text)"/><meta content= "All" name= "robots"/><meta http-equiv= "Pragma" content= "No-cache"/><meta name= "author" content= "Forestgan"/><meta "name=" Copyright "content=" Forestgan "/><title> Colorful text (Multi colored text) </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;} address{font-size:75%;} body,html{height:100%;} * HTML, * HTML body{Overflow:hidden;} #top {Min-height:90%; Overflow:auto; }* html #top {height:90%} #footer {height:10% background: #CC0000; color: #FFFFFF;} address{padding-top:1em font-style:normal;} a{Text-decoration:none; Textbottom {color: #333333; position:absolute; left:3em; top:1em; font:26px "Century Gothic", Arial, Helvetica, sans-s Erif; Clip:rect (18px Auto Auto Auto); texttop {color: #CC0000; position:absolute; left:3em; top:1em; font:26px "Century Gothic", Arial, Helvetica, Sans-seri F 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></pead><body lang= "en" ><div id= "Top" > <div class= "container" > <a href= "#" class= "Texttop" >cascading Style Sheet </a> </div> <p> text upper part </p> <div class= "Container" > <a href= "#" class= "Textbottom" >cascading Style Sheet </a> </div> <p> The lower part of the text </p> <div class= "container" > <a href= "#" class= "Texttop" >cascading Style Sheet </a> & Lt;a href= "#" class= "Textbottom" >cascading Style Sheet </a> </div> <p> Two Group text overlap effect </p></ Div><div id= "Footer" > <address> design by <a href= "Http://www.forest53.com" >forestgan</a> This demo uses <a href= "http://www.creativecommons.cn/" > Creative commons Authorization </a>--signature and non-commercial use. </address></div><script src= "Http://www.google-analytics.com/urchin.js" type= "Text/javascript" ></script><script type= "text/javascript" >_UACCT = "ua-152060-1"; Urchintracker ();</script> <noscript>google-analytics</noscript><script src= "Http://www.forest53.com/stat/mystat.asp?siteid =1 "type=" Text/javascript "></script><noscript>stat.</noscript><script language=" Javascript "> var now = new Date (); document.write (" <noscript> </ Noscript></body></ptml>
References: http://www.ibloomstudios.com/article8/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
