Lose the Images: How to Get Rounded Corners, Gradients, Drop Shadows and More Using CSS

Posted by Justin

With the widespread adoption of CSS, web designers have been given more style freedom than ever before. What once was done with images and tables can now be accomplished with a few lines of code. This article gives examples on how to accomplish common design elements with the use of very minimal images, if any at all. Use CSS to lose the excess images and keep your page loading fast.

CSS Rounded Corners

CSS Drop Shadows

CSS Gradients

CSS Mouseovers

CSS Quotes for Blockquotes

CSS Graphs and Diagrams

Like this post? Stay up to date by Subscribing to our Full RSS Feeds


Other People Who Read This, Also Read

Post-Plugin Library missing

Reader Comments

  1. jen - September 30th, 2007

    Nice, thanks! I’ve been looking for a CSS-only way to do rounding corners.

  2. AlexJB - October 5th, 2007

    nice ! one complaint tho – the cross-browser gradient using CSS does not use CSS only. it requires a big hunk of javascript code (although it claims to not use JS)

  3. Chris Coyier - October 5th, 2007

    Nice roundup =)

    I have a live example of how to do some CSS blockquotes with a downloadable example available here:

  4. Gunnar Andreassen - October 5th, 2007

    Wow! Cool stuff – thanx!

  5. digi dude - October 8th, 2007

    Good post. A little bit too much links. it will take some time to check them all, but at least one can be sure to find something for oneself. Thanks.

  6. Navdeep - October 15th, 2007

    nice list. thanks

  7. JS - October 24th, 2007

    Awesome list, Thanks :)

  8. WebTenet - December 31st, 2007

    Great collection. Each one is worth checking.

  9. Ralph - August 12th, 2008

    My answer is like the first comment. I want to find a css-way for rounded corner without some pictures.

    Ralph

RSS feed for comments on this post. TrackBack URI

Leave a comment

Your e-mail address will be kept private. HTML is not allowed.