http://mashable.com/2010/06/04/awesome-css3-techniques/
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!
3. CSS3 Dropdown Menu
圖片：
Nick La from WebDesignerWall shows off how to make a really great looking CSS3 dropdown menu that really pop off the page. He has instructions for both a gradient-image and completely CSS versions, so depending on your audience, you might be able to do the whole thing, gradient effects and all, completely in CSS.
CSS3 Speech Bubbles
圖片：
Nicolas Gallagher has created some absolutely stellar pure CSS speech bubbles. These things not only look great, they can even be modified to be used as blockquote elements.
If you want to see my favorite implementation, check out Gallagher’s demo page and look at the Twitter example. It seriously beats the pants off of Twitter’s official embed method.
CSS3 Border Radius Hover States
圖片：
At Impressive Webs, Louis Lazaris put together a fantastic tutorial for recreating a really great looking effect he saw on Media Temple’s website. Using CSS3 border radius, he shows how you can create awesome looking hover effects that look really, really sharp.
CSS3 Box Shadow
圖片：
Speaking of CSS3 borders, the gang at Carsonified has put together a really stellar video tutorial showing off some advanced CSS3 box shadow techniques for creating depth in your projects, just using CSS3.
Following the tutorial, you can see how to create that great letterpressed effect in elements of your design.
CSS3 Photo Gallery
圖片：
Apple just launched a new page showing off some of the cool things that HTML5 can do. Because HTML5 and CSS3 are often linked together, there is some overlap in techniques. One of my favorite demos was this Polaroid-style photo gallery/lightbox created using CSS3.
Some of the transitions and 3D effects won’t work on all browsers, but its a really cool example of some of the WebKit specific CSS3 transitions that Chrome(
), Safari() and other WebKit-based browsers can benefit from.