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
Simple tut’s and useful
Thanks you to sharing
thanks so much.. I need it now..
@venkatesh
Dont think it works for images. Try it on a div.
tnq for giving valuable information for us,
I added this effect to image but it was not working properly.
can get this code ..
Hey, nice but I’m wanting to take it a step farther. I want to know how to control what sides get the inner shadow. I want the drop to really look like it’s coming down from under the parent menu bar with an inner shadow just along the TOP edge only. Is that possible?
Nice post,Thanks to share this., css shadow effect in IE with Example “http://discoverweb.info/css-shadow-for-ie.html”
Is it possible to insert shadow for only 1 side, example the TOP only? And also from TOP and RIGHT?
Really nice article for css inner shadow. Today I learn this., Like “inset” is any other options there.,
Finally this is what I was looking for!
Thank you!
Also, download IE 9 Beta and run it in IE 9 mode. It’s a beautiful site for sore eyes!
Very nice example! I’ll be using it on my site
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!