Action executed in 0.000

Colors Based on Time

The colors on my website are now a function of time. The header background color is based on the day of the year representing the seasons and and body background color is based on the hour of the day.

I've had this idea for a very long time and finally i've implemented it. How did i do it you ask? My stylesheet is dynamically generated using PHP.

There's still some work to do. First, the color of text much change along with the background color. Second for the season colors, i need something like white for Winter, green/yellow for Spring, orange/red for Summer, and brown/gray for Autumn. The colors need to fade from one to the next. Third, other parts of the web page need to be included.

Another feature i'd like to add is modifying the colors based on the weather at the time. I've seen this done on Dunstan's Blog.


Lots of Work


This idea with colors based on time is great, but it's gonna take a lot of work to get my site looking the way i want it.

parent post: Colors Based on Time
notify me: yes

In Dynamic Color News


I changed the background color to change more significantly. Noon with by a bright sky blue, while evening will be a dark gray. Also the .post:hover color is always lighter() than the body background-color.

My goal for this feature is to have the background-color become black. The thing holding me back now is the text color is also black. This would mean the site is unreadable at night.

My intended solution is to make the text switch over to a bright color, just as if someone turned on the lights in a dark room.

Also i want this effect for all colors on the site.

parent post: Colors Based on Time
notify me: yes

Post a Comment

* indicates a required field
anonymous (If you want to identify yourself, please sign in first.)
required This field is required.

Max size is 2 MB, aspect ratio 3:4 width:height
required This field is required.
Please include a short description.
required This field is required.

480 characters remaining.
is public

(Use this field if you have to. 3000 characters remaining.)
1 quarter + 100

Trackback URL