Some HTML/CSS/Javascript techniques

Some little web design things I’ve been working on, to learn the ropes so to speak. #webnerd

CSS Color Scheme Changer

This little demo shows how easy it is to apply a new CSS stylesheet without reloading the page. Several stylesheets are loaded with the page, but only one is the default and actually used initially. The others have their rel attribute set as such as “alternate stylesheet” and are given a title, which allows the Javascript to grab it later. Setting a simple “onclick()” for each theme link at the bottom initiates the swap. JQuery is used to fade in and out the elements on the page for a smoother transition. For more info and to try the demo, click the image:

CSS Color Theme Changer Demo

Dynamic Background Colors

By creating an event handler for the onmousemove event, we can easily style the background color of each div column based on the cursor’s coordinates. For more info and to try the demo, click the image:

Dynamic Background Colors Demo

Full-page backgrounds images

With a little CSS3, we can have background images that fill the entire screen as well as scale proportionately when the user resizes their browser window. For more info and to try the demo, click the image:

Full-page background images Demo

Some really good web design resources:

http://css-tricks.com/
working-with-rgba-colour
NetTuts+