Geek Answers Handbook

Using more than one color for CSS shadow

I am trying to use a dark shadow on three sides of a div and a light “glow” on one side - essentially using two different colors for the shadow of the CSS codes. So far, the best solution that I have come up with is to place the shadow on all sides, but one, and use the second div with the radiance, and the third div to hide the glow on all but one side, with fields and overflow, I'm just wondering can there be a better one (only CSS method) than the one I implement? Any ideas?

Demo here - http://swanflighthaven.com/css-shadow-glow.html

Against a light background, it does not look so beautiful: http://swanflighthaven.com/css-shadow-glow2.html

#main { max-width:870px; min-width:610px; margin:0px auto; position:relative; top:40px; min-height:400px; } #maininside { position:relative; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; overflow:hidden; padding:0px 25px 25px 25px; } #maininner { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; overflow:hidden; box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80); -moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80); -webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80); min-height:385px; padding:0px 15px 15px 15px; background:url(center.png) repeat; } #glow { position:absolute; height:50px; top:0px; box-shadow: 0 -10px 20px -5px #7b272c; -moz-box-shadow: 0 -10px 20px -5px #7b272c; -webkit-box-shadow: 0 -10px 20px -5px #7b272c; display: block; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin-right:25px; margin-left:25px; margin-bottom:25px; } <div id="main"> <div id="glow"> </div> <div id="maininside"> <div id="maininner" ></div> </div> </div>
+7
source share
2 answers

You can simply write some shadows separated by commas:

 { box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80), 0 -10px 20px -5px #7b272c; }

See https://developer.mozilla.org/En/CSS/Box-shadow

+14
source

try the negative spread values ​​in the shadow-css field

Instead of creating a second div with fancy margins and hiding, try playing with a negative spread value. This reduces bleeding on the sides, which you do not want your shadow to appear. Play with an example on my jsfiddle, set the scatter to 0, -10, -5 ... you will quickly get it.

http://jsfiddle.net/CoryDanielson/hSCFw/

the code:

 #glow { /* xy blur spread color */ box-shadow: /* overridden by webkit/moz */ 0px -10px 15px -4px rgba(255,000,000,0.7), /* top - THE RED SHADOW */ 0px 5px 15px 0px rgba(000,000,000,0.7), /* bottom */ 5px 0px 15px 0px rgba(000,000,000,0.7), /* right */ -5px 0px 15px 0px rgba(000,000,000,0.7); /* left */ -webkit-box-shadow: 0px -10px 15px -5px rgba(255,000,000,0.7), /* top - THE RED SHADOW */ 0px 5px 15px 0px rgba(000,000,000,0.7), /* bottom */ 5px 0px 15px 0px rgba(000,000,000,0.7), /* right */ -5px 0px 15px 0px rgba(000,000,000,0.7); /* left */ -moz-box-shadow: 0px -9px 10px -6px rgba(255,000,000,0.9), /* top - THE RED SHADOW */ 0px 5px 10px 0px rgba(000,000,000,0.7), /* bottom */ 5px 0px 10px 0px rgba(000,000,000,0.7), /* right */ -5px 0px 10px 0px rgba(000,000,000,0.7); /* left */ }

I had to play around with properties a bit to make them look the same across browsers. Mozilla / FF was the biggest pain. See how much the values ​​differ ... it's a kind of tedious cat-and-mouse game, throwing away blur with spread ...

  • box-shadow is used in IE.
  • webkit is used in Chrome.
  • moz is used in Firefox.
+3
source

More articles:


All Articles