Shadow effect implemented with CSS
From the original: A List Apart Author: Sergio Villarreal Chinese translation: onestab [2004.02.28]
"... If there is a technology, use CSS to flexibly add shadows to any block-level element, and can be expanded with the size of the content, but also to most popular browsers, then how good! Do not believe? Tell?" You can do it with a few lines of code. "
The shadow effect became a set of flat design, the flat designer as the screwdriver of the Swiss army knife, with a lot of unsuspects, but it has been popular. Although the shadow effect can be achieved with image editing software, today, adaptability and ease of use are trend in the WEB design, which is difficult to adapt to a static picture made in fixed background effect.
If there is a technology, use CSS to flexibly add shadows to any block-level element, and can be used automatically with the size of the content, but also to most popular browsers, how good is it! Do not believe? Tell you, you can do it with a few lines of code.
Is it very interesting? Don't worry, this is not our invention, we only have improved this. This technology is conceived by Dunstan Orchard on 1976 Design, and made a demonstration. We feel that this method is simple and practical, but after in-depth research, it is found that there is still room for improvement.
Here is its working principle: first make a background picture with image software, there is only shadows on the picture, and there is no visible boundary (a simple method is to apply some effect on the blank selection area). This picture is able to overwrite the largest elements that will be modified, in practice, 800 x 600 is generally enough. Save it as a GIF picture, remember to apply the effect on the background color, and save it as a fully transparent PNG picture (ie no background color). This is to treat the browser to distinguish between the ability of the browser [即 让 即 支持 支持 支持 透 支持...... ]. Here is the GIF file and a PNG file that will be used.
Let's start with how to add shadows for the image, then extend to other block elements. For intuitive sake, we name this class img-shadow, let us use this cute kitten to work:
The corresponding code (only an additional DIV):
The following figure demonstrates the technology we used:
First, we use the shadow picture previously prepared as the background of the div.
Background: URL (Shadow.gif) No-repeat bottom Right;
Then, we set the left distance of the picture to a negative value, so that it "cast" shadow, the width of the shadow is 6 pixels, which is also the number in the code:
Margin: -6px 6px 6px -6px;
To avoid specifying the size of the DIV, we float it. (Otherwise it will occupy all the horizontal space available.)
Remember we said before, do you want a good browser to display a good shadow effect?诀窍 in this line of code:
Background: URL (Shadowalpha.png) No-repeat Right Bottom! Important; here "! important" indicates that the priority of the style specified here is higher than the common style declaration on the same element (see standard), lacking inside the transparent PNG All versions of supported version of Internet Explorer just do not support "! Importan". Through the contradictory declaration, we got the desired result (IE used the second, and most browsers will be the first). The final result is this: When you need to change the background color, the browser that supports PNG is very perfect. In the poor IE, the shadow is still its original color.
You may ask, why do you want this? The answer is a double carving of an arrow.
We can: not blowing ash, you can automatically let the advanced browser play its best effect. It can be self-fixing: If (with Longhorn) The new Internet Explorer supports these two standards, we do not need to fix, still able to get accurate, completely transparent shadows.
The final CSS code is like this:
.img-shadow {
FLOAT: LEFT;
Background: URL (Shadowalpha.png) No-repeat Bottom Right! important;
Background: URL (Shadow.gif) No-repeat bottom Right;
Margin: 10px 0 0 10px! important;
Margin: 10px 0 0 5px;
}
.img-shadow img {
Display: block;
Position: relative;
Background-color: #fff;
Border: 1PX Solid # a9a9a9;
Margin: -6px 6px 6px -6px;
Padding: 4px;
}
In order to compensate for the error of the IE floating model, the Margin in the above code is some differences, and the last line of Padding is more beautiful, but unfortunately does not work in IE 5.0 and 5.5, but the shadow effect still exists.
In the standard browser, shadows and background seamless fusets. In IE, unless you set the shadow and background to the same color, the transition of shadows and backgrounds is relatively hard. Here is the ultimate effect: [Translation: Please watch the effect in different browsers. ]
Next, let us add a shadow effect for a paragraph.
A piece of text is just a block element. It is reasonable to comply with the above technology. In fact, there is no problem in most browsers, guess, which browser is destroyed?
When developing this technology, we found that if it is not a picture, it is a block element, it is difficult to exceed our imagination. No matter how we try, IE always cuts the upper left corner (that is, "highlighting the shadow). More comics is that only 5.0 version of IE is normal. It seems that any technique, overflow settings or suggestions are not enough (of course, I also tried the spell). We decided to give up and sword to seek other solutions.
We started from Douglas Bowman's Sliding DOORS (Sliding Door) method, of course, additional overhead (another DIV) must have, our paragraph should be this:
the rain in spain ...
On the contrary to the approach to the left and upper margins (margin) value just specified, this time is the right, lower margin (padding) specified positive, and exposes the shadow (actually the background of outer DIV). Then, we put on a shadow with a local transparent GIF picture, forged the shadow offset effect of the leave. Note that the color of the picture visible portion is the same as the background color used for the shadow effect. The name of this picture is "shadow2.gif". The composition of the picture is as follows:
This is the example of GIF picture (this picture seems to be blank in the browser, so it is best to put it, watch it in graphics processing software.)
This is what we want to achieve:
Below is a style sheet to achieve this effect. Note Additional pictures and PADDING are only used for Internet Explorer. Most browsers will ignore the inner DIV, still use the picture shadow effect technology mentioned earlier.
.p-shadow {
Width: 90%;
FLOAT: LEFT;
Background: URL (Shadowalpha.png) No-repeat Bottom Right! important;
Background: URL (Shadow.gif) No-repeat bottom Right;
Margin: 10px 0 0 10px! important;
Margin: 10px 0 0 5px;
}
.p-shadow div {
Background: None! important;
Background: URL (Shadow2.gif) No-repeat left top;
Padding: 0! important;
Padding: 0 6px 6px 0;
}
.p-shadow p {
Color: # 777;
Background-color: #fff;
Font: Italic 1em Georgia, Serif;
Border: 1PX Solid # a9a9a9;
Padding: 4px;
Margin: -6px 6px 6px -6px! important;
Margin: 0;
}
The background color considerations mentioned in the previous picture example, the paragraph should also pay attention. This is the final result. (Please try to change the size of the browser window, observe the change of paragraph size and adjustment of the shadow.)
............... ..
Note note
In this article, the style of the picture and the paragraphs are scattered in order to clearly, but they can do some small changes and integrate them together.
This technology has been tested in the Gecko engine browser, Safari, Opera, and IE 5.0 , except for some of the slight differences, no problems have been found. It should be applied to most browsers (except Netscape 4.x).
