Code Playground


daveT ( David Tanner )


13 Code Samples

CSS Spirograph

Pure CSS prismatic spirograph using psuedo-elements and no preprocessor or javascript.


Animated Loading Example

Example of a CSS animated loader, can be used to let people know that content is being loaded.


Animated Circular Rings

Cool animated circular rings, ring colours are random, each time they are loaded they should be different.


Ring Menu

CSS3 Ring Menu by EdoM18. This is just a simple unordered list with five links as the list items. The first link is served as the main trigger of the whole rotating action. The other four links are placed around the main link and are positioned according to the main animation. These links are scaled down to 0 and rotated to -180 degrees and when the main link is hovered, these are scaled up to 1 and rotated to 0 degree which makes it look like the links are behind the main link and they appear while rotating and scaling up.

The rotation animation is made possible by using transitions and by using transform-origin so that these links rotate with origin as the center of the main link. It's a pretty neat and cool technique that won't work in IE as it doesn't support transition property yet.


CSS3 Navigation Menu

CSS3 navigation menu inspired by


CSS3 Snow

This experiment is from There are three background images given to body that are separated by a comma and are tileable so repetition is not a problem here. These images are initially given a 0px 0px background position and then animated using the animation and keyframes properties.

The animation is done on the background position of these snow images and to create the parallax effect, different values of the background position are given to the different images. (i.e., the top layer is given high value so that it moves faster than others). The animation looping is set to infinite so it never stops. It works great in all major browsers except Internet Explorer as it doesn't support animation yet.