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

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

• Spiffy Corners
  Rounded corners using ONLY CSS.
  
• Curvy Corners
  Another round corner site using CSS + JavaScript, this one is said to compare to something created in a graphics program.
  
• Even More Rounded Corners With CSS – Schillmania.com
  FLUID rounded corners using CSS (no Javascript) and only 1 image.
• Anti-aliased Nifty Corners
  Use CSS + JavaScript to create anti-aliased rounded corners.

CSS Drop Shadows

• CSS Gradient Shadow – Dynamic Drive CSS Library
  Drop shadows using CSS and JavaScript.
  
• CSS Drop Shadow – WebToolkit
  Drop shadows without images.
• HTML Text Drop Shadows
  Drop shadows for your text, uses CSS and JavaScript.
• All About CSS Drop Shadows
  This one offers a few variations using CSS for drop shadows.
• Drop Shadow Example
  Another CSS + JavaScript version, this one you don’t have to type your text twice.
• Simple CSS Drop Shadows – Saila.com
  Drop shadows for both boxes and text. Uses only CSS.

CSS Gradients

• Cross-Browser Gradient Backgrounds Without Images
  Cross-browser gradients without images.
  

CSS Mouseovers

• CSS+JavaScript Fancy Menu
  Create an amazing menu with CSS + JavaScript.
  
• qTip – CSS Tooltips
  Add tooltips to any link on your site.
  
• Sliding Doors of CSS – A List Apart
  Get instant mouseover changes using only one image at a time. Also see the second part.
• Scrollovers
  “Scrollover” links which scroll rather than just change color. Uses CSS and JavaScript.
• CSS Image Pop-up
  Pop up images on mouseover.
• Pure CSS Popups
  Pop-up content using CSS.
• Create A Block Hover Effect
  Create a block-level mouseover.

CSS Quotes for Blockquotes

• Swooshy Curly Quotes Without Images – 24Ways
  Create stylized quotes without images.
  
• Playing with BLOCKQUOTE and CSS
  Here is an example of how to style BLOCKQUOTES without images. Styling works in IE, but the quotes are missing.
• Quotes Using CSS on Flickr
  Another example of quotes without images.

CSS Graphs and Diagrams

• CSS For Bar Graphs
  CSS bar graphs using very few images.
  
• Displaying Percentages » Bare Naked App
  Display a percentage bar using only two images.
  
• CSS Diagrams
  Create a detailed diagram using no images.
• StyleMap v2: HTML Visual Sitemap
  Create a visual sitemaps using CSS + JavaScript. The site also has a CSS only version.
• CSS: Unordered List Calendar
  Create a calender using unordered lists.