-webkit-box-shadow (in Webkit nightly) and -moz-box-shadow support inner shadows with the inset keyword. Both also support multiple shadow declarations separated by commas.
Want to achieve the box pictured above?
div.box {
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #fff;
padding: 6px;
width: 200px;
background: #fff;
}
10 Comments
You’re forgetting to also include the
box-shadowandborder-radiusproperties in your CSS.I used to do that. But then I thought, what’s the very reason Webkit and Mozilla prefix these properties when implementing them? Either that they do not conform to the standard, or the standard is incomplete / subject to change. And it seems to be the case for box-shadow (http://www.w3.org/TR/css3-background/#the-box-shadow), so I don’t think I’d encourage people to add it.
Only because its also impressive.. a sweet inner shadow demo:
http://pornel.net/inset.html
I’ll use this effect in my first css theme. It will make my box cooler.
Glad to hear that
Cool Tricks! Going to use it ;)
Awesome trick
this is great! lovely stuff addicted to your blog