CSS - Page Shadow Browser Compatibility

The shadow is now only visible in Webkit-based browsers (Safari, Chrome). To enable it on Firefox and its derivatives, as well as on CSS3-compatible browsers, some changes in CSS styles are required.

I am not familiar with Drupal code source management model, so I will post my solution here:

In style.css within the directory of the Sky theme, you should edit #wrapper style definition to look like this:

#wrapper {
  background: #fff;
  font-size: 12px;
  -moz-box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
  box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
}

The two added lines begin with -mox-box-shadow (adding shadow in Mozilla Firefox and similar browsers) and box-shadow (adding shadow in browsers compatible with CSS3).

Regards,
T.

Confirming that it works in Firefox 3.6 and Chrome 5.x.

I also read that you can get it to work in IE8 by using code like this:
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

I haven't had time to test it on IE8 since I'm too lazy to reboot into windows but you're welcome to try it.

@deggertsen:

thanks for the code.

Yes it works!

Thanks! I've committed this, as well as a slew of other CSS3 properties that are now working across browsers.

It will be in the next release.