Using CSS to create colorful text

Css

Effect:

Top half of the text

The lower part of the text

The effect of two groups of words coincidence

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)

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.

Test environment:

Firefox1.5, IE6.0, Opera8.5, IE5.01 Green Edition passed.

Css

. 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

<div class= "Container" >

<a href= "#" class= "Texttop" >cascading Style Sheet </a>

<a href= "#" class= "Textbottom" >cascading Style Sheet </a>

</div>