Shadow effect implemented with CSS

Original article from: a list apart Author: Sergio javasarreal
Onestab [2004.02.28]

"... If there is a technology that uses CSS to flexibly add shadows to any block-level element, and can automatically expand with the size of the content, but also apply to most popular browsers, that's great! Believe it? You only need to write a few lines. Code ."

The shadow effect has become a routine of graphic design. Graphic designers regard it as the beginning of the Swiss army knife and use it everywhere. Despite a lot of criticismAlwaysVery popular. Although image editing software can achieve shadow effects, adaptability and ease of use are the trend of the times in the rapid development of web design, this static image made with a fixed background effect is difficult to adapt well.

If there is a technology that uses CSS to flexibly add shadows to any block-level element, and can automatically expand with the size of the content, but also apply to most popular browsers, that's great! Believe it? You only need to write a few lines of code.

Is it interesting? Don't worry. This is not our invention. We just made improvements. This technology was conceived and demonstrated by Dunstan orchard on the famous 1976 design (to salute Dunstan. We think this method is concise and practical, but after in-depth research, we find there is room for improvement.

Here is how it works: first use the image software to create a background image with only shadow on the image, there is no visible boundary (a simple method is to apply some effect to the blank selection area ). This image needs to cover the maximum elements to be modified. In practice, 800x600 is generally enough. Save it as a GIF image, remember to apply the effect on the background color, and save it as a completely transparent PNG Image (that is, there is no background color ). This is to differentiate the ability of the browser. [Note: to allow a browser that supports transparent PNG images to use PNG, ie to use GIF.] Here is the GIF and PNG files to be used.

 

We start by adding shadows to images and then extend them to other block-level elements. For the sake of intuition, we name this class IMG-shadow. We will first use this cute kitten for a test:

Corresponding code (add an additional Div ):

 
<Div class = "IMG-Shadow">  </div>
 

Demonstrate the technology we used:

 

 

First, we use the previously prepared shadow image as the background of the div.

Background: url(shadow.gif) No-repeat bottom right;

Then, we set the left margin and top margin of the image to a negative value to "drop" The Shadow. The width of the shadow is 6 pixels, which is also the number in the Code:

Margin:-6px 6px 6px-6px;

To avoid specifyingDivWe will float it. (Otherwise, it occupies all available horizontal space .)

Remember what we said before, do you want to make a good Browser display a good shadow effect? In this line of code:

Background: url(shadowalpha.png) No-repeat right bottom! Important;

"! Important indicates that the style specified here has a higher priority than the general style Declaration on the same element (See the standard), and does not support all versions of Internet Explorer that are not supported internally by transparent PNG. "! Importan ". Through two conflicting statements, we get the expected result (ie uses the second one, and most browsers use the first one ). The final result is as follows: when you need to change the background color, the shadow effect displayed by a PNG-supported browser is perfect. In poor ie, the shadow is still its original color.

You may ask,Why?Do you want to do this? The answer is yes.

• We can: Advanced browsers can automatically achieve their best results without any effort.
• It can repair itself: If the new version of Internet Explorer (which comes with Longhorn) supports these two standards, we can still get accurate and completely transparent shadows without patching.

The final CSS code is as follows:

 
. 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 somewhat different. The padding in the last line makes the image box more beautiful, but it does not work in IE 5.0 and 5.5, however, the shadow effect still exists.

In a standard-compliant browser, shadows and backgrounds are seamlessly integrated. In IE, unless you set the shadow and background to the same color, the transition between the shadow and the background will appear stiff. Here is the final effect: [Note: Please watch the effect in different browsers.]

 

 

Next, let's add a shadow effect to a piece of text.

A text is just a block element, and the above technology should also apply. In fact, in most browsers, there is no problem. Guess which browser is causing the damage?

When developing such a technology, we found that if we were not dealing with images but a block-level element, the difficulty would be far greater than we could imagine. No matter how we try it, ie always removes the upper left corner (that is, the area outside the "highlighted" Shadow. What's even more ridiculous is that only version 5.0 of IE works normally. It seems that any skills, overflow settings, or suggestions are useless (of course, I 've tried it too.Spell). We decided to give up and look for other solutions.

Let's start with the sliding doors method of Douglas Bowman. Of course, additional overhead (another Div) must exist. Our section should look like this:

 
<Div class = "p-Shadow"> <div> <p> The rain in Spain... </P> </div>
 

This is the opposite of specifying the negative left and top margin (margin) values. This time, we specify a positive value for the right and bottom margins (padding) to shadow (actually the background of the outer Div) exposed. Then, we place a partially transparent GIF image on the shadow to forgeFalse. Note: The color of the visible part of the image must be the same as that of the background for the shadow effect. This image is named shadow2.gif ". The image structure is as follows:

 

 

This is an example of a GIF image.BlankSo it is best to save it and watch it in the graphics processing software .)

This is what we want to achieve:

 

 

The following is a style table that achieves this effect. Note that extra images and padding are only used for Internet Explorer. The vast majority of browsers will ignore the inner Div and still use the Image Shadow technology mentioned above.

. 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 precautions and paragraphs mentioned in the previous image examples should also be noted. This is the final result. (Please try to change the browser window size, observe the section size change and shadow adjustment .)

The rain in Spain falls mainly on the plain.

 

Notes

This article breaks down the image and paragraph styles for clarity, but you can actually make some small changes and integrate them together.

This technology has been tested in Gecko engine browsers, Safari, opera, and IE 5.0 +. In addition to some minor differences mentioned, no problems have been found. Applicable to most browsers (BesidesNetscape 4.x ).

Thank you

Thanks to Dunstan, who invented the Shadow technology, and Douglas Bowman's sliding doors technology.