Colorful text (Multi colored text) is the principle of the production, will be two text and different colors of the text coincide together, by adding clip attributes to the above and below the text is cut position different, set different colors, resulting in the effect of colorful text, that is, Multi Colored Text.
Clip properties:
Clip:auto | Rect (number number number number)
Parameters:
Auto: Object No clipping
Rect (number number number number):
Provides four offset values computed from the upper-left corner of the object (0,0) based on the upper-right-left order, where any of the values can be replaced with auto, which means that this edge does not cut
Description
Retrieves or sets the viewable area of an object. The parts outside the area are transparent.
The position value must be set to absolute, which can be used by this property.
CSS code:
. 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 code
<div class= "Container" >
<a href= "#" class= "Texttop" >welcome to Webjx.com</a>
<a href= "#" class= "Textbottom" >welcome to Webjx.com</a>
</div>
To view the effects of a run:
<! 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" ><pead><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-s Erif; 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></pead><body><div id= "Top" > <div class= "container" > <a href= "http://" www.webjx.com/"class=" Texttop ">welcome to webjx.com</a> </div> <p> Upper half of text </p> <div class= "Container" > <a href= "http://www.webjx.com/" class= "Textbottom" >welcome to webjx.com</a> </ Div> <p> The lower part of the text </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> Two group text coincidence effect </p></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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
