CSS Shadow Xiangjie :

designers often use some unique fonts effects and page effects, shadow is one, it can make the page text and elements of a three-dimensional effect, and thus has been pronounced.For example, the text shadow, the traditional method may need to cut out the text, direct the use of images, considering the SEO and site performance, but also may use technologies such as CSS Sprites picture Integration:

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;)
....

This is a very difficult thing, put together pictures you will spend a lot of time, and in order to achieve better visual effects, you may need to use high-quality 32-bit png images, it also allows you to facedamn right the png transparency in IE 6!

In fact, the shadow of the text results, we can use CSS to achieve!

can view the view the demo first.

Text-shadow

text-shadow will allow us to achieve a perfect text shading effects.Basic writing:

text-shadow: [color x-axis y-axisblur radius], [color x-axis y-axis blur radius ]...

or

text-shadow: [x-axis y-axis blur radius of color],[x-axis y-axis blur radius of the color ]...

here is the color of the shadow ofcolor, you can color EDITORIAL can also be written in the final.x-axis and y-axis offset of their respective position of the shadow, blur radius can be interpreted as the shadow length.But now most browsers support multi-layer shadow, you can use a comma-separated multiple sets of settings (of course, you can just use a single setting).

Example:

h1 (color: #000; background: #333; font: bold 24px/2" Microsoft Ya Black" , Arial;
text -indent: 2em;
text-shadow: black 2px 2px 2px;)

effect of the following figure:

The property is currently among the majority of browsers other than IE support for IE, we can use the shadow filter to achieve:

filter: Shadow (color='black', direction='135 ', strength='2')

You might have noticed that filters can only be defined using the shadow angle of direction, but not the definition of xy-axis, z-axis has also been replaced with strength.Note that when using the filter, not be able to set the background color , otherwise the filter will be null and void!Also, if your math is not good, do not understand the trigonometric functions of the algorithm, you can use IE, another filter: dropshadow:

filter: dropshadow (offx=2, offy="2," color='black', positive='true');

Well, IE will always drag us back, but is worth mentioning that, IE these twoFilter is a support multi-layer shadow a!For example, can be written like 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');

To learn more about the IE, these two filters, please see: Shadow and Dropshadow

Let us look at an example of multi-layer shadow (here ignored the IE):

h1 (font: bold 32px/2 Verdana, Geneva, sans-serif; color: #f39;
text-shadow: 1px 1px 2px rgba (0,0,0, .8), 0 0 1em rgba (255, 0, 255, 0.5), 0 0 0.2em rgba (0, 0, 255, 0.9 );}

results shown in Figure:

Here we use to the rgba color, it is a statement both in the CSS colorsIts a way of transparency, and by most A-level browsers support color attributes ( In addition to IE ), to learn more, please see:" RGBa color browser support" - the same time, we recommend the case for the solid semi-transparent use of such a simple formulation.


This chapterfrom:Design and Material (http://www.q60.org),reproduced Please keep this line.