Rounded corners, gradients and box shadows with CSS

Up until about 5 years ago, the internet was stuffed with tutorials on the following three topics:

  • Rounded corners
  • Gradients (one color ‘fading’ into another)
  • Shadows

That was because CSS didn’t really include a straightforward way to do them – but everybody wanted them. Then CSS3 came along, and included straightforward ways to do this. So now everybody’s raving about ‘flat’ design again. Go figure.

That said, rounded corners and gradients are still used a lot, and once you know what they are you’ll start spotting them everywhere. That is because, like the margin and padding we already added to your CSS arsenal, they provide great subtle ways to make your page components more visually pleasing. To just give one example, here’s the product list at the front page of the – rather famous – guys at 37signals:

Screen Shot 2014-01-23 at 11.28.30

For shits and giggles let’s create a non-fugly ‘mini template’ from scratch that uses pretty much every one of the previous lessons, and then spice it up with rounded corners, gradients and drop shadows for a more ‘polished’ look. So flex those finger muscles, close your Facebook, tell your wife to go to bed! Here’s what we’ll build towards:

Screen Shot 2014-01-22 at 23.39.52

Note that this will not look the same in older browsers, especially since we are going to ignore ‘browser-specific’ versions of each of the CSS rules. But keep in mind that there are browser-specific versions of these rules, and just google ‘cross browser gradients’ for example to get copy-pastable versions of the below that work in older browsers.

Starting point

Let’s start with some basic HTML with class names indicating the structure of our site:

<!doctype html>
<html>
 <head>
 <title>My first web page!</title>
 <link rel="stylesheet" type="text/css" href="style_bubbly.css">
 </head>
 <body>
 <!-- actual content comes here -->
 <div class="container">
 <div class="header">Hello World!</div>
 <div class="navigation">
 <a href="http://www.google.com">Some link</a>
 <a href="http://www.google.com">Some link</a>
 <a href="http://www.google.com">Some link</a>
 <a href="http://www.google.com">Some link</a>
 </div>
<div class="contentblock">
 <h3>A header</h3>
 <p>
 This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it!
 </p>
 <p>
 This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it!
 </p>
 </div>
<div class="contentblock">
 <h3>A header</h3>
 This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it!
 </div>
<div class="contentblock rightmost">
 <h3>A header</h3>
 This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it! This is my first web page, thank you for visiting it!
 </div>
<div style="clear:both;"></div>
 </div>
 </body>
</html>

As you see, in the HTML we link to an external style sheet. In the same folder, place the following CSS in a file and name it bubbly_style.css. For starters, and just to see everything works, let’s just define some colors and give everything font Arial:

body {
 font-family:Arial;
}
.container {
 background-color:#eeeeee;
}
.header {
 background-color:#4466aa;
 color:white;
}
.navigation {
 background-color:#777777;
}
.navigation a {
 color:#ffffff;
 text-decoration:none;
 background-color:#555555;
}
.navigation a:hover {
 background-color:#333333;
}
.contentblock {
 background-color:#ffffff;
 border:1px solid #dddddd;
}
.contentblock h3 {
 color:#888888;
}

Remember, no <style> tags for CSS in an external file! If you did everything correctly it should look something like this:

Screen Shot 2014-01-23 at 11.10.40

Positioning the elements

Now we will build the CSS rules for each of the elements that we put in our HTML, targeting their class names.

What follows is a typical exercise in CSS positioning. We will first center the container element using margin-left:auto and margin-right:auto, and add background and some margin and padding, replacing your original .container rule with this:

.container {
 width:1000px;
 padding:20px;
 margin-top:10px;
 margin-left:auto;
 margin-right:auto;
 background-color:#eeeeee;
}

(feel free to add this to your CSS file, save and refresh to see what you get in the browser!)

For the header and nav, we make the font a bit larger, center the text with text-align, and give them some margin and padding:

.header {
 margin-bottom:10px;
 padding:10px;
 height:50px;
 font-size:45px;
 text-align:center;
 background-color:#4466aa;
 color:white;
}
.navigation {
 margin-bottom:20px;
 padding:10px;
 font-family:Arial;
 background-color:#777777; 
 text-align:center;
}
.navigation a {
 color:#ffffff;
 margin-left:5px;
 margin-right:5px;
 text-decoration:none;
 background-color:#555555;
 padding:3px;
}

Things are looking up! We are here:

Screen Shot 2014-01-23 at 11.16.15

The content blocks we float left to line them up next to each other. Then we give them some margin between them, but note that the right one does not need have any margin or it would look ugly. So we set  that margin-right to zero again with a separate class.

Note the math going on: for the 3 blocks to position nicely next to each other and evenly spaced: their widths and the space between them (margin) adds up to the container element width minus its left and right padding. We can literally make that a formula. adding the widths, paddings and margins from left to right:

first block + margin between + second block + margin + third block = container width
(10px + 300px + 10px) + 20px + (10px + 300px + 10px)  + 20px + (10px + 300px + 10px) = 1000px

Try to truly understand and visualise that! It’s a great way to get that box model.

So here’s what we do.

.contentblock {
 float:left;
 margin-right:20px;
 margin-bottom:20px;
 padding:10px;
 width:300px;
 background-color:#ffffff; 
border:1px solid #dddddd;
}
.rightmost {
 margin-right:0;
}

Let’s see if we got all the numbers right:
Screen Shot 2014-01-23 at 11.18.59

Whoops, looks like we didn’t! It’s because we forgot the 1px border, so we should add some pixels to our container to fit them in. Changing the width rule in .container to 1008px instead of 1000px fixes it:

Screen Shot 2014-01-23 at 11.21.31

Starting to look really good! Ok, now we can proceed to the ‘polish’ we added to make it look more modern.

CSS3 rounded corners

Adding rounded corners is really easy, with the border-radius CSS rule. Let’s add rounded corners to ALL blocks, including container and header:

div {
 border-radius:5px;
}

CSS3 Linear gradient

A gradient is one color ‘fading’ into another. A linear gradient is by far the most useful one, and we can add it to the .header rules like this:

background: linear-gradient(#4466aa, #112233);

Note that we kept the ‘flat’ background-color rule in there as well! Browsers that don’t understand the CSS3 will just use that one.

CSS3 drop shadow or ‘box shadow’

Last but not least, let’s add a bit of shadow to each of our content blocks. Note that this is often done with pictures as well. Add this to the .contentbox CSS rules:

box-shadow:5px 5px 5px #999;

You may also remove that 1px border line that was there, and set the .container width back to 1000px. The drop shadow by itself adds enough of a ‘frame’ not to need an explicit border too anymore.

Done!

Aaaaand we’re there! If you did everything well, and I didn’t forget anything in my explanation, we are at the page we wanted to reach:

Screen Shot 2014-01-22 at 23.39.52

Not as hard as you would think, right? Feel free to add real content and pictures to those blocks, make the site consist of multiple pages, so the navigation links make sense (with perhaps a subtitle below the main one to indicate where you are within the site), etc…

If you followed all of this along without too much trouble, and the extra suggestions I just listed didn’t scare you, you are seriously well under way to build good looking web sites. Pat yourself on the back, but make sure not to sprain your shoulder.

Conclusion

First and foremost: all of these have zillions of variations. Extra rules to make it work in other browsers, radial gradients, drop shadows in other directions or used for ’emboss’ effects, etc… For these, seriously and without shame:

Google for what you want.

… Seriously, just google for ‘CSS3 gradients’ or something, copy paste the huge ‘backwards compatible’ css rules they offer you in most code snippets, and then adjust the values in the code snippets to what you are exactly trying to achieve.

Ok, now that we’ve solidly entered into ‘modern’ terrain, let’s dial it up a notch and have a  look at the amazing power of JavaScript and jQuery.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s