Samstag, April 08, 2006

HTML + CSS Shadow Effect with real transparency

If you want to give your objects a kind of 3D feeling then you might want to use shadows for those objects that are placed upon the web page.

Using special graphics

A often solution for a shadow effect is to use table layout around the main content and arrange a set of graphics around the right and bottom border. You can get really wonderful shadow dropping effects using this approach but because semi transparent images are not very well supported on IE you will have to pay attention to the background color you use on the page and have to mix it into your shadow images.

Using a Microsoft IE specific CSS filter attribute

When using the IE only you can also us one of the wonderful filter effects that are available in this browser. Just add a CSS filter attribute like that:

filter: progid:DXImageTransform.Microsoft.dropShadow(Color=AAAAAA,offX=8,offY=8,positive= true);

If you use IE that you can see these shadows on the entry page for the visual effects library. These shadows are also drawn by using solid colors.

Using CSS opacity

Here is a better solution that really resembles a kind of shadow because the text and graphics in the shadow are really displayed in dimmed light. The clue to this effect is a built-in opacity CSS graphics effect that is available IE, Mozilla, Firefox - but in different way.

In Internet Explorer:  style="filter: alpha(opacity= 50)"

The IE notation of the opacity effect is using a proprietary CSS attribute named filter that can be used to add various effects to a HTML element. Here we use the alpha filter.

In Mozilla/Firefox: style= "-moz-opacity:0.5"

The Mozilla / Firefox provides a proprietary css attribute named -moz-opacity that allows specifying a opacity value.

In Opera: style= "opacity:0.5"

The Opera browser also has a proprietary css attribute named opacity that allows specifying an opacity value.

These 3 CSS attributes can be combined together and every browser ignores all the attributes that are unknown:

style="filter: alpha(opacity= 50); -moz-opacity:0.5; opacity: 0.5" 

The HTML shadow object

This effect must be applied to rectangle region with a fixed width and height that is over the main content by using an absolute position by using the same size as the html part that is dropping this shadow.

Here is a simple sample that uses this trick. You can see it live at ShadowDemo.aspx.

The good about this solution is, that no graphics are used and that the shadow does not hide the text below but only seems to dim the available light.

  • The outer div element is used to do the absolute positioning of the whole group.
  • The first inner <div> element is the object that has the opacity effect applied. It is positioned some pixel to the right and down by using an absolute positioning (relative to the containing <div>) too.
  • The Content is placed inside the second inner <div> element that must have a relative position without any offset to be displayed above the shadow object.

Here is the plain HTML code:

<div class="VEPart" style="position: relative; width: 120px; top:-90px; left: 40px;">
  <div class="VEShadow" style="position: absolute; left: 10px; top: 10px;
    width: 120px; height: 84px; background-color: black;
    filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;"> </div>
  <div class="VEContent" style="position: relative; height: 80px;
    background-color: #FFFFDD;"> I am flying above the text and dropping a shadow.</div>
</div> 

You can see how it looks like on the demo website at http://www.mathertel.de/AJAXEngine/S04_VisualEffects/ShadowDemo.aspx

Kommentare:

Anonym hat gesagt…

"-moz-opacity:0.5"
"opacity:0.5"

opacity is actually a css 3.0 attribute, and is supported by newer firefox / mozilla browsers.
-moz-opacity was just the mozilla attribute for the same thing while waiting for the css 3.0 specifications to settle.

Oceandragon hat gesagt…

Thanks for your useful info. I'm in the way to find opacity effect.

Design to xHTML slicing service PSD to HTML services