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:
- Free HTML5 & CSS3 Templates
- 80+ Free Responsive HTML5 CSS3 Website Templates
- iPhone 5 Created with CSS3
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.
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.
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 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.
Tearable Cloth
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.
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.
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.
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.
Logos In Pure CSS
Company logos created in pure CSS. Hover or tap over the icons for a behind-the-scenes reveal.