CSS3 – The vanishing shadow

Do you usually resort to Photoshop to create an image of text or object with a drop shadow, save it as a gif or png (and hope no-one is using IE6)? Or do you layer boxes within background boxes to create a shadow effect? Or even try to create shadows using border outset effects?(Yuck)

CSS3 offers a couple of new tags that add shadows to boxes or text. This is supported in newer browsers so it is a good time to add to your arsenal.

-moz-box-shadow: 5px 5px 5px #888;
box-shadow:5px 5px 5px rgba(0,0,0,0.5);
text-shadow:0 -1px 1px rgba(0,0,0,0.5);
/* horizontal_offset verticle_offset, blur, color */

visit the developer page at mozilla for browser support info.

Cup size   
Select size then click on coffee cup.
This entry was posted in Code, CSS, Snippets. Bookmark the permalink.