For designers and developers, CSS has long been a powerful part of the web design process, but with the emergence of CSS3 and the growth of both the spec and the number of browsers that support it, amazing options are being opened up for designers.
It’s now possible to do all sorts of cool things just using CSS — even animation. Although not all of the effects work across browsers (even browsers that have CSS3 support) and some things are more for show and tell than actual use, there is seemingly no shortage of cool things you can do, just with the stylesheet.
Here are seven of our favorite CSS3 techniques that have a real-world use and that you can start experimenting with right now.
1. Awesome CSS3 Buttons
One of the coolest things about CSS3 is that you can create scalable elements, like buttons, without having to create brand new images every time! ZURB highlights how to make some super excellent CSS3 buttons, complete with RGBA for awesome shading.
Also check out ZURB’s Playground which has tons of really cool CSS3 examples and coding techniques.
2. CSS3 Bar Graph
Ben Lister details a bevy of practical CSS3 techniques for web designers, including this awesome image-less 3D bar chart. Using the -webkit-transform or -moz-transform calls and a designated skew, you can do some really impressive image-free effects completely in CSS!