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
Read the full article and download the source files at read more.
How does it work
- Define your styles in CSSTimeSwitch.css
- I have used the css gradients to change to background color
- Have fun
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