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:

Then when we add box-shadow:inset 0 0 10px #000000; to the css it becomes:

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.

Just to show the concept i decided to make a speech bubble with a little pointer out of only html and css3.

Demo

I’ve taken this idea from an episode of from the couch (#170) and turned it into code.

Demo Download the files.

When visiting other websites I quite like to have a peek in the code to see how the developers make the sites look how they look.

One of the things I’ve had trouble with in the past is horizontal navigation menus, more precisely the styling side of things and how the HTML should be for content and the CSS for the presentation.