Cool CSS3 Effects: Shadowed Boxes

Shadows are always cool! We are all used to message boxes showing on our screen that stand out towards you just because there is a shadow behind them. So how do you create something like that on your webpage using CSS? Very simple! Whether you want a message box or use it for something else, creating a shadow behind your <div> or other block element is really easy. Just keep in mind that older browsers are not going to support it and you should probably test it out for those users that are reluctant to upgrade them or perhaps use a mobile phone with a browser that does not support this yet.

All in all, here is how you would put a shadow on an HTML element:

div#my-shadowed-box
{
	-moz-box-shadow: 4px 4px 4px #000000;		/* This applies to FireFox 3.5+ */
	-webkit-box-shadow: 4px 4px 4px #000000;	/* This applies to Safari 3+ and Chrome */
	box-shadow: 4px 4px 4px #000000;			/* This applies to Opera 10.5+, IE9 and Chrome 10+ */
}

You can, of course, experiment with this, but a quick break-down of the values is that you specify the horizontal offset first, then the vertical offset, then the size of the shadow and finally the color. As you probably guessed, negative values would indicate the shadow is towards left or up and positive values would indicate it will be towards right or down. You can achieve some cool effects if you specify 0px as both horizontal and vertical offset and play around with the size of the shadow.

Try it out, you won’t be disappointed!

This entry was posted in CSS, ȹardrinckles and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *