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

Contrast

Color is very important on the web and so is accessibility and readability. Using responsive design to make your images display appropriately on your page is a key factor in dealing with the font size displayed on a browser. Have you ever gone to a web page on your smartphone and things were off the page and/or the text was so tiny you couldn't read it? Those are examples of inaccessible pages.

Having high contrast between your text foreground and background is also very important to allow everyone to be able to read your content. The links below include contrast tools and some include other web site accessibility related tools.

It's also been fairly popular to put text on top of a background image. While this has a "wow, you're cool" affect, it also makes text much more difficult to see. You may try to perfectly position the text in just the right place to get enough contrast but it's difficult to take all of the various sizes that a user might see it in (tiny smartphone screens all the way up to multiple feet project displays). For this reason I try to stay away from text on top of images and I recommend that you do the same.

Links to web tools