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.
- 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.
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 Pong â€“ with scoring
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