HTML + CSS Shadow Sample

mathertel -> AJAXEngine -> Visual Effects -> Shadows

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 7: style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)" and in IE8: -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)" that now looks like a CSS attribute and has the -ms- prefix to indicate a microsoft specific extension.

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 4 CSS attributes can be combined together and every browser ignores all the attributes that are unknown:

style="-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=25)';filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);
  -moz-opacity:0.25; opacity: 0.25"

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;
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=25)';filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);
    -moz-opacity:0.25; opacity: 0.25; "> </div>
  <div class="VEContent" style="position: relative; height: 80px;
    background-color: #FFFFDD;"> I am flying above the text and dropping a shadow.</div>
</div>

... and here is how it looks like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mauris tellus, convallis eget, vehicula a, vehicula id, risus. Vestibulum mattis porttitor ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam dignissim. Phasellus eget massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce dapibus suscipit lorem. In at magna eget erat feugiat rutrum. Proin fermentum, arcu id sodales ullamcorper, lorem massa pretium quam, ac semper enim nibh fermentum sapien. Vivamus lacus. Sed malesuada, dolor et blandit cursus, massa velit ullamcorper turpis, non ultricies massa leo quis lectus.

I am flying above the text and dropping a shadow.

This page is part of the http://www.mathertel.de/AJAXEngine/default.aspx project. For updates and discussions see The AJAX Engine blog.