Case Study into CSS3 Effects on Popular Websites

It doesn’t seem like the many CSS3 standards are so “new” anymore. Web designers have been implementing these properties into most of the new layouts I run into. Rounded corners and text shadows are commonplace for the modern web.

I want to use this article as a small case study into CSS3 effects. I’ll be examining some big-name websites and how they are building unique web interfaces. The techniques are not exclusive to any single entity – and it’s actually simple to put together some code of your own. But it is my hope these examples can spur new ideas in budding developers.

In this scenario I’m actually not talking about their voting badges. Actually I noticed that Digg has setup a new follow/unfollow button which appears next to each username. It’s also on every profile page when you are logged into an account.

The button HTML code is using a simple anchor element with the link. The whole button interface is created using CSS properties. The border radius and background gradient is all hard-coded. We can actually build a similar button using much of the same CSS. Check out the code below:

.bluebtn {display: block;font-family: Arial, Helvetica, sans-serif;font-size: 12px;text-decoration: none;letter-spacing: -0.03em;line-height: 1.25em;overflow: visible;padding: 5px 8px;max-width: 200px;cursor: pointer;outline: 0;font-weight: bold;text-align: center;text-shadow: 0 1px 0 white;color: #6788A6;background: #cfdff1;background: -moz-linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f0f4f8),color-stop(100%,#c6dAf1));background: -webkit-linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);background: -o-linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);background: -ms-linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);background: linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);border: 1px solid #b9cce3;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}.bluebtn:hover {background: #cfdff1;background: -moz-linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f0f4f8),color-stop(100%,#d2e3f6));background: -webkit-linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);background: -o-linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);background: -ms-linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);background: linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);}

This is so simple to implement, yet it builds such a powerful button. This effect should render properly even in the latest version of Internet Explorer and Opera browsers. The fact that we’re using an anchor link instead of the button element gives us more control over the styles.

But theoretically you could use this as your standard link by resetting the display to inline-block. Then all your paragraphs would be littered with blue buttons. With these styles added to your page you can setup a blue link btn just like I have in this code example:

my button

Another favorite website of mine is Dribbble which is full of new CSS3 effects. One that always strikes my interest is the box shadow style you can notice on every shot.

And this isn’t just a scenario with Dribbble. I have noticed this effect on a few other websites as well – blogs and showcase galleries mostly. But I do remember first running into this design on Dribbble a year or two ago.

If we look into the code the whole setup is very basic. The layout actually uses an ordered list to display shot photos and user metadata. But if we want to build a simple white box with a text-shadow effects the CSS3 code is a few lines long – very minimalist.

.box {display: block;padding: 4px 5px;background: white;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);}

The difference between this basic example and Dribbble’s design is the original background color. Setting a white box with a drop shadow onto a blank white webpage will not look as spectacular. Try a few different color schemes faded out into a light grey shade.

I am also a big fan of new startups popping into the tech scene. Pinterest is one such example which has built a cult following of sorts – possibly because of their invite-only system for registration. The layout runs much like Tumblr where users can share and repin photos.

Their buttons are the first thing to catch your eye. Both hover effects and solid-state default designs are incredible. Their gradients and text shadows alone are worthy of your attention. But another page that I love is their custom login form.

The input fields feature a really cool box shadow effect. Whenever you focus onto a field the label text will dim and a new outer box shadow appears. They are using transition properties in CSS3 to make these changes happen. It’s such a unique setup, and truthfully I haven’t seen any other websites doing it like Pinterest.

The old Vimeo web layout was brilliant. But recently their design team has jumped on the task of rearranging the entire layout. This has created another fantastic avenue for web design inspiration.

One piece I’d like to point out is their new green registration button. You will only catch this if you are not logged into an account already, once you visit the home page. The hover effect animates an outer glow and brilliant shiny green gradient. You can see these properties below:

.btngreen {background: #a8cc5e;background: -moz-linear-gradient(top,#a8cc5e 0%,#75a851 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#a8cc5e),color-stop(100%,#75a851));background: -webkit-linear-gradient(top,#a8cc5e 0%,#75a851 100%);background: -o-linear-gradient(top,#a8cc5e 0%,#75a851 100%);background: -ms-linear-gradient(top,#a8cc5e 0%,#75a851 100%);background: linear-gradient(top,#a8cc5e 0%,#75a851 100%);-moz-box-shadow: 0 0 35px #fff;-webkit-box-shadow: 0 0 35px #fff;box-shadow: 0 0 35px #fff;}

But aside from this button there are so many other interesting page elements. Their new UI has really stepped up competition to another level. A particularly interesting design on the page for exploring video archives features their new header navigation and dropdown links. Not to mention the fascinating text styles for paragraphs and headers.

Hopefully these examples can provide evidence of the growing trends in web design. CSS3 has changed the way we build interfaces. Images are slowly dropping out of context, and you can perform much of the same Photoshop-esqe designs right inside your browser.

Surely some CSS developers will love these case studies I’ve included. But there is no way I could touch upon every major website. If you know of similar designs feel free to share with us in the comments below. Or alternatively you can add your own code which developers could play around and build with.

View the original article here