Useful 23 CSS Image Techniques for designers and developers


CSS image replacement is a technique of replacing a text page element with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text.

Here is the list of  23 Useful 23 CSS Image Techniques for designers and developers . All sites are useful for CSS beginner  and advanced  CSS user to reduce your workload . There is so many CSS Image Techniques We obviously cannot cover all the best from the web, but we have tried to cover as much as possible.

I will appreciate if you can spread the word via Digg, Stumbleupon and other social media websites, Thank you.

  1. Accessible Image Tab Rollovers : Case study of FastCompany navigation redesign by Dan Cederholm.
  2. Adding bullet images to styles : Simple technique of adding a bullet before text.
  3. Another image replacement technique : FIR improved
  4. :BefTer Drop Shadow : Drop shadows using before and after elements
  5. Bullet-Proof Rounded Corners : Rounded corners that work in most browsers.
  6. Clever PNGs : Creating .PNG that show well in IE and Firefox
  7. Creating Custom Borders and Corners : at A List Apart
  8. CSS Rollover Buttons : Button rollover tutorial.
  9. CSS Rollover Background Images – No Preload Required : CSS menus using one background image.
  10. Fahrner Image Replacement : A List Apart articles.
  11. Fast rollovers, no preload needed : CSS rollovers without preloads
  12. Fluid Shadows : Dropshadows that move with the size of the browser.
  13. Graphical Headings : Another image replacement technique
  14. Inman Flash Replacement : Text replacement in Flash
  15. Image Replacement – No Span : another version of FIR
  16. Responsible CSS – Recycle your background images : How to re-use your background images at other places on the site.
  17. Rounding Tab Corners : Tutorial by Eric Meyer
  18. sIFR 1.0 : Hopefully the last image replacement technique you will ever need.
  19. sIFR 2.0: Rich Accessible Typography for the Masses : by Mike Davidson
  20. sIFR 3 Alpha : at NovemberBorn
  21. Sliding Doors of CSS (Part I) : CSS tabs article by Douglas Bowman.
  22. Sliding Doors of CSS, Part II : Follow up article.
  23. The Thrashbox : A Simple, Semantically Correct CSS Box with Clean Code
You might also like

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More