Home

Resources Home CSS3 and HTML5 Articles

User rating:

Creating a live CSS clock using CSS3 and some JavaScript goodness

This tutorial guides you through building a clock interface using pure CSS, then bringing it to life with JavaScript's requestAnimationFrame method.
http://www.javascriptkit.com/dhtmltutors/css3clock.shtml
User rating:

Animo.js

A CSS library for manipulating CSS3 animations- stack animations, create cross-browser blurring, set callbacks etc with ease. Also comes with many built in CSS3 animation effects.
http://labs.bigroomstudios.com/libraries/animo-js
User rating:

CSS3 Sonar Menu

A cool horizontal list menu that highlights each menu link with a pulsating sonar effect using CSS3 keyframe animation.
http://www.dynamicdrive.com/style/csslibrary/item/css3_sonar_menu/
User rating:

Swinging keyframe animation

This demo shows how to use CSS3 keyframes to create a perpetual, periodically running swinging effect on a HTML element.
http://www.dynamicdrive.com/style/csslibrary/item/swinging_keyframe_animation/
User rating:

Animated UL background effect

This CSS3 example demonstrates animating the min-width property of an element to create a stretching background effect
http://www.dynamicdrive.com/style/csslibrary/item/animated_ul_background_effect/
User rating:

Pure CSS3 Push Down Panel

This is a CSS3 push down panel that when clicked on reveals some content. The entire interface is created using a combination of CSS3 shadows, round borders, and CSS2 generated content.
http://www.dynamicdrive.com/style/csslibrary/item/pure_css3_push_down_panel/
User rating:

Introduction to CSS Media Queries

A nice overview of CSS media queries and how to use it to cater your webpage to various devices and screen dimensions.
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
User rating:

Hakim CSS3 Experiments

A handful of cutting edge CSS3 experiments showcasing what's possible using JavaScript and CSS3 canvas, transitions, transforms etc.
http://hakim.se/experiments
User rating:

CSS3 Shadow Block Menu

This CSS Menu harnesses CSS3's ability to define multiple/ inset shadows on an element to create menu items with bevelled edges and a growing inner glow when the mouse rolls over them.
http://www.dynamicdrive.com/style/csslibrary/item/css3_shadow_block_menu/
User rating:

CSS3 Stop-watch without using any images or script

A analog stop watch created using nothing more than CSS3, specifically, CSS3 keyframe animations.
http://www.splashnology.com/article/stop-watch-on-css3-without-any-pictures-or-scripts/4833/

CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top