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:
- CSS3 Techniques You Should Know
- Basic CSS3 Techniques That You Should Know
- How to Create Inset Typography with CSS3
- 20 Useful Resources for Learning about CSS3
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.
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 uses CSS3 Text Shadow throughout the site.
A Different Design uses a white text shadow in the site’s name to give the text that cool "embossed" look.
Over at Time2Project, the "who," "what," and "where" menu links use text shadow to highlight themselves when you hover over them – very cool.
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.
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.
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
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.
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.
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.
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.
Peaxl uses it even more subtly in the "subscribe" box, making the existing text fade away slowly when you click it.
31Three uses it on its portfolio examples as well, making each circle light up ever so slightly with your hovering mouse. Nice.
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
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.
@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.
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
- CSS3 Techniques You Should Know
- Basic CSS3 Techniques That You Should Know
- How to Create Inset Typography with CSS3
- Related categories: CSS and Web Development
About the Author
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