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.

New Digg Buttons

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.

Digg follow button for v4 layout

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:

<a href="/" class="bluebtn">my button</a>

Framed CSS3 Photos

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.

Dribbble home page box shadows with css3

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.

Scoping Out Pinterest

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.

Pinterest Register Invite and Login buttons

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.

CSS3 input shadow effect with forms

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.

New Vimeo Design

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.

Alternative CSS3 button effects on Vimeo redesign

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.

Conclusion

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.





About the author:

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Comments:

Scroll back to the top