Examples of CSS3 in the Wild

May 20 2010 by Blue Derkin | 31 Comments

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:

Rounded Corners

How We Did Rounded Corners Before

By creating separate images for the corners of a box, or by using JavaScript to mask sharp edges.

How We Do Rounded Corners with CSS3

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Examples of CSS3 Rounded Corners

The rounded corners on these following sites are pretty obvious and fairly simple looking, but as any web designer knows, they weren’t so simple to create without CSS3.

Twitter

Twitter

Ember

Ember

ZURB

ZURB

Text Shadow

How We Did Text Shadow Before

By creating two elements with the same text, giving one of them the shadow color, offsetting it one or two pixels, and placing it behind the main text using the z-index CSS property.

How We Do Text Shadow with CSS3

text-shadow: 2px 2px 4px #000;

Examples of CSS3 Text Shadow

The sites below each use text shadow in a different way.

Jolicloud

Jolicloud uses CSS3 Text Shadow throughout the site.

Jolicloud

A Different Design

A Different Design uses a white text shadow in the site’s name to give the text that cool "embossed" look.

A Different Design

Time2Project

Over at Time2Project, the "who," "what," and "where" menu links use text shadow to highlight themselves when you hover over them – very cool.

Time2Project

Box Shadow

How We Did Box Shadow Before

By creating an image of the box with a shadow or by using a JavaScript plugin.

How We Do Box Shadow with CSS3

box-shadow: 2px 2px 4px black;
-moz-box-shadow: 2px 2px 4px black; 
-webkit-box-shadow: 2px 2px 4px black; 

Examples of CSS3 Box Shadow

Again, with the two sites below, we can see two very different ways of using the same CSS3 technique.

camen design

At camen design, the footer stays in the same place, and box shadow is used to give the illusion of the main content area sliding underneath the footer.

camen design

CSS-Tricks 

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.

CSS-Tricks 

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

International Gorilla Conservation Programme (IGCP)

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.

International Gorilla Conservation Programme

24 ways

24Ways uses the effect throughout the site, but it’s most noticeable on the top, where hovering over the headline banner uses RGBA to increase the opacity.

24 ways

Opacity Level

How We Did Opacity Levels Before

By creating PNGs with transparency, or by using CSS filters for IE.

How We Do Opacity Levels with CSS3

opacity: 0.5;

Examples of CSS3 Opacity Levels

Changing the opacity level with CSS3 is one of the coolest ways to add to the user’s interface experience and also one of the simplest, as it takes very little code.

Bunton

At Bunton, each individual box uses opacity to show the designer’s comments about his portfolio – all that info is there all the time, it’s just got an opacity of 0 before you hover over it.

Bunton

Peaxl

Peaxl uses it even more subtly in the "subscribe" box, making the existing text fade away slowly when you click it.

Peaxl

31Three

31Three uses it on its portfolio examples as well, making each circle light up ever so slightly with your hovering mouse. Nice.

31Three

Gradients

How We Did Gradients Before

Image slice of gradient repeated as a background image.

How We Do Gradients with CSS3

background: -moz-linear-gradient(100% 100% 90deg, #1a1a1a, #808080)
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1a1a1a), to(#808080));

Example of CSS3 Gradients

Philadelphia FIRST

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.

Philadelphia FIRST

@Font-face, Text Shadow, RGBA, Rounded Corner

(aka The Holy Grail of websites that currently use CSS3*)

How We Made Sites Like This Before

We didn’t.

How We Make Them Now

With CSS3. Lots of CSS3.

Examples of CSS3 Sites

The following sites are examples of what one can do with CSS3.

Of course, because CSS3 isn’t implemented in all browsers yet, and implementation of browsers that do use CSS3 can vary, not all of these will render correctly on every browser.

However, it’s an interesting look on what’s soon going to be possible in the world of web design. 

TheFella

TheFella

Mozilla Labs Jetpack

Mozilla Labs Jetpack

Footnote

*@font-face was implemented in IE5 and is part of CSS2, so it was actually modern browsers like Firefox that lagged behind in implementation.

Related Content

About the Author

Blue Derkin is a project and social media lead at InMotion Hosting in Marina del Rey, California. He also writes as Web Hosting Help Guy, InMotion Hosting’s blog dedicated to all things design, development, and web hosting. You can follow him on Twitter @WHHG_InMotion and @BlueDerkin.

31 Comments

Joe Valdez

May 20th, 2010

This is great post, it lets us know who and where CSS3 is being used throughout the web. The opacity use from ’24 Ways’ is excellent and the white shadow from “A Different Design” is great technique to keep in mind.

Brent Jackson

May 20th, 2010

Great post. I must say though, I do not use very much CSS3 as of now, because of Internet Explorer. Although if I show the clients a screenshot on a need-to-know basis I should be fine, but I just feel like CSS3 needs to be more widely supported before I really go crazy with it.

Divyang

May 20th, 2010

I think firefox already supports rounded corners.
I’ve used moz-border and webkit-border myself.

bestfreewebresources

May 20th, 2010

very useful article ;)

esranull

May 20th, 2010

very good post thanks a lot

Blue

May 20th, 2010

Thanks, Joe! Glad you liked the article!

Martin Lachapelle

May 20th, 2010

thanks for does great links and ressources….
and i realy like your comparaison of css3 and wild animals…

last thing it’s realy funny to surf your links in two browser chrome and explorer….DEAM IE sucks so mutch when will they do something about that….

Brent Jackson

May 20th, 2010

@Divyang:
Yes I know. I’m just saying, I’d rather wait to use TOO much CSS3 until it’s supported more.

Kelly Lawrence

May 20th, 2010

I’m using both the @font-face rule and text shadows on my site!

http://www.kellylawrence.ca

David

May 20th, 2010

deviantART has text-shadow and border-radius used all over the place, from what I’ve seen.

http://www.deviantart.com

Evan

May 20th, 2010

Thanks for this article…. Well most of them already out on web but still good for a flashback….

Art Rogue

May 20th, 2010

Excellent examples Blue.

I’m really starting to design my sites heavy with CSS3 accents. If the “browser” doesn’t support it the site will still look fine.

Maybe it’s just who I am, but it almost feels like rewarding those who use good browsers and punishing those who use I.E.

We all need to move forward and worry less about those who use I.E. until Microsoft gets with the program. Then again, we’ve been waiting on I.E. for years. I’m not holding my breath.

Daniel15

May 21st, 2010

Nice article. A small thing though – I don’t think gradients are part of CSS3 at all.

Zoft

May 21st, 2010

nice share.. how to make good looking with any kind of browsers?

Dora

May 21st, 2010

RE: “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.”

Can you tell me what most web designers ARE using?

Tyler Dawson

May 21st, 2010

Thanks for the article, I especially appreciate the examples. The nice thing with most of these techniques is that they typically don’t make or break a website like some browser inconsistencies. On my site, I use some subtle transparency rounded rectangles and the occasional text shadow and those that use non-CSS3 browsers just don’t get the extra visual flair.

Jordan Walker

May 21st, 2010

great article, we all need to start developing our sites with progressive enhancement in mind.

Clarence Johnson

May 21st, 2010

Great post and much appreciated. Thanks!

Simrandeep Singh

May 21st, 2010

Thanks for sharing such a wonderful article. I’m planning to design a wordpress theme purely in CSS3 after reading this article.

enam

May 21st, 2010

Thanks. Great article. Can anybody tell when IE support CSS3?…:(

Rahul Anand

May 22nd, 2010

Wow. Great post. I’m much inspired by CSS3 now. Hadn’t used it widely for lack of support in certain browsers(ahm). But now I’m all into it!

Rakesh Menon

May 22nd, 2010

Nice article. CSS 3 is indeed a very powerful tool in the hands of a skillful web developer but what restricts its usage is the web developer’s nightmare, IE (till version 8). With the release of IE 9 (with support for HTML5 and CSS3) this winter, things will get much better.

David Wheatley

May 25th, 2010

Thanks for posting these examples, it’s great to see some CSS3 examples live on the web. I love using CSS3 in personal projects, it makes shadows, rounded corners and opacity so much simpler than endless div’s.

Do many of you web designers use it on commercial projects?

Golak Jena

June 3rd, 2010

This is really very useful.Very nice………

Dustin Dyer

October 26th, 2010

Everyday that I have to fix something on a website, it’s always something in IE. I wish IE would just die already.

Luca

January 14th, 2011

Would it be possible to apply CSS3 animations to simulate a fade effect? Just for a visual implementation.

Luca

January 14th, 2011

Oops, sorry – the comment was for another article. Wrong tab :P

Atif

January 25th, 2011

Wow very nice tutorial. Is there any software available that make wordpress themes automatically. :)

Atif

January 25th, 2011

Gr8 share : With nice collection of designs thanks mate

JimBob

April 13th, 2011

CSS2 had text shadow already. It isn’t a new thing for CSS3.

Marcus Green

September 22nd, 2011

Thanks for sharing – CSS3 has completely changed how our design team has worked, a lot less work in Photoshop, a lot more in TextEdit!

Leave a Comment

Subscribe to the comments on this article.