I suppose rgba() would work here. After all, browser support for both box-shadow and rgba() is roughly the same.
/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
div {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
background-color: red;
margin: 10px;
}
div.a {
box-shadow: 10px 10px 10px #000;
}
div.b {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>Videos
I used to hate my box-shadows, before I discovered the magic behind others. A lot of you probably know this from before, but I still feel like sharing.
Instead of using 1 box-shadow, you use 2. The second one with bigger blur and .8 opacity.
Use a soft black for the first one.
X-axis = 0. Y-axis = 5-10px. Blur low, like 10px
Same color on 2nd, but lowered opacity.
X-axis = 0. Y-axis = 10px more than previous. Blur 40-50px.
Code goes something like this:
box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 40px rgba(166,173,201,.2);
Result
I've done graphic design for many years and this applies to anything you want to make a drop shadow for, it requires 4 layers but the effect is flawless in appearance.
Excellent tip for applying this to css.
sorry for picking nits, but you mentioned 0.8 opacity for the second one, and also "lowered opacity" for the second one.
I see 0.05 opacity for the first, and 0.2 for the second. What am I missing?
If you want a dropshadow with a level of opacity, you should use rgba() for its shadow color :
http://css-tricks.com/2151-rgba-browser-support/
edit:
-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
box-shadow:5px 5px 5px rgba(0,0,0,0.3);
While your question is ultimately a little opaque (pun intended), does the following do what you are expecting?
-moz-box-shadow: 5px 5px 5px #dddddd;
-webkit-box-shadow: 5px 5px 5px #dddddd;
box-shadow: 5px 5px 5px #dddddd;
http://jsfiddle.net/zCTC8/2/
All I essentially did was adjust the color value of the shadow, which is the last value in the declaration (#dddddd, or #ddd). These are hex values. See here for more examples:
http://html-color-codes.com/
#ddd/#dddddd represents a light grey color; #eee is lighter, #ccc is darker, #fff is white, and #000 is black. The value #000 represents RGB, with valid values of 0-9A-F (dark->light), so that:
#f00 = red (R)
#0f0 = green (G)
#00f = blue (B)
The value #99CCFF from your question is equivalent to #9CF, which gives a middle red (9), a light green (C), and white (F). The mix of these values gives you the light blue shade you were seeing, which is why you were getting a color instead of a "shadow-like" color (gray shade).
My color theory is a little rusty here, so anyone correct me if I've flubbed something.