Use CSS to create colorful texts

Effect:
Upper part of the text
Lower part of the text
Effect of overlapping two groups of texts
Principle:
The two texts with the same color and different colors are overlapped. By adding the clip attribute to the texts respectively, the texts above and below are cut at different positions, thus producing two different colors.
Clip: from Su Shen Xiaoyu CSS Manual
Clip: auto | rect (number)
Parameters:
Auto: The object is not cut.
Rect (number ):
The four offset values calculated from () coordinates in the upper-right-bottom-left Order of the object are provided. Any value can be replaced by auto, that is, this edge is not cut.
Note:
Retrieves or sets the visible area of an object. The area is transparent.
You must set the position value to absolute. This attribute can be used only.
Test environment:
Firefox1.5, IE6.0, Opera8.5, IE5.01 green version passed.

The code is as follows:

Copy code

CSS . TextBottom { Color: #333333; Position: absolute; Left: 3em; Top: 1em; Font: 26px Century Gothic, Arial, Helvetica, sans-serif; Clip: rect (18px 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"> Cascading Style Sheet </a> <A href = "#" class = "textBottom"> Cascading Style Sheet </a> </Div>