Examples of CSS3 in the Wild

Seeing CSS3 on actual functioning websites is a lot like spotting a Himalayan Snow Leopard or a Giant Panda. Because roughly 53 percent of browsers in use don’t support CSS3 (ahem, IE, ahem), most web designers just don’t use it on a regular basis. At least they don’t use it on sites they design for work. As such, most people don’t see it regularly, and if they do, it’s just a fleeting glimpse.

That’s not to say it’s not out there – again, like with snow leopards and pandas, to see CSS3 in the wild, you need to be stealthy, smart, and patient.

So, with out further ado, here are some examples of CSS3 in the wild. But please – make sure to avoid big, sudden movements. You don’t want to scare it off.

To learn more about CSS3, you should also check out these articles and tutorials:

Over at CSS-Tricks, the box shadow effect is used on pretty much every box on the site, highlighting whichever box you hover your mouse on.

RGBA Colors

How We Did RGBA Colors Before

By calling a PHP script within CSS, thereby tricking the browser into overlaying colors in RGBA format. In no way could this be thought of as a good way of doing things, as it leads to lots of extra code in the PHP file that you’ll never use again.

How We Do RGBA Colors with CSS3

background: rgba(150, 25, 150, 0.5);

Examples of CSS3 RGBA Colors

Check out the awesome translucent gorilla on the IGCP site. Now look slightly to the right. That box around the video player uses RGBA as a way to layer a semi-transparent container on top of the banner behind it.

How We Do Gradients with CSS3

Example of CSS3 Gradients

While this example isn’t the most beautiful or breathtaking example of CSS3, it might be the most practical. By making the blue banner on top fade into a lighter blue by using CSS3 instead of an image, the site isn’t required to serve that image every time. Little things like that make a difference for a heavily-traffic site, and it shows what can be accomplished with CSS3 once it becomes the standard.