CSS3 vs. Photoshop: Rounded Corners and Box Shadows

This post is part of a series called CSS3 vs. Photoshop.
CSS3 vs. Photoshop: Complex Backgrounds
CSS3 vs Photoshop: Opacity and Transparency

This tutorial will demonstrate how to create a nice, simple navigation bar using several combined CSS3 styles. We're aiming for a look and feel that in the past could only be created by combining several images, JavaScript and several divs. Let's get it started…

Note: all the following examples were tested on Mozilla Firefox, Safari and Chrome. If you want to get something similar in IE or any other browser leave a comment and I will be glad to help you.

Before We Get Started

A good looking and well designed navigation bar has been, from the very beginning of the web design, one of the more powerful elements to keep websites organized and well structured. In the past creating a nice design using shadows, gradients, rounded corners and hover effects required a series of tricks that increased the size of our code and the number of images.

For this tutorial we will dig into two very important CSS3 effects; Rounded Corners and Box Shadows, plus we will use the linear gradients previously shown in the CSS3 vs Photoshop - Complex Backgrounds Tutorial.

Step 1: Rounded Corners

Everyone has heard of them, it will be redundant to talk about how to create them, so in the following examples I will focus on the differences of creating a Rounded Corner effect using images and the advantages and disadvantages of using CSS3 instead.

Creating a rounded corner effect is pretty simple in any graphic software, but in Photoshop we have some problems:

Accuracy: Even if you can set the rounded corner radius, Photoshop's built in anti-aliasing engine often adds one or two extra pixels in the graphic. Most of us in the past had to manually reduce pixels of inexact image based rounded corners to create a clean join with, for instance, color backgrounds.

Editing: This is one of the biggest problems of creating a image-based rounded corner. If you create a graphic for a 10px radius corner in Photoshop, and for some reason you need to increase the radius to 20px there is no other way to do it than redrawing the shape, or manually editing all its corners, loosing time and accuracy. Resizing is another huge problem, if you want to stretch or enlarge the shape you must use the Point Selection Tool in Photoshop, because using the Transform Controls may cause undesired distortions in the corner shape. I needn't even mention that slicing the corners takes a bunch of valuable minutes.

Fills and Borders: Creating a gradient fill inside an image based rounded corner box has always been a big task, wuthout even covering borders, surgical precision is required to slice the images involved. You need to create at least 3 images for each box, one for the top corners, another for the bottom corners and the horizontal or vertical gradient and then write the code for it. Another problem with image fill is that often the container has to increase its height or width, obtaining an undesirable effect with the gradient (see screenshot below).

Mix Corner Styles: In Photoshop, creating mixed corner styles takes a while, there are no options to combine corner styles. You must manually reduce/increase radius or combine shapes... and then slice each corner.

Now in CSS3

Using CSS3 to replace the classic image-based rounded corners is a great idea. Here are a couple of pros:

• It reduces the number of images and HTTP requests to the server
• It works on all the modern browsers (except IE 6,7,8) including most of the popular mobile browsers.
• You just need a couple of lines in the CSS file to make them work
• Increasing/decreasing radius, resizing, changing fill and borders take only a few seconds, but in Photoshop take several minutes

Let's see the code to create rounded corners on an HTML element:

View Demo

Some of the coolest effects that you can achieve with Photoshop are through Drop Shadows and Inner Shadows. Using them in the proper way can result in outstanding 3D effects. Of course, using a drop shadow or an inner shadow in the wrong way can quickly become a cheesy effect.

Below you'll find a couple of examples of good practices:

Now in CSS3

CSS3 allows us to create shadows with only a couple of lines of code, the style in charge is "box-shadow".

To create a Photoshop-like Drop Shadow you can use the following syntax:

box-shadow: <xpos> <ypos> <size> <color>;

To create a Photoshop-like Inner Shadow you can use the following syntax:

box-shadow: inset <style> <xpos> <ypos> <size> <color>;

Now here's the code to create several variants of Box Shadows:

View Demo

The fun part of this is trying to get the same result with CSS3 - here we go!

First the HTML mockup (yes I'm using the "nav" tag of HTML5, because it's pretty cool and semantically appropriate - but you can use a div instead)

Step 4: CSS

Now, let's jump to the CSS. First set the positions and height.

Next, the Rounded Corners:

Step 5: Fixing the Bleed

One final note with regard to rounded corners with a fill and a border: they bleed. You'll notice it on the hover state of our navigation buttons:

Fill color bleeding out beyond the borders.

We can address this by using the background-clip property, which determines whether the background of a given element extends into the border. By default (border-box) it does, which gives us this messy bleeding, but we can alter it to padding-box which stops it short of the borders.

Let's add the following css to our button:

..which gives us a far more desirable result when hovered over:

Fill color nicely contained within the boundaries of our element.