CSS Shadow detailed

Core tip: designers often use a number of unique font effects and page effects, Shadow is one of them, it can make the page text and elements have three-dimensional effect, thereby being highlighted.

Designers often use a number of unique font effects and page effects, Shadow is one of them, it can make the page text and elements have three-dimensional effect, and thus be highlighted. For example, for text shading, the traditional method may need to cut out the text, direct use of pictures, if you consider SEO and site performance, you may also use CSS sprites technology to integrate the picture:

h2{Background:url (sprites.png) no-repeat 0 0 font-size:0; text-indent:-9999em...} h2#title1{background-position:0- 30px;} H2#title2{background-position:0 -60px;

It's a tricky thing, flattening pictures takes up a lot of your time, and in order to achieve better visuals, you might also want to use a high quality 32-bit PNG image, which will allow you to face the damn IE 6 png transparency problem!

In fact, for the text shadow effect, we can completely use CSS to achieve!

Can view the view demo first.

Text-shadow

Text-shadow allows us to achieve the perfect text shadow effect. Basic wording:

text-shadow:[Color x axis Y-axis blur radius],[color x axis Y-axis blur radius] ...

Or

Text-shadow:[x Axis Y-axis blur radius color],[x axis Y-axis blur radius color] ...

The color here is the color of the shadow, you can write the color in front, also can be written in the end. The x and y axes are the offset positions of their shadows, and the blur radius can be understood as the shadow length. And now most browsers support multiple layers of shading, you can separate multiple sets of settings with commas (and, of course, just a single setting).

Example:

H1{color: #000; background: #333; font:bold 24px/2 "Microsoft Ya Hei", Arial; <br/>text-indent:2em;<br/>text-shadow: Black 2px 2px 2px; }

The effect of the following figure:

This property is currently supported by most browsers other than IE, and for IE, we can use the shadow filter to:

Filter:shadow (color= "Black", direction= "135", strength= "2")

You may have noticed that using the shadow filter only defines the angle direction, not the XY axis, and the z axis is strength. Note that when you use the filter, you cannot set the background color, or the filter will not work! In addition, if your math is not very good, do not understand the trigonometric function algorithm, you can use IE's another filter: DropShadow:

Filter:dropshadow (offx=2, offy=2, color= "Black", positive= "true");

Well, ie always drags us down, but it's worth mentioning that IE's two filters support multiple shades! For example, you can write this:

Filter:dropshadow (offx=2, offy=2, color= "Red", positive= "true")
DropShadow (offx=2, offy=2, color= "Yelow", positive= "true")
DropShadow (offx=2, offy=2, color= "Blue", positive= "true");

For more information on these two filters for IE, see: Shadow and DropShadow

Let's look at an example of a multiple-layer shadow (ignoring IE here):

H1{font:bold 32PX/2 Verdana, Geneva, sans-serif; color: #f39 <br/>text-shadow:1px 1px 2px rgba (0,0,0,.8), 0 0 1em RGB A (255, 0, 255, 0.5), 0 0 0.2em rgba (0, 0, 255, 0.9);} <br/>

Effect as shown:

Here we use the RGBA color, which is a method of declaring color and its transparency in CSS, and is supported by most a-level browser (except IE), for more information, see: "Rgba Color browser support"- At the same time, we recommend using this simple notation for solid color translucency.

1 2 Next page > full text reading tips: Try "←→" button, turn the page more convenient Oh!

[1] [2] Next page