I’ve seen a good few tutorials on the css3 box-shadow but none about the inner shadow attribute of it, so i thought I’d show you here.
Here’s our div with a few basic bits of styling:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Then when we add box-shadow:inset 0 0 10px #000000; to the css it becomes:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Don’t forget that this property is only available on Firefox as far as i know but I’ve included both box-shadow:inset 0 0 10px #000000; and -moz-box-shadow:inset 0 0 10px #000000; in my css to futureproof it for when more browsers support it.
Here is a screen shot for people using other browser’s than Firefox.
For more information on this property visit:
http://www.w3.org/TR/css3-background/#the-box-shadow
Any comments? Just drop them in the box below.
Comments
It’s only Chrome that ignores the rounded corners, see here: http://code.google.com/p/chromium/issues/detail?id=29427
Lovely job, now to find out why webkit ignores rounded corners when that is used..
Really nice!
BTW, I just worked out that the inset shadow must be placed higher up the cascade then another shadow attribute applied to the same element (in FF).
IE I had a text-shadow on the element I was trying to give the inset shadow and it failed. Moving the inset shadow above the text-shadow in the cascade solved the problem.
Weird…
u can use -webkit-box-shadow, and so it will work on Chrome =)
“But what do you do when you want both inner & outer box shadow?”
Chain with a comma
box-shadow: inset 0px 0px 15px #000, 0px 0px 15px #ccc;
Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.
Thanks for the code, any chance this can display on top of images as i want it to add the shadow on a:hover style.
Very nice post.
I’ve noticed a few problems in some browsers where they ignore the rounded corners properties when this is used.
Great post, thanks for sharing!
@Syed: “It doesn’t show up on IE8″ … is that a joke? of course it doesn’t show! IE8 have not implemented it and its far from doing it. Please throw your browser and use a real browser (any other but trident-based).
It doesn’t show up on IE 8, Any reasons?
cool sir…
Very nice, it works on webkit browsers too, like this: -webkit-box-shadow: inset 0 0 10px #000;
But what do you do when you want both inner & outer box shadow?
Hadn’t heard about “inset” either. Surprising – as it adds a whole new dimension to shadowing. Thanks for popping up in Google
Excellent post, I had not even heard about inset! Thanks for sharing!