Here are 10 impressive demos and tutorials of a new CSS3 feature that you can’t wait to start using it in websites.
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
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.
Logos In Pure CSS
Company logos created in pure CSS. Hover or tap over the icons for a behind-the-scenes reveal.