Drop Shadows

From CSS Discuss

Jump to: navigation, search


Box Shadows

Note : Most of these techniques are actually for rounded corners, but most will work for shadows too. Most of them would actually be better off on the Rounded Corners page...

No Extra Markup

These techniques don't require modifying existing (X)HTML, making it easier to add them to existing pages and preserving the integrity and structure of the markup.

  • http://virtuelvis.com/gallery/css/rounded/ - Image based styling of all corners. Requires support for CSS generated content and before: and after: pseudo-elements. (Works in Moz, Opera, Safari 1.1, degrades gracefully in IE.

Nested DIVs and CSS

These techniques require the addition of extra DIV tags to the existing (X)HTML code, thus introducing code which most standards-aware web developers consider to be meaningless and not semantically correct (although most of these examples will validate).

Nested DIVs and inline images

Text Shadows

Other / Uncategorised

http://www.johnp.co.nz/techstuff/roundcorners1.html - (needs to be reviewed) http://mrclay.org/web_design/rounded/ - (needs to be reviewed) http://www.456bereastreet.com/lab/rounded/ - (needs to be reviewed) http://www.sovavsiti.cz/css/corners.html - Uses many nested divs. Example 2 fails in Win IE5 - now fixed in IE5 Can be made with Mozilla CSS proprietary extensions (based on the [CSS3 border module]), or a variety of [hacks]

http://www.clagnut.com/blog/2/ shows how to use Mozilla's extensions for rounded corners. Other pics in the corners

http://www.jimdabell.com/corners/ Any kind of corner with any kind of border (completely resizable)

http://www.andreas-kalt.de/roundedbox/ By this technique (inspired by Douglas Bowmann's [ALA] article [Sliding Doors of CSS]) a div can be styled with any kind of background grafic including rounded corners, dropshadows, irregular borders etc. and will still resize with its content.

Examples not found...

These pages can't be found. The site might be down, the article might have been taken offline, or there might be other problems...

(It would be great if someone could review the various pros and cons of the techniques linked to on this page so people know which one to choose, rather than be overwhelmed at all the different examples -- Zoe Gillenwater )

(I've started sorting categorising these techniques, but I haven't had time to finish yet... -- Caesars Grunt )

Personal tools