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.
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.
-moz-transformcalls and a designated skew, you can do some really impressive image-free effects completely in CSS!
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.
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.
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.
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.
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.
If you’re looking for more inspiration, keep an eye on Neven Mrgan’s HTML5 Watch blog. It’s a great way to find examples of CSS3 and HTML5 in the wild. What are some of your favorite examples of CSS3? Let us know!
& 2010 about Building Business Content Data Digg Facebook Free Friday from Getting Google Google's Guide Interview Keyword Link Links marketing Media More Movie Online Page Review Search SEOmoz SEOs Should Site Social Strategy This Tips Traffic Twitter Update Using Video Ways website Whiteboard World