Moiré pattern amplified by CSS3 animation

[Click here for the full effect. also hover over the bottom of the scrolling image for speed controls.]

The first time I saw this image, I was scrolling down the page, which is one of the most universal things that anyone anywhere does while browsing a site. I immediately “got” it. I decided to see what would happen with a little bit of CSS3 simple animation applied on a tiled background. And here we are.

SummerIsRad.comLink to the specific post where I got this image from.

Learn about Moiré patterns on Wikipedia

Moiré on Flickr

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+