21st Chapter CSS3 Text effect

Learning Essentials:

1. Text Shadows

2. Text clipping

3. Text Strokes

4. Text Fill

Keynote Teacher: Li Tinghui

This chapter focuses on the CSS3 Chinese version of HTML5, which also contains some of the CSS3 text properties that were previously spoken.

A Text Shadow

CSS3 provides a text-shadow text shadow effect, which was previously mentioned, but does not involve browser support.

10+

TD rowspan= "2" valign= "Bottom" width= "" ">

text-shadow & nbsp;	opera	firefox	chrome	ie	safari
	9.5+	3.5+	4+	3.1+

Here are a few points to note: 1.text-shadow in the CSS2 time, but the major browser due to the consumption of a large number of resources, delayed support, and then removed in the CSS2.1. Now, the CSS3 has been fully supported; 2. The minimum support version, different manuals and textbooks are not very similar, but the version of the age, harmless. The most accurate can query this website: http://caniuse.com. Most need to pay attention to only IE10 support, IE9 not supported; 3. The current browser does not need to add any prefix to this attribute, the specific query prefix version can access the address just provided.

Positive Shadow

text-shadow:1px 1px 1px red;

Negative Shadow

Text-shadow: -1px-1px 1px red;

Multiple Shadow Overlays

text-shadow:0px 0px 0 rgb (188,178,188),             1px 0px 0 rgb (173,163,173),             2px 0px 0 rgb (157,147,157),             3px 0px 0 rgb ( 142,132,142),             4px 0px 0 rgb (126,116,126),             5px 0px 0 rgb (111,101,111),             6px 0px 0 rgb (95,85,95),             7px 0px 0 R GB (79,69,79),            8px 0px 7px rgba (0,0,0,0.35),             8px 0px 1px rgba (0,0,0,0.5),             0px 0px 7px rgba (0,0,0,0.2);

Two Text clipping

CSS3 provides the Text-overflow property to control the overflow part of the text, which is trimmed out of the overflow and then determines whether an ellipsis is added. First, let's look at the properties of the style sheet, as follows:

Property value	Description
Clip	Default value, the "..." ellipsis is not added when clipping text
Ellipsis	Add "..." ellipsis when clipping text

Must not change the number and use overflow control overflow

{    width: 160px;     white-space: nowrap;     background: silver/*text-overflow:clip; */     text-overflow: ellipsis;     Overflow: hidden;}

The support degree of Text-overflow is determined by its attribute value, the browser support degree of different attribute value is different.

Property value	Opera		Firefox	Chrome	Ie	Safari
Clip	9.63+		2.0+	1.0+	6.0+	3.1+
Ellipsis	10.5+		6.0+	1.0+	6.0+	3.1+

In earlier versions of Opera 10.0 ~ 10.1, a prefixed-o-was required.

{    -o-text-overflow: ellipsis;     text-overflow: ellipsis;}

In the mainstream version of Opera, the engine has moved closer to WebKit, and there is no need to-o-. For now, there is no need for compatible-o-.

Three Text Strokes

The

CSS3 provides stroke properties, namely  text-stroke, Text-stroke-width, Text-stroke-color. Currently only the browser of the webkit  engine is supported, and the-webkit-prefix must be added to be valid.

Property	Opera	Firefox	Chrome	Ie	Safari
Text-stroke Series	15.0+	Not supported	4.0+	Not supported	3.1+

Experimental phase of the product, understand can

{    font-size: 50px;     -webkit-text-stroke: 1px red;}

Modify the color and thickness of strokes

{    font-size: 50px;     -webkit-text-stroke: 1px red;     -webkit-text-stroke-color: Orange;     -webkit-text-stroke-width: 2px;}

Four Text fills

CSS3 provides a text color fill feature: Text-fill-color, which feels like a color property. In fact, in conjunction with other properties to achieve a different effect.

Property	Opera	Firefox	Chrome	Ie	Safari
Text-fill-color	15.0+	Not supported	4.0+	Not supported	3.1+

Does not match the background style, and the color property is not different

{    font-size: 150px;     -webkit-text-fill-color: red;}

New features with CSS3 backgrounds Create gradient text

{    font-size: 150px;     font-family: blackbody ;     background: -webkit-linear-gradient (Top, #eee, #aaa 50%, #333 51%, #000);     -webkit-background-clip: text;     -webkit-text-fill-color: transparent;}

21st Chapter CSS3 Text effect