The struggle with Drop Shadows

Is it just me or are all the drop shadow techniques out there a bit too kludged? When I found a now discontinued shadow plugin for Jquery I thought we might have something. However it’s gone now and is no longer supporter. Wasn’t too effective either.

Does anyone know of any clean or preferable drop shadow techniques? There’s a number of CSS approaches. Do you have a preference for one?

Here is a good technique that works across all modern web browsers.


.shadow {
  -webkit-box-shadow: 3px 3px 8px #aaa;  
  -moz-box-shadow: 3px 3px 8px #aaa;  
  box-shadow: 3px 3px 8px #aaa;  
}

oh yeah, css3. sigh. I mean, how much of the browser market can actually handle this shadow technique?

Most of web browsers actually. All modern web browsers can handle that.

You’ll only need to consider alternative messier techniques if you want IE to show drop shadows.

If it’s mandetory for IE to show drop shadows, have a look at using the technique from this page for all web browsers

egh, I’ll stick with CSS3. I just realized I only had FF3.0 on my mac laptop and it couldn’t read the shadow technique. So I’m still wondering. My father was also one of those IE6 users until a week ago. I almost wanted to cry.

The one I use looks just as good as a photoshop drop shadow and just uses three extra containers around the element needing the shadow. Or I have a four sided shadow too.

Eric’s a goof and didn’t give you the URL :slight_smile:

http://www.visibilityinherit.com/code/drop-shadow.php

I’ve tried his dropshadow technique and it works wonderfully.

I usually add the filter so I don’t need to bother with images. Because box-shadow isn’t currently supported in any browser I omit that too. Opera has no support for box-shadow or rgba at this stage.


.shadow {
  -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.1);
  [B]box-shadow:2px 2px 4px rgba(0, 0, 0, 0.1);[/B]
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=120, Strength=3);
}

Edit: My Bad.

Apparently Opera now has support for box-shadow among others.

Edit: Second Bad.
The latest version of the rendering engine Presto 2.3 has these features but is not implemented in an Opera release yet.