From CSS Discuss
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.
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
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.
DIVs and inline images
- http://kalsey.com/2003/07/rounded_corners_in_css/ - Three
IMGs. Rounded corners (non-transparent - can only be used on solid background).
- http://www.albin.net/CSS/roundedCorners/ - Four
IMGs. Complex. Rounded corners.
- 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 )