Designers often use some unique font effects and page effects, and shadow is one of them. It can make the text and elements on the page have a three-dimensional effect and stand out. For example, for text shadows, the traditional method may require cutting out the text and using images directly. If SEO and website performance are considered, technologies such as CSS Sprites may also be used to integrate images:
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 tricky thing, stitching together images will take you a lot of time, and in order to achieve better visual effects, you may have to use high-quality 32-bit png images, which will make you face the damn IE 6 png transparency problem!
In fact, we can completely use CSS to achieve the shadow effect of text!
You can view the demo first.
Text-shadow
text-shadow allows us to achieve perfect text shadow effects. Basic writing:
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 first or last. The x-axis and y-axis are the offset positions of its shadow respectively, and the blur radius can be understood as the length of the shadow. And most browsers now support multi-layer shadows. You can separate multiple groups of settings with commas (of course you can also just use a single setting).
Example:
h1{color:#000; background:#333; font:bold 24px/2 "Microsoft Yahei",Arial;
text-indent:2em;
text-shadow:black 2px 2px 2px; }
The effect is as follows:
This attribute is currently supported by most browsers except IE. For IE, we can use the shadow filter to achieve this:
filter: Shadow(Color='black', Direction='135', Strength='2')
You may have noticed that using the shadow filter can only define the angle direction, but not the xy axis, and the z axis has also been replaced by strength. Note that when using this filter, you cannot set the background color , otherwise the filter will be invalid! In addition, if you are not very good at mathematics and do not understand the algorithm of trigonometric functions, you can use another filter of IE: dropshadow:
filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
Well, IE will always hold us back, but it is worth mentioning that these two filters of IE support multi-layer shadows ! For example, you can write:
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 these two filters for IE, check out: Shadow and Dropshadow
Let's look at an example of multi-layered shadows (ignoring IE here):
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);}
The effect is as shown in the figure:
Here we use rgba color, which is a method of declaring color and transparency at the same time in CSS, and is a color attribute supported by most A-level browsers ( except IE ). For more information, please see: "RGBa" Color browser support》——At the same time, we recommend using this simple writing method for solid color translucency.
Browser compatibility for text-shadow
Currently text-shadow is supported by Firefox 3.5+, Safari 1.1+/chrome 2.0+ and opera 9.5, but is not supported by IE. It should be noted that only Safari 4.0 supports multi-layer shadows.
All versions of IE do not support text-shadow;
Opera 9.5+ supports up to 6-9 layers of shadows and uses CSS2 rendering order (the first defined shadow is at the bottom). And for performance reasons, the blur radius is limited to 100px;
Gecko (Firefox) theoretically supports infinite layers of text-shadows (but it is not recommended to try) and follows the new CSS3 rendering order (the shadow defined first is on top);
Safari 1.1-3.2 only supports a single layer of text-shadow (only the declaration before the first comma is displayed and the following is ignored). Safari 4.0+ only supports multi-layer shadows and the new CSS3 rendering order;
box-shadow
Let’s talk about IE first. IE does not support the box-shadow attribute, but the two filters mentioned above can be used to achieve shadow effects. This means that IE does not distinguish between text shadow and box shadow ! This creates some problems: the text within the element inherits the element's shadow settings. But if you do not define the background and border of the element, only the text shadow will appear. If you only define the background attribute without defining the border, only the box shadow will appear, and the text will not have a shadow; and if you only define the border attribute and If the background is not defined, the box shadow will appear, and the content text and pictures will also have shadows. Interested students can give it a try.
Okay, now let's forget about IE and take a look at box-shadow. In fact, after understanding text-shadow, box-shadow is easy to understand. Currently, only firefox and safari/chrome support the box-shadow attribute through private attributes. Although the Opera browser does not currently support this attribute, it is mentioned in its documentation that the next version of the engine Presto 2.3 (the latest version of Opera 10.10's engine is Presto 2.2.15) will support box-shadow, then Let us wait slowly.
The syntax of box-shadow is the same as text-shadow.
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px black;
-moz-box-shadow:2px 2px 2px black;
...
}
In fact, box-shadow and border-radius are good partners:
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid ddd;
-webkit-box-shadow:0 0 10px black;
-moz-box-shadow:0 0 10px black;
padding:10px;}
The effect is as shown in the figure:
Firefox only started to support box-shadow in version 3.5, and the current rendering of shadows is not perfect yet.
Summarize
CSS shadow is a very useful feature in CSS3. We can already use text-shadow in Firefox/webkit/Opera, and box-shadow will soon be implemented in these browsers. Only IE is unique and still insists on its crappy filters. This is really a failure.