Question

If I have a photoshop drop shadow with the following settings

Blend Mode - rgb(0,0,0) / 
Opacity - 25% / 
Angle - 135 degrees /
Distance 4px / 
Spread - 0% / 
Size - 4px

How can I set my CSS3 box shadow so it represents my photoshop design?

Answer 1

This CSS class is for various web browser collected in one rule without transparency (known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+):

.shadow {
    -moz-box-shadow: 4px 4px 4px #000;
    -webkit-box-shadow: 4px 4px 4px #000;
    box-shadow: 4px 4px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

…and this CSS class is with transparency support:

.shadow {
  -webkit-box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  -webkit-transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  transform:rotate(135deg);

}