CSS site style testing

Use the links below to re-style this entire web site to see how you can change the looks of a website with CSS while leaving the content in tact.


Purple Style
gzuslivz
Rolling Navigation Menu
Ugly with Motion

Images

This web page that has completely accessible images

Show Image (Microphone) A microphone

Snare Drum

Hover over this text to show an image

Snare Drum

More text here

This is a similar show/hide option but is currently only being used for text
/* grab everything in the style tags if you want to do text on an image */

I'm generally against putting text on an image but if you really, really, really, really, really, really, really, really, really, really, really, really, really, really, really want to do it, here's your example, really. Make sure you use the drop shadow to make the text more legible. Also note, that in my example, even though the text on the image meets accessibility standards, it's still difficult to read. That's why I don't like putting text on top of an image.

One advantage of putting text on an image this way (instead of making it part of the image) is that you can search for the text. For example, search for "Centered" and you'll see it highlighted. If the text was part of the image, that wouldn't work. But still, don't do it if you can avoid it.

a background image
Bottom Left
Top Left
Top Right
Bottom Right
Centered