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
- Even More Rounded Corners With CSS – Schillmania.com
- Anti-aliased Nifty Corners
CSS Drop Shadows
- CSS Gradient Shadow – Dynamic Drive CSS Library
- CSS Drop Shadow – WebToolkit
Drop shadows without images.
- HTML Text Drop Shadows
- All About CSS Drop Shadows
This one offers a few variations using CSS for drop shadows.
- Drop Shadow Example
- Simple CSS Drop Shadows – Saila.com
Drop shadows for both boxes and text. Uses only CSS.
- Cross-Browser Gradient Backgrounds Without Images
Cross-browser gradients without images.
- 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.
- 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
- CSS: Unordered List Calendar
Create a calender using unordered lists.