Question

I have been trying to build a site with the right and left sides of the main container having a brown shadow.

So far I achieved my goal but not completely, meaning I get shadow on both sides but it is too dark. I want my shadow to be much lighter (something like Bloomingdales.com website).

Here is my css code, any suggestion?

Thanks!

.container {
overflow: hidden;
background: white;
padding: 15px;
-webkit-box-shadow: 4px 2px #492409,  -4px 0 2px #492409;
-moz-box-shadow: 4px 0 2px -6 #492409,  -1px 0 2px #492409;   
box-shadow: 4px 0 2px  #492409,  -4px 0 2px #492409;
}

Answer 1

As @Vlad Saling pointed out, css3 supports a variety of box-shadow options.

This Website has some great information concerning how browsers compute shadows. In particular:

You can specify colours in CSS using the alternate rgba([red], [green], [blue], [alpha]) syntax. RGB values are written in decimal (0-255) and the last attribute is “alpha” (i.e. opacity) a decimal number from 0 (transparent) to 1 (opaque). 0.5 alpha gives you something 50% transparent. So rgba(0, 0, 0, 0.25) gives you a nice faded black shadow that stays dark enough to be noticeable over even dark grey.

To solve your problem, either change the color to a lighter shade of brown, or adjust your box shadow attributes to include an alpha channel by declaring its color using rgba rather than hex:

-webkit-box-shadow: 4px 2px rgba(28, 14, 3, x),  -4px 0 2px rgba(28, 14, 3, x);
-moz-box-shadow: 4px 0 2px -6 rgba(28, 14, 3, x),  -1px 0 2px rgba(28, 14, 3, x);   
box-shadow: 4px 0 2px  rgba(28, 14, 3, x),  -4px 0 2px rgba(28, 14, 3, x);

Should work. Replace x with the degree of alpha transparency (opacity) that you want. For example, .5 for 50% transparency.