/CSS/ Create time-sensitive sites
16/11/2009 | Filed under Develop > CSS
Stuart Loxton, web developer at design agency Strawberrysoup, explains how to create subtle CSS changes to your site based on time of day
In today’s web design environment it takes more and more to attract visitors visually, and even more to make them keep coming back. Of course, this mostly depends on content, but small, subtle details can make any visitor become excited. In this tutorial you’ll create a site that changes its background based on the time a person visits it. Afterwards, you should have the knowledge needed to adapt the script to any other data you want to use.
All server-side examples in this tutorial will be based on PHP, so make sure you have a working test environment with PHP5 enabled. If you’re using any other server-side scripting tool it’s likely there’ll be a guide to accomplish a similar effect online. However, reading through this guide you’ll probably recognise similar syntax and functions, enabling you to convert it to the language you’re using.
The support download contains a folder, tut_css, that contains all of the base files needed to complete this project. Move the folder into your testing server’s root directory. Open it in your preferred IDE and then view index.php in a browser. If you’ve got PHP enabled and everything was copied successfully then you should see a basic white page with a header, navigation on the left and lipsum on the right. It’s now time to start the dynamic styles.
About the author:
Name: Stuart Loxton
Site: Strawberrysoup
Areas of expertise: Standards-compliant web design, application development and eCommerce
Clients: Clients Mike and Ike, BUPA, West Sussex County Council
Who would play you in a movie? Mike Myers
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Anna Green / 18/11/2009 / 17:17 / http://www.crearedesign.co.uk
This is an ace tutorial! I love the idea of a site that can change deepening on the time of day. Could this be applied to longer spans of time so seasonally? There would be plenty of business interested in that.
Ben Wheeler / 20/11/2009 / 21:57 / http://www.beachsoftware.co.uk
Have to agree an excellent element to add to website design - i know of a client that will snap that up! Thanks.
Neil Dennis / 21/11/2009 / 17:33 / http://www.strawberrysoup.co.uk
@anna - glad you like the article and yes you could certainly tweak the code to spring, summer, autumn and winter for styles/colour schemes if you fancy!
Simon / 23/11/2009 / 13:01 / http://www.berrypoint.co.uk
Thanks, that's a really nice idea!
Muthukkumaran / 27/11/2009 / 13:43 / http://www.txtimpact.com
Great article. I needed a refresher and there you are. great idea.
Knut / 27/11/2009 / 17:18
Fine for a local site, but a bit pointless (if not downright confusing) for anything with an even vaguely global audience. It might be morning where your server is, but it isn't in Oz, or the US, or China, or Russia...
Martyn Web / 01/12/2009 / 14:10 / http://www.webdesign-gm.co.uk
Brilliant Tut, I know this has been possible but its nice to see it so clearly explained. Cheers
Sascha / 02/01/2010 / 10:52 / http://www.hobby-heimwerker.de
I've been looking for a good tutorial on this, excellent job!
Moris / 25/01/2010 / 08:07 / http://www.ersatzteil-tip.com/hailo-ersatzteile/
Very good tutorial, thanks a lot for developing it.
