Drop Shadows

From CSS Discuss

Contents 1 Box Shadows 1.1 No Extra Markup 1.2 Nested DIVs and CSS 1.3 Nested DIVs and inline images 2 Text Shadows 3 Other / Uncategorised 4 Examples not found...

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).

• http://www.1976design.com/blog/archive/2003/11/14/shadows/ - One DIV. Image-based shadows on two edges only.
• http://alistapart.com/articles/cssdropshadows/ - One DIV. Pretty much the same as Dunstan's method (1976design) above.
• http://wubbleyew.com/tests/dropshadows.htm - Based on the ALA article above, but with less code
• http://alistapart.com/articles/cssdrop2/ - Two DIVs. Similar to the above ALA article by the same author, but softer corners.
• http://nontroppo.org/test/shadow.html - Two DIVs (?). Image-based shadows on two edges only.
• http://www.saila.com/usage/shadow/ - Two DIVs. Hard, opaque shadows on two edges only.
• http://www.alsacreations.com/articles/cadre/ - [fr] - Two DIVs. Rounded corners.
• http://phoenity.com/newtedge/drop_shadow/ - Three DIVs. Various methods for shadows on two edges only.
• http://www.modxcms.com/simple-rounded-corner-css-boxes.html - Three DIVs. Clean solution using one large background image on multiple elements.
• http://www.alistapart.com/articles/customcorners/ - Three DIVs, an H2 and a P. Rounded corners.
• http://www.svay.com/coins_arrondis/rounded_corners.html - Four DIVs. Image-based styling on all four sides.
• http://www.andreas-kalt.de/roundedbox/ - Five DIVs. Image-based styling on all sides.
• http://www.redmelon.net/tstme/4corners/ - Six DIVs. Rounded corners.
• http://www.mikezilla.com/exp0029.html - Ten DIVs. CSS-based styling on two sides. Only works in Gecko-based browsers. No instructions.

Nested DIVs and inline images

• http://kalsey.com/2003/07/rounded_corners_in_css/ - Three DIVs, two IMGs. Rounded corners (non-transparent - can only be used on solid background).
• http://www.albin.net/CSS/roundedCorners/ - Four DIVs, four IMGs. Complex. Rounded corners.

Text Shadows

• http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows/ - A cross browser text shadow technique which creates the best text shadows that each web browser can provide
• http://tutorials.alsacreations.com/ombre/ - Two text shadow techniques

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...

• http://www.webscriptexpert.com/css-dropshadow.html - This link just redirects to their hompage
• http://www.codestyle.org/ - While this site uses rounded on their sidebar I couldn't locate any tutorial or example page for it.
• http://www.v2studio.com/k/lab/corners/ - Site offline for rebuild

(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 )