10 Inspiring CSS3 Tutorials and Demos

In this article we will share inspiring and creative CSS3 Tutorials and Demos that you start using it in websites. They will allow the designer/developer to select on much more specific levels of the document, One of the nice things about this module is that many browsers are already starting to support the advanced CSS 3 selectors, so you can start trying them out now.

See also:

Pure CSS3 Lightsaber Checkboxes

Pure CSS3 Star Wars Lightsaber Checkboxes. This is a quick fun little project built to demonstrate the power behind CSS3, and an awesome little checkbox hack (:checked ~ div). Not “too” practical for UI/UX, but overall some cool code.
CSS3 Tutorials and Demos

Hyperspace

This Hyperspace demo looks just like traveling through hyperspace in virtually every sci-fi film out there. It’s a really neat effect, and while not practical, it’s yet another great example of what you can achieve with CSS3.
CSS3 Tutorials and Demos

Make a calculator using Javascript and CSS3

Learn to make a cool looking calculator using Javascript and CSS3. CSS3 box shadows are used to create the 3D effect and transitions are used for the smooth press effect. Basic regex is used for validations and text replacements. For every button(number or operator) pressed, the value is appended to an equation string displayed on the calculator screen which is later used in the JS eval function to generate the output.
CSS3 Tutorials and Demos

CSS3 Pong – with scoring

An exercise in the futile but fun. This is a playable version of Pong complete with working scoring system — built entirely with CSS. Not a line a Javascript to be seen. All game logic is built using hover state and sibling selectors.
CSS3 Tutorials and Demos

Tearable Cloth

CSS3 Tutorials and Demos

Perspective Mobile App Mockups

Make some cool looking perspective mockups for your designs using CSS3 3D transforms. Very basic usage of 3D transforms but impressive visuals achieved. Great for starting 3d stuff if you haven’t yet.
CSS3 Tutorials and Demos

Grid Animation Effects

A small and simple walkthrough showcasing the usage of jQuery .delay(), jQuery easing plugin, and CSS3 transforms to animate some thumbnails in a grid. On clicking the animate button the thumbnails disappear randomly with a ripple effect and quickly storm back in from the left in a cool 3D way.
CSS3 Tutorials and Demos

Animated SVG Icons with Snap.svg

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.
CSS3 Tutorials and Demos

Odometer

Odometer is a Javascript and CSS library for smoothly transitioning numbers. Odometer’s animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers.
CSS3 Tutorials and Demos

Logos In Pure CSS

Company logos created in pure CSS. Hover or tap over the icons for a behind-the-scenes reveal.
CSS3 Tutorials and Demos

0 comments… add one

Leave a Reply