Ryan Boudreaux highlights some beautiful examples of CSS3 design projects by some individuals who are at the forefront in tinkering with the new code possibilities.
While CSS3 and HTML5 technologies are still fresh for most organizations, there are many trend-setting web developers who are taking the new tools by storm. This post will highlight several examples which utilize the full potential of CSS3 in delivering excellence in design, look, and feel. The first group includes several projects and experiments by individuals tinkering with CSS3. You can also view the examples below in a gallery format here.
10 examples of CSS3 design
CSS3 Analog Clock
by Natalie Downe utilizes examples of CSS3 animation, text-shadow, transform, and keyframes to create a page of gently falling snow flakes. The snow flakes are called by a short script which controls the number of flakes, how fast they fall, and the duration of the snow fall. The animation is best viewed in Google Chrome.
by Girlie Mac embeds a Katakana font with CSS3 keyframes, transform, and animations using webkit prefixes to create this demonstration, again, best viewed in Google Chrome.
Pure CSS Speech Bubbles
by Nicolas Gallagher demonstrates the use of CSS3 backgrounds, linear gradients, border radius, and transform translate to create stunning speech bubbles in a selection of variants.
Embossed Text Effect
by Analog, a company of friends who make websites, uses a subtle 1px CSS3 text-shadow effect for their h2, h3, p, and li text, creating an embossed text effect.
Polaroid's with CSS3
by Zurb is a gallery display using CSS3 transform and rotate to turn images into a set of randomly selected Polaroid pictures.
CSS3 Transitions Gallery
by AlexandtheWeb demonstrates CSS3 transitions, transform, rotate, border radius, and masking to create this stunning example.
CSS3 3D Butterfly
by eletriq demonstrates the use of CSS3 perspective, transform-origin, and transform-style to create a 3D butterfly object in flight. Display is available in Safari only.
3D geometry with 3D CSS3 transforms
by Joe Lambert uses rotateX(deg), rotateY(deg) axis, transitions, and transformVector to create this 3D cube
with rotation controls (displayed in Safari).
CSS3 Time Machine
by Joe Critchley utilizes CSS3 perspective, transform, and translate to create this image slide show similar to Apple's Time Machine interface (displayed in Safari).