BRAINFART

Do you really understand them? The sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one...

Fahrner Image Replacement (abbreviated FIR) is a Web design technique that uses Cascading Style Sheets to replace text on a Web page with an image containing that text. It is intended to keep the page accessible to users of screen readers, text-only web browsers, or other browsers where support for images or style sheets is either disabled or nonexistent, while allowing the image to differ between styles. FIR is named for Todd Fahrner, one of the persons originally credited with the idea of image replacement...

Here we want to review some ways of replacement of text with pictures.

Often we would desire the headings to be beautiful and we would not want to be limited by a few user fonts (those which everyone has). This is where we can replace this text (to leave it in a code for search crawlers and others user agents) by pictures or flash. So firstly lets replace the following code with a picture...

Very often there are menus with separators. For example:

Main | News | Catalog | Rating

Further we will discuss how to make such menu with minimum correct HTML.

Obvious HTML for similar designs is not numbered list UL, for example such as...