-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