How to use CSS3 to achieve the effects of ever-changing text shadows Text-shadow

This article mainly introduces the CSS3 realization of the ever-changing text shadow Text-shadow effect design related materials, interested in small partners can refer to

The example of this paper is to share the CSS3 of the ever-changing text shadow Text-shadow effect, for your reference, the specific content as follows

Grammar:

none|<length>|none| [<shadow>,]*<shadow>
Or
none|<color>| [, <color>]*

A simple description of the value:

denotes color;

Represents a length value consisting of floating-point numbers and unit identifiers, which can be negative, specifying the horizontal extension distance of the shadow;

Represents a length value consisting of floating-point numbers and unit identifiers, which cannot be negative, specifying the distance at which the blur effect is to be played. If you only need a blur effect, set the first two length to 0.

Example:

<style type= "Text/css" >   p{       text-align:center;       margin:0;       Font-family:helvetica,arial,sans-serif;       Color: #999;       font-size:80px;       Font-weight:bold;       Text-shadow:0.1em 0.1em #333;//Lower right corner shadow       text-shadow:-0.1em-0.1em #333;//upper left corner shadow       text-shadow:-0.1em 0.1em #333;// Lower left corner shadow       text-shadow:0.1em 0.1em 0.3em #333;//Add Blur effect Shadow       text-shadow:0.1em 0.1em 0.3em black;//define text shadow effect   }   </style>

* * Simple summary: The first value of the **text-shadow property represents the horizontal displacement, the second value represents the vertical displacement, the positive or negative value, the value is biased or left, the third value represents the blur radius, the value is optional, and the fourth value represents the color of the shadow, which is optional.

Example: adding a foreground and background color contrast by shading

p{       Text-align:center;       margin:150px Auto;       Font-family:helvetica,arial,sans-serif;       font-size:80px;       Font-weight:bold;       Color: #fff;//Set text color       text-shadow:0.1em 0.1em 0.3em black;//Increase the contrast between foreground and background colors by shading   }

Summarize:

The shadow offset is specified by a distance of two <length> values to the text. The first length value specifies the horizontal distance to the right of the text, and negative values place the shadow on the left side of the text. The second length value specifies the vertical distance to the bottom of the text, and negative values place the shadow above the text.

After the shadow offset, you can specify a blur radius. The blur radius is a length value, and he points out the range of the blur effect.

You can also specify a color value before or after the length value of the shadow effect. Color values are used as the basis for shading effects. If no color is specified, the value of the color property is used instead.

Example: simulating a complex text effect

p{       Text-align:center;       margin:0;       padding:24px;       Font-family:helvetica,arial,sans-serif;       font-size:80px;       Font-weight:bold;       Color: #000;//Set text color       background: #000;//Set background color       text-shadow:0 0 4px White,                    0-5px 4px #ff3,                   2px-10px 6px #fd3,                   -2px-15px 11px #f80,                   2px-25px 18px #f20;//Use Shadow overlay to burn Text Effects   }

Note: Each shadow effect must specify a shadow offset value, and the blur radius and shadow color are optional parameters, separated by commas between each shadow.

p{       Text-align:center;       margin:0;       padding:24px;       Font-family:helvetica,arial,sans-serif;       font-size:80px;       Font-weight:bold;       Color: #D1D1D1;       Background: #CCC;       text-shadow:-1px-1px White,                    -1px-1px #333;//use Shadows to overlay three-dimensional text effects                   1px 1px white,                   -1px-1px #444;// Use shadows to overlay the concave text effects                   -1px 0 black,                                  0 1px black,                   1px 0 black,                   0-1px black;//use shadows to overlay text stroke effects                       0 0 0.2em #F8 7,                       0 0 0.2em #F87;//use Shadows to overlay the text outside of the Glow               }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!