CSS Shadow Effect II: Fuzzy Shadow CSS Drop Shadows II: Fuzzy Shadows
Author: Sergio Villarreal http://www.alistapart.com/authors/sergiovillarreal/ Original Address: http: //www.alistapart.com/articles/cssdrop2/ Original Issue Date: Translation April 23, 2004: Breeze Date : December 9, 2004
We like shadows. We are happy to create shadows and we love CSS and web standards, so we wrote the CSS shadow effect (http://www.alistapart.com/articles/cssdropshadows/) This article. A weak voice from the mind is satisfied with it, I think that is the reason it ends. We are wrong. The Internet has become a medium. After a few minutes after publishing the article, we have begun to receive an annotation, questioning and proposal of this method. The most important thing is the method of Phil Baines (http://wubbleyew.com/tests/dropshadows.htm), which can handle the shadow of paragraphs and make the mark easy. Thank you so much. Most of the complaints from this projection technique come from a problem, the top edge and the left edge of the shadow are too obvious, although it is usually acceptable, but this is indeed like an image editing software (blurred shadow). The given projected image is a partial point that can be effectively omitted. We feel inevitable, the main reason should be attributed to the IE browser to handle the natural incompetence of the PNG format image transparency.
The related pictures of this topic are as follows:
Jan pointed out a technology that can correctly compensate the Alpha channel of the IE browser. This method uses ExplhaimageLoader filters based on Explorer (discussions in Ala http://www.alistapart.com/articles/pngopacity/), but no assistance is required for JavaScript code. This is simply God's gift. Combined with this technique, some image spoofings and our fake shaded offset methods, we will be able to make a fuzzy shadow that can work across the browser.
In this article, we will learn:
Hide some styles in a non-IE browser make it not affecting document confirmation; forcing IE5.5 / IE6 correctly display PNG transparency; for our shadow effect application, the fuzzy shadow edge mentioned in front.
First, you need to fake our blurred shadow edges. This way, we must first create an inverse shadow in the image editing software. Usually we placed a black shadow on a background color. In order to have a good effect, we need a colored shadow, and the color must be above the background we will be applied. Starting with an image such as "Forgery Shadow Offset", we described earlier in the previous article. This shadow will be thinner than the last time (about 3px width 6px size shadow is not bad). We will use white as a background color in an example. Of course, you can adjust it to adapt to your needs. We will apply our "shadow" on this image, pay attention to specify white as a shadow. A thick shadow is a pleasing, more shadow, your shadow looks like faded. We will now do like this.
The related pictures of this topic are as follows:
Save this picture as a transparent PNG format, we will use the browser that IE5.5, IE6, and any standard. Make a standard thick shift without a shadow version and saves it as a file in GIF format. We have to apply it to IE5 (not supported AlphaImageLoader approach). Here are two sample files: PNG (http://www.alistapart.com/d/cssdrop2/img/shadow2.png) / gif (http://www.alistapart.com/d/cssdrop2/img/shadow2. GIF) (Use the image editing software to view these two pictures, because they look like a white on your browser in another white) because we have a solid color in the edge of the offset, in fact we give up Transparent shadow may be, so we will use a simple GIF picture. Confident, you apply this effect to the background color you will use. Here is our shadow example: GIF (http://www.alistapart.com/d/cssdrop2/img/shadow.gif) This effect is the image / block element in two
The basic technology is still the same: we set up forgery offset (and its flip shadows) for the background of the Div, and then shadow is the background of the Div outside. When they overlap, the transparent PNG looks like gradually dissolving the shadow image until it becomes a pure background color. And smart is that these are in Explorer.
The related pictures of this topic are as follows:
This CSS is very close to the one we see in the earlier article:
.alpha-shadow {float: LEFT; Background: URL (IMG / Shadow1.gif) No-repeat bottom right; margin: 10px 0 0 10px! important; margin: 10px 0 0 5px;}
.alpha-shadow div {background: URL (IMG / Shadow2.png) No-repeat Left Top! Important; Background: URL (IMG / Shadow2.gif) No-repeat LEFT TOP; Padding: 0px 5px 5px 0px;}
.alpha-shadow img {background-color: #fff; border: 1px solid # a9a9a9; padding: 4px;
If you carefully you will find that we still contain non-blurred GIF offsets in the Div background, which helps not support IE5.0 of the AlphaImageLoader filter. In fact, this code can be applied to all versions of Explorer. For IE5.5 / 6, we have to create an additional CSS file for adjustment.
IE.CSS
First we include a CSS file and name IE.css to make the activation AlphaImageLoader filter simple and reliable. I know this is not so decent, and maybe the standard class is posted on our head [Translation: The author seems to be open a joke, unfortunately, I don't understand :-), but we will wait from other Hide this file in your browser, then everything is OK. There are a bit. Our IE.CSS style looks like this .alpha-shadow div {filter: progid: DxImageTransform.microsoft.alphaimageLoader (src = 'img / shadow2.png', SIZINGMETHOD = 'crop'; background: none;
The AlphaImageLoader filter supports two zoom methods: CROP and Scale. We will apply the CROP method for the offset (Scale defines the entire image as block, which is not what we expect). Since the filter is a bit limited and the image settings of class CSS are not supported, then we insist on moving the shadow to the image of the image (the default position of the image is from beginning to the left). We must notice that because this filter puts the image in the foreground of the block element is more than the background, this technology only needs a fuzzy shadow in Explorer to set the
Condition notes
This style sheet in IE.CSS is hidden in all browsers that don't need it. We want to use the condition annotation - a technology that Microsoft provides a specific version IE browser. They are included in the HTML document, and it looks like a standard HTML code. In addition to the IE5 browser ignores them (the same verifier of W3C). We insert these code into the
area of the document, behind the CSS created for the shadow.
More specifically, this code shows that this is the version number greater than or equal to 5.5 (because the version vector must be detailed in the 5.5000 Version_Vectors) IE browser, thus customizing a special style for IE5.5 and IE6. . The realization method of fuzzy shadows is here to list all. It seems extremely complicated, but on the other hand, they will say "the God's life in the details" [注: It seems to be a name]. In addition, this technique mentioned can be used to achieve a variety of effects.
There is a cat here:
The related pictures of this topic are as follows:
