What does this thing do?

6 times a day, the body will change to a different class name. In the css file CSSTimeSwitch.css will be defined what has to change.

- after 01:00 => class .night
- after 07:00 => class .morning
- after 11:00 => class .noon
- after 13:00 => class .afternoon
- after 17:00 => class .late-afternoon
- after 20:00 => class .evening

The class names are changed with a javascript, if javascript is disabled the general style will be used.

Read the full article and download the source files at read more.

How does it work

- Insert the javascript and css in your html page
- Define your styles in CSSTimeSwitch.css
- I have used the css gradients to change to background color
- Have fun

The result

By changing some css classes, your site will look different 6 times a day. You can make a sun going up in the morning, and disappearing in the evening. I my case, the background, H1 and a little clock are changing. I have based my idea on this website, but they change the stylesheets link, unlike me, I change the body ID.

I have tested it in:
- Firefox (mac en pc)
- IE 6
- IE 7
- Safari

View the result (change your clock to view the other styles)
Download the source files