Today we’re going to grab some PSD pricing tables from Design Curate and try to convert them to pure CSS so you can easily drop them into your site.

It’ll be a super basic but fun exercise in bringing a static design to the web and you’ll learn plenty of fun stuff along the way such as how to style hr tags a create a superscript effect.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Original Design

The design of our pricing tables is super minimal. They’re basically just a rounded corner rectangle with some text and buttons. Download the original PSD here for a closer look (we’re scrapping the Best Value banner).

As you can see, the primary task here will merely be shuffling elements into place. The top bar may seem like it’ll be tricky, but in reality it’s a cinch. More interesting from my perspective is how to style that thin dividing line and pulling off a superscript in the text.

Also of interest is the fact that the center pricing table is a little larger than the others and overlaps them. This could mean styling two unique versions of the table, but we’ll use a nice little trick that takes all the effort out of this. Let’s jump in and get started.

Basic Shape

To begin, we’ll focus on creating one pricing table. Once we have that one built, we can expand it into three fairly easily. Our first step is to create the basic shape of a single table: a vertical rectangle with rounded corners.

We’ll start with a div that will hold all the code for one pricing table. Assign the class of “pricingtable” so that we can easily reuse this element again later.

<div class="pricingtable">
</div>

Now let’s add some style. Our pricing tables will be white so I set a gray background color to help them stand out. Then I applied some sizing to our class, rounded the corners and added a shadow.

* {margin: 0; padding: 0;}
body {background: #ededed;}
 
.pricingtable {
  width: 250px; height: 450px;
  background: #fff;
  margin: 50px;
 
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

Progress Update

This step should give you a simple white box. Make sure that your dimensions are correct and that your shadow and rounded corners are functioning properly.

Top Bar

Now that we’ve got our basic shape in place, we’ll start at the top and work our way down. The first thing that we need is obviously that colored bar at the top that holds the name for each of our pricing plans: Basic, Pro and Premium. To pull this off, create another div with the class of “top”. Don’t worry, we’re not going div crazy, this will be the last one that we need for our base pricing table template.

Inside the div, place an h2 (we’ll use the h1 later) with the name of the pricing table. We could simply use this h2 without the div to create the top bar, but structuring it this way makes it easier to add a sub tag or other content here later.

<div class="pricingtable">
  <div class="top">
    <h2>Basic</h2>
  </div>
</div>

Turning that div into our top bar is pretty simple. To start, we give it a width of 250px, a height of 50px and sample the PSD to get a background color of #2F2E35. Then we apply the same border-radius that we used before (10px), only this time we apply it to only the top two corners, leaving the bottom corners square.

Next it’s time to target the h2 and give it some styling. I simply changed the color to white, aligned the text to the center and used some fancy font shorthand to set the weight, size, line-height and font-family for our headline.

.top {
  width: 250px; height: 50px;
  background: #2F2E35;
  -webkit-border-radius: 10px 10px 0 0;
     -moz-border-radius: 10px 10px 0 0;
          border-radius: 10px 10px 0 0;
}
 
.top h2 {
  color: #fff;
  text-align: center;
  font: 300 30px/50px Helvetica, Verdana, sans-serif;
}

Progress Update

Our plain white box is already starting to look like the pricing table we’re going for. Now we just fill in the center contents and we’ll be ready to go.

Features

Moving down the table, next we find a list of features. Right away that sentence should give you a hint as to how we can mark this section up: with a list. The order isn’t anything specific here so we’ll use an unordered list.

Notice that in our original design, the first word of each feature is bolded. We’ll toss in some strong tags to help us pull this off in our design.

<div class="pricingtable">
 
  <div class="top">
    <h2>Basic</h2>
  </div>
 
  <ul>
    <li><strong>Full</strong> Email Support</li>
    <li><strong>25GB</strong> of Storage</li>
    <li><strong>5</strong> Domains</li>
    <li><strong>10</strong> Email Addresses</li>
  </ul>
 
</div>

Styling up this list is quite easy. To start, we want to ditch the bullet points, so set the list-style-type to “none”. After that, I use the same font shorthand as above but this time with a different size and line-height.

Notice that the line-height is set without a unit of measure (2, not 2px). This is a simple multiplier that takes the font-size into account (18px * 2 = 36px line-height). You can read more about this technique here.

To finish off this block of styles, target those strong tags and be sure that they’re set to bold.

.pricingtable ul {
  list-style-type: none;
  font: 300 18px/2 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 45px;
}
 
.pricingtable ul strong {
  font-weight: bold;
}

Progress Update

Our feature list is looking perfect! Those bolder styles really help you focus on the important pieces of information.

Dividing Line

In the original design, there’s a subtle line that separates the feature list from the price. This can be accomplished with a simple horizontal rule tag:

<div class="pricingtable">
 
  <div class="top">
    <h2>Basic</h2>
  </div>
 
  <ul>
    <li><strong>Full</strong> Email Support</li>
    <li><strong>25GB</strong> of Storage</li>
    <li><strong>5</strong> Domains</li>
    <li><strong>10</strong> Email Addresses</li>
  </ul>
 
  <hr />
 
</div>

The default styling for the horizontal line is close to what we want, but not quite there. For instance, notice that it stretches all the way across the pricing table. We actually want it narrower and centered.

Styling an hr can be tricky and frustrating if you don’t know what you’re doing. You’d think that all we would have to do is set the width and color and we’d be good to go, but that’s not the case.

By default, certain browsers apply some weird styles that you have to clear. To be sure we get the look we want, we have to clear the borders, declare both a height and width, and set a background color. Then we center it using basic math: if our table is 250px wide and our line is 190px, that leaves 60px of width left. Using margins, we cut that value in half and assign thirty pixels of space to the left side of the line.

.pricingtable hr {
  border: 0;
  background-color: #BCBEC0;
  color: #BCBEC0;
  height: 1px;
  width: 190px;
  margin: 20px 0 0 30px;
}

Progress Update

With that bit of styling, our little line is looking exactly like we want it to. Feel free to experiment with your hr to see what sort of fancy styles you can make. CSS-Tricks has some great examples for inspiration.

Price

Next up is the price tag. This comes in two parts, the big price and the small text underneath that says “per month.” The tricky part is that, in the original design, the dollar sign is superscript.

I wanted to be semantic about this so I went ahead and used the “sup” tag. Some sources seem to think that this is a deprecated tag, but as far as I can tell, that’s not the case. Both sub and sup appear to be valid in HTML5 and have plenty of browser support across the board. I’m open to opposing arguments here, so let me know in the comments if you disagree.

Another potential point for a huge semantic argument here is my use of h1. Some would no doubt reserve h1 for the plan title at the top, but the price point here seemed to be the most important piece of information (importance trumps order), so I thought it was best to utilize it here. Once again, feel free to disagree and go your own way.

<div class="pricingtable">
 
  <div class="top">
    <h2>Basic</h2>
  </div>
 
  <ul>
    <li><strong>Full</strong> Email Support</li>
    <li><strong>25GB</strong> of Storage</li>
    <li><strong>5</strong> Domains</li>
    <li><strong>10</strong> Email Addresses</li>
  </ul>
 
  <hr />
 
  <h1><sup>$</sup>25</h1>
  <p>per month</p>
 
</div>

Now for our CSS we have three different things to target: the h1, the h1 sup and the paragraph. There’s nothing fancy here, just some more font-sizing and a little bit of margins to scoot things into place. Notice that all we need to do for the sup tag is reduce the font size.

.pricingtable h1 {
  text-align: center;
  font: bold 88px/1 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 0;
}
 
.pricingtable h1 sup {
  font-size: 45px;
}
 
.pricingtable p {
  text-align: center;
  font: 500 14px/1 Helvetica, Verdana, sans-serif;
  color: #BCBEC0;
}

Progress Update

Our pricing table is nearly complete! Thus far we’ve conquered the four most difficult pieces of the puzzle, all that’s left is to create a button at the bottom.

The Button

To finish off our pricing table, let’s put a sign up button at the bottom. To accomplish this, just throw an anchor tag into your HTML. This will finish up our reusable pricingtable div.

<div class="pricingtable">
 
  <div class="top">
    <h2>Basic</h2>
  </div>
 
  <ul>
    <li><strong>Full</strong> Email Support</li>
    <li><strong>25GB</strong> of Storage</li>
    <li><strong>5</strong> Domains</li>
    <li><strong>10</strong> Email Addresses</li>
  </ul>
 
  <hr />
 
  <h1><sup>$</sup>25</h1>
  <p>per month</p>
 
  <a href="#">Sign Up</a>
 
</div>

To turn this simple text link into a button, set the display to block and define a width and height. Also be sure to fix the default link styling by setting the color and text-decoration. I transformed the text into uppercase as well to match the original design. Finally, apply the same border-radius as before.

To finish off the button, you can use a solid color to keep things simple, but I opted for a basic gradient that gets lighter when you hover over it. It’s a big, scary chunk of CSS but don’t worry, it’s all fairly basic. Use a free tool like this one to save you some trouble if you’re creating your own gradient.

.pricingtable a {
  display: block;
  height: 40px;
  width: 150px;
  color: #fff;
  margin: 25px 0 0 50px;
 
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font: 500 16px/40px Helvetica, Verdana, sans-serif;
 
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
 
  /*Gradient*/
  background: #9dcc55; /* Old browsers */
  background: -moz-linear-gradient(top,  #9dcc55 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dcc55), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcc55', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
}
 
.pricingtable a:hover {
  background: #b2e560; /* Old browsers */
  background: -moz-linear-gradient(top,  #b2e560 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e560), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e560', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
 
}

Progress Update

With that, our first pricing table is complete! If we wanted to go further, we could grab a slab serif web font to make it look just like the PSD, but I like the Helvetica just fine here. Now we have to take this one item and turn it into three!

Making Three Tables

To expand this into three unique tables, copy and paste the HTML that you just created so that you have three pricingtable divs and place them all inside of a container div. Then customize the text on each so that the features and price point are correct. Finally, add a “featured” class to the second table. We’ll us this to pull off the enlarged effect.

<div id="container">
    <div class="pricingtable">
      <div class="top">
        <h2>Basic</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>25GB</strong> of Storage</li>
        <li><strong>5</strong> Domains</li>
        <li><strong>10</strong> Email Addresses</li>
      </ul>
 
      <hr />
 
      <h1><sup>$</sup>25</h1>
      <p>per month</p>
 
      <a href="#">Sign Up</a>
</div>
 
    <div class="pricingtable featured">
      <div class="top">
        <h2>Pro</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>50GB</strong> of Storage</li>
        <li><strong>10</strong> Domains</li>
        <li><strong>20</strong> Email Addresses</li>
      </ul>
 
      <hr />
 
      <h1><sup>$</sup>49</h1>
      <p>per month</p>
 
      <a href="#">Sign Up</a>
    </div>
 
    <div class="pricingtable">
      <div class="top">
        <h2>Premium</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>Unlimited</strong> Storage</li>
        <li><strong>Unlimited</strong> Domains</li>
        <li><strong>50</strong> Email Addresses</li>
      </ul>
 
      <hr />
 
      <h1><sup>$</sup>79</h1>
      <p>per month</p>
 
      <a href="#">Sign Up</a>
    </div>
 
</div>

To make the pricing tables appear next to each other, go back to your pricingtable class and float it left. Also apply a width of 780px to your container and center it on the page with auto left and right margins.

#container {
	width: 780px;
	margin: 100px auto;
}
 
.pricingtable {
  width: 250px; height: 450px;
  background: white;
  margin: 5px;
  float: left;
 
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

Now we have three pricing tables in a row, which is exactly what we want. However, remember that the center one should be larger than the other two, this is not yet the case.

Instead of manually going through and adjusting each little set of dimensions throughout the center pricing table, we can target the unique class that we gave it and apply a CSS transformation to enlarge it. Since all of our content is pure code (no images), the scaled up version should look just fine.

.featured {
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}

All Finished!

With that, our CSS pricing tables are complete. The last transformation gave us exactly the effect that we wanted with the center table larger and floating over the other two. Check out the live demo versions below.

Demo: Click here to launch demo
Code: See and tweak the source code at Dabblet

Conclusion

I hope you enjoyed building these pricing tables and will get some good use out of them. Use them however you wish and be sure to download the PSD and vector versions from Design Curate.

Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site.

Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS. Let’s get started!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Concept

Before we start coding, it’s always helpful to lay out the rough concept of what you want to achieve so you can wrap your brain around what’s going to be involved. The item we’re building today is a vertical navigation menu that’s in a sort of modified accordion format (get a sneak peek of the finished product here).

As you can see, the sections on the bottom are closed by default and slide open when you over over them. However, to add some nice variation we’ll also include a section that stays open all of the time. In the main section that is always open we’ll include a brief welcome message and in the sections that slide open will be sub-sections of navigation links.

Now that we have a good idea of where we’re going, let’s start outlining the structure in our HTML.

The HTML

The first thing we’re going to do is toss in some nice HTML5 to wrap the menu in. The new nav element provides a beautifully semantic container for our menu.

<nav>
  <!-- all nav code here -->
</nav>

Now let’s think about how our menu is going to be structured. We’re not simply going to have a list of links, each bar represents a link with an additional area below it. We’ll wrap these up in a div. Then within each div we’ll need a main link (the colored bar) and a list of sub-links (the white area). Assuming that this item will be thrown into a site that already has some default styling, let’s arbitrarily settle on h4 for the main link and a simple unordered list for the rest.

<nav>
  <div class="menu-item">
    <h4><a href="#">Portfolio</a></h4> <!-- colored bar -->
    <ul> <!-- expanding white area -->
      <li><a href="#">Web</a></li>
      <li><a href="#">Print</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </div>
</nav>

We can copy, paste and modify this section of code to make up the various pieces of our navigation menu. Here we have a Portfolio, About, and Contact section, each with three sub-links. Each section is given the same class (menu-item) so we can style them in one go.

<nav> 
    <div class="menu-item">
      <h4><a href="#">Portfolio</a></h4>
      <ul>
        <li><a href="#">Web</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
      </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">About</a></h4>
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Meet The Owners</a></li>
        <li><a href="#">Awards</a></li>
      </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">Contact</a></h4>
      <ul>
        <li><a href="#">Phone</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
</nav>

I wanted to focus on those areas first because they’re all the same, but remember that the top section is actually different, both in functionality and content. Instead of holding an unordered list, it will hold a paragraph. We’ll also add in a unique class to make it that much easier to target in our CSS.

<nav>
    <div class="menu-item alpha">
      <h4><a href="#">Home</a></h4>
      <p>Lorem ipsum dolor sit...</p>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">Portfolio</a></h4>
      <ul>
        <li><a href="#">Web</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
      </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">About</a></h4>
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Meet The Owners</a></li>
        <li><a href="#">Awards</a></li>
      </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">Contact</a></h4>
      <ul>
        <li><a href="#">Phone</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
</nav>

With that, we’re already finished with the HTML. Though it’s not styled at all, the live preview perfectly showcases the hierarchy of our navigation menu. Here you can clearly see our menu beginning to take form.

Base Styles

To start off our menu styling, we need to establish a few basics. First, we’ll clear the default margins and padding. We’ll be squishing the divs right up next to each other so any default browser spacing will ruin the layout.

Next, we’ll apply a simple color to the background so the white portions of our menu will stand out. Then we’ll toss in some basic font styles and add a slight shadow to the menu. Note that the margin set in the nav block centers the menu on the page, this is for display purposes only and should be removed when you want to nudge the menu into place.

Finally, we’ll add some dimensions and background color to the nav and menu-item selectors. Here’s the resulting code:

* {
  margin: 0px;
  padding: 0px;
}
 
body {
  background: #e5e5e7;
}
 
nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.5;
  margin: 50px auto; /*for display only*/
  width: 200px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
 
.menu-item {
  background: #fff;
  width: 200px; 
}

A this point, the preview is looking like we’ve done more harm than good, but fear not, it’ll start looking spiffy in no time.

Header Styles

Now it’s time to style our h4 tags and turn them into the horizontal bars that we saw in our mockup. To do this, we just need a little padding and a background color. While we’re here we can begin to style the typography as well. We’re inheriting the font-family we set up before so we don’t need to re-type that. Instead we just need to set a size and weight.

/*Menu Header Styles*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #a90329;
}

As you can see in the image below, our link styles are still overriding some of the type styles we set here so we’ll need to go in and fix those next.

Header Links

Obviously, the blue link is no good so we need to change that to white. We also want to ditch any text decoration (the underline). Now, we could stop here but the default behavior would be that only the text is clickable and not the whole bar, which is not ideal. To make the entire bar a link, we set the display property to block and the width to the full menu size (200px).

.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 200px;
}

Now our colored bar is looking much better. Here’s the preview:

Making It Pretty

If you want to stick with something simple, you can skip this step, but I’m going to trudge on and add a few more visual tweaks. Go back and modify that header style block to include a gradient and some very subtle borders. You likely won’t even be able to spot the borders until the menu is closed, but combined with the gradients they’ll really help differentiate each section so they don’t all look like one big block.

/*Menu Header Styles*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
 
  /*Gradient*/
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

Hover Styles

Next we’re going to add a subtle hover style to the bar links. All we’re going to do is tweak the colors on the gradient a little so they get brighter when you hover.

.menu-item h4:hover {  
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

Paragraph Styles

Remember that the first item in our menu holds a paragraph and not an unordered list, so next we’ll attack this to get it looking nice. The lists will take a sizable chunk of code but the paragraph hardly requires anything. Just define the size and color, then toss in some padding.

/*First Item Styles*/
.alpha p {
	font-size: 13px;
	padding: 8px 12px;
	color: #aaa;
}

The top section is now looking great! Both the header bar and the paragraph are exactly where we need them to be.

Unordered List Styles

There’s a ton of stuff that we need to do to get these lists straightened out. Let’s switch things up a bit and look at the code first, then I’ll walk you through it.

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
 
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 200px;
}
 
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}
 
.menu-item li:hover {
  background: #eee;
}

As you can see, the first block targets the unordered list as a whole unit. Here I set some basic sizing and font styles and removed the bullet point by setting list-style-type to none.

Next I targeted the links specifically. I moved them over, removed the underlines, set the color and performed the same display:block trick that we saw before to make the clickable area larger.

To finish things off, I applied a few custom styles to the list items themselves. The bottom border creates a separation between each item and the hover style changes the background. Here’s the result of our labor, our menu is almost finished!

Collapse And Animate

Up to this point, we’ve kept our menu opened up so that we could see it while we style the elements within. Now that we know that all of our visual styles are exactly like we want them, it’s time to collapse each section and then set them up to pop open on hover.

By default, browsers will set the height of those unordered lists to auto, meaning they’ll be just tall enough to hold all of the content within. To collapse the menu sections so that only the bars show, we can target those unordered lists and set the height to 0. Notice that we’re leaving the paragraph alone, this will ensure that our top section is always open.

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}

Now our menu is much shorter and doesn’t eat up so much space. You can also finally see the benefit of those gradients and borders that we implemented before.

Animating the Transition

Next we’ll want to open these menus back up on hover, but before we do that, let’s set up an animation so the transition is nice and gradual. Make sure you insert the various browser extensions and target the height property.

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
 
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

Expanding on Hover

All that’s left to do now is make it so that when you hover, the ul expands. This is tricky though so be careful. Your instinct may be to do something like “ul:hover” but that’s not what we want. Instead, we want to make it so that you can hover anywhere in that menu item, either in the bar or the unordered list. However, the item that we want expanded is still only the ul. Here’s what our selector looks like:

.menu-item:hover ul {
  height: 93px;
}

Sometimes reading a selector backwards is helpful when trying to figure out what it does. This tells our browser to set a height of 93px to our unordered lists when a .menu-item is hovered over.

One important thing to note here is that we can’t just set the height to auto because for some reason this disables the animation. If you don’t want the animation, a height of auto is much more flexible and allows you to vary the number of sub-menu items. If you want to do this with the animation, you’ll have to target the height for each individually.

See It In Action

Our menu is now complete. Be sure to kick the tires in the demo to see how it all works. I’ll also throw in a link to the completed code so you can have a look at it all together.

Demo: Launch Demo
See the Code: Check out the HTML and CSS on Tinkerbin

Conclusion

I hope you enjoyed this walkthrough of building an animated vertical navigation menu. In implementation, it’s very similar to the animated download buttons that we built the other day so you should really be getting the hang of hiding and showing content using pure CSS.

Look out for an even better version of this menu to pop up on our brand new sister site, Design Curate. You’ll find a ton of great freebies there that you can download and implement in your projects today.

Follow along as we create a simple and fun download button using some fancy CSS3. Our button will use lots of fun goodies including border-radius, box-shadow, linear-gradients, z-index and transitions to achieve a unique double sliding drawer effect on hover.

As we go, I’ll discuss why some techniques that you might think to use should be avoided. Transitions are tricky to work with and are quite prone to refuse to work with certain properties. Read on to find out more.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Concept

Loosely based on this idea, I wanted to create a download button with a cool sliding drawer effect where originally hidden information pops out when the user begins a hover event. To put my own spin on it, I decided to double the effect and create a drawer on both the top and bottom of the button (click here for a sneak peek of the finished result).

Here’s how it will work: using a combination of HTML and CSS, we’ll create three separate pieces. These include the main button and two smaller info panels. The smaller panels will initially hide under the larger button, then when the user hovers, one will slide upward and the other downward.

As you can see, this will be a pretty easy project that is perfect for beginners that are looking to up their CSS skills. Especially worth learning is how we’ll utilize absolute positioning and stacking via z-index.

What Won’t Work

As I planned out this project, I came up with a couple of ways to make my concept work. Given that I’ve been on a pseudo element kick lately, the way that I chose to structure the project initially was through the use of :before and :after.

With these pseudo elements, we can code only the download button in our HTML and then add in the wings using pure CSS. It seems like an optimal solution and indeed it worked great… until I tried to animate the transition. No matter what I tried, I simply couldn’t get the transition to work.

After a little research I discovered that that only Firefox supports CSS transitions on pseudo elements. This is a real bummer that really limits the fun we can have with :before and :after, but on the upside I learned a valuable lesson that will save me a lot of time and trouble in the future.

In tutorials like this one you don’t often get to hear about where the author failed, but I think it’s important to communicate these failures so you can learn from them as I have. Now the next time you want to animate a pseudo element you’ll remember that it won’t work in most browsers!

Failures aside, let’s jump into a method that will work.

The Button

To begin, we’ll create and style our button. Once we have this in place, it’ll be easier to form the other elements. All we need in the HTML department is a single div containing a link. We could simply use the link for the button but we’ll need to group multiple objects together so a div is necessary.

<div class="button">
  <a href="#">Download</a>
</div>

Button Shape & Size

The HTML above should simply provide you with a plain text link. We’re going to transform this into a button with a set background shape and size. To do this, we start with some dimensions, add some color and set the display value to block.

.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;
}

Here’s a look at what your button should look like after this step. It doesn’t look like much yet, but it’ll be a fancy looking button before you know it.

Type Styles

The first ugly thing about the button above that we’ll need to fix is the type, it’s currently a mess. Fortunately, this is easy to address. All we need to do is set the color to white, declare a font, and center it.

.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;
 
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
}

There are a couple of interesting things to note here. First, notice that I’m using the “font” shorthand rather than running through reach font property individually. This is a great way to save space and keep your type styles nice and succinct. The order here is as follows:

Here’s another nifty trick: I set the line-height to 50px to center it vertically in the button. Also notice that I removed the text underline and transformed the type to be uppercase. Why didn’t I just type it out in all caps in HTML? Because this is really a style choice and could change with a future redesign.

Now our button is looking much better!

CSS3 Magic

At this point our button is still looking a little plain. If you’re cool with the minimal look, you can skip ahead. Otherwise, let’s make it a little more interesting. The first thing we’ll do is round off the corners. Make sure you add all three browser prefixes:

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
        border-radius: 10px;

Next up, we’ll toss in a box-shadow. Once again, we’ll need three versions to cover the various browsers. The shorthand value order here is horizontal offset, vertical offset, blur and color.

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
   -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

Finally, we’ll toss in a gradient. Unfortunately, this requires a whole mess of code. The way gradients work recently change so not only do we need multiple prefixes, we also need multiple syntaxes to make sure we support everything. I’m going to be honest, I rarely code this stuff by hand. Instead, I use the Ultimate Gradient Generator and paste in the generated code. Here’s the result:

background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

Now our button is completely styled and looking fine. Here’s the result:

Adding The Drawers

Now that our primary button is done, it’s time to add the little drawers that will slide out from the top and bottom (perhaps “wings” is the appropriate term). To do this, we’ll start by adding a little bit to our HTML:

<div class="button">
  <a href="#">Download</a>
  <p class="top">click to begin</p>
  <p class="bottom">1.2MB .zip</p>
</div>

As you can see, I basically tossed in two paragraphs, each with a unique class that makes them easy to target (you could use some pseudo selectors instead if you really want to get fancy).

Default Paragraph Styling

Now jump over to your CSS and we’ll style the paragraphs. To start, we want to focus on the styles that both paragraphs will share. Styling both at once where possible helps keep our code clean and less redundant. Here’s a big chunk of code to think over:

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
 
  /*TYPE*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
 
  /*POSITION*/
  position: absolute;
  z-index: -1;
 
  /*CSS3*/
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

Now, this is a lot to throw at you all at once so I’ll walk through it step by step. The first thing we do is give the paragraphs shape, color and type styles exactly like we did on the button. The main difference is that these are smaller and use some margins to push them into place.

Next are the positioning styles. These are very important so be sure you understand them clearly. In order to make the wings appear behind the button, we need to apply z-index, which affects the stacking order of the elements. Think of this as a “send to back” sort of command. To make this work, we need to apply absolute positioning.

Finally, we added the same border-radius and gradient styles that we did before. I’ve kept these separated from the previous styles to keep things simple and clear, but to make things DRYer, you would probably want to rewrite your shared CSS3 styles to something like this:

.button a, p {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);      
}

Basically, any time you find yourself repeating or pasting styles multiple times, you’re making your code unnecessarily complex and should attempt to simplify.

At the end of this step, you’ll strangely see no change in your preview from last time. This is because we’ve hidden these elements behind the button. They’re there, you just can’t see them yet!

Hover and Active Styles

What we want to do next is take the wings that we just created and move them outward when the user hovers over the button. To accomplish this, we simply need to adjust the margins on each paragraph. Here we target each of the classes that we created, then move the .top one up and the .bottom one down. The .top class also required a slight line-height adjustment to look right.

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
 
.button:hover .bottom {
  margin: -10px 0 0 10px;
}

While we’re here, we might as well throw some active styles on as well. These will take effect during a mouse down event.

/*Adjust Gradient*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
 
}
 
/*Pulls in Wings*/
.button:active .bottom {
  margin: -20px 0 0 10px;
}
 
.button:active .top {
  margin: -70px 0 0 10px;
}

As you can see, what I’ve done here is adjust the gradient so that the top color stretches a little farther, then I brought the wings back in a little bit so that there’s a contracting effect when you click.

Now our button is looking awesome. All three of our states are working. When you’re not hovering, it looks like a plain old button. When you are hovering, the wings or drawers pop out. When you click, the wings come in a little and the gradient changes ever so slightly.

Final Step: Add The Transition

At this point, everything appears to be working just fine. The only problem is that the hover effect takes place instantly and of course we’d like it to be a little more gradual. To accomplish this, go back to your paragraph block and add in a basic 0.5 second transition using all of the required prefixes.

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
 
  /*TYPE*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
 
  /*POSITION*/
  position: absolute;
  z-index: -1;
 
  /*CSS3*/
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
 
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

With this addition, the button will transition very nicely between the three different states.

See It In Action

We’re all finished! You should now have an awesome animated CSS download button that is sure to impress. Check out the live demo below or check out the code on Tinkerbin.

Demo: Click Here to Launch

Want an even better version of the button with six different versions to choose from? Check out the awesome free download at our new sister site Design Curate.

Conclusion

Thanks for reading and following along. If you made it all the way through, pat yourself on the back for a job well done.

I hope you learned a thing or two about z-index or cool CSS3 tricks. If not, at least you got an awesome button out of the deal! Leave a comment below and let us know if you enjoyed the tutorial.

We’ve done a ton of fun stuff recently with the :hover selector. From button hover effects for beginners to more advanced hover tutorials and even onto using hovers with multiple backgrounds. Today we’re moving on and learning about a related but equally awesome selector that often gets overlooked.

With :active, we can control the state of an object while it’s being clicked. Typically, this takes the simple form of changing a link’s color while the mouse is pressed down, but we’re going to do something much more interesting. Follow along as we build a super cool, pure CSS presidential trivia game.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What We’re Building

The basic idea here is pretty simple. We have a grid of eight pictures with the goal of identifying the men depicted, each of which is a former U.S. president. Hovering over an image slides it down a bit to reveal further instruction, which encourages you to click. Clicking and holding will slide the image down further to reveal the name of the president shown.

Demo: Click here to launch the live version
Download: Click here to download the source files

Pseudo-class Selectors

A pseudo-class selector is something that we can use in CSS to modify a basic selector. If this sounds too technical for your liking, don’t worry, you already use these without even knowing it! The one that you’re likely to be most familiar with is the :hover pseudo-class selector, which allows you to change the appearance of something on hover. You might also be familiar with fancier pseudo-class selectors such as :first-child.

Regarding links or anchors, there are four of these pseudo-class selectors that you should be familiar with. Here they are with explanations for their use:

:link {} /*non-clicked links*/
:hover {} /*currently in a mouse-over state*/
:active {} /*currently being clicked*/
:visited {} /*clicked links*/

As you can see, our often used hover selector is part of a nice little family that can govern the style of a link at pretty much every state of its existence. It’s important to note though that this would be a much more interesting set of tools if :visited weren’t so problematic. Due to security hassles, browsers actually limit what you can do with this pseudo-class. For instance, you can use it change the color of a link, but you can’t manipulate that link’s background image.

For this reason, we turn to :active if we want to do anything really fun with a pure CSS click event. It’s not intuitive to click and hold though so you should tread carefully when using this functionality and always be sure to clearly instruct the user.

Enough of the boring stuff, let’s get started on our project!

The HTML

The HTML for our project is pretty simple. We start off with a brief introduction that states what the game is and how to play it. Here we ask a simple question: “Who Were the First Eight U.S. Presidents?” Notice that all of this is thrown into a simple container div.

Next, we create a reusable module to hold our image, which serves as a sort of visual question, and the answer, a simple paragraph that hides below the image. The concept of being reusable is key here. We want to repeat this for seven other presidents and we obviously don’t want to go through the pain of styling each module individually. For this reason, we apply a class (president), which we can style once and have those styles affect everything that the class is applied to.

<div class="container">
 
    <h1>Who Were the First Eight U.S. Presidents?</h1>
    <p>Click and hold a picture below to see the <em>:active</em> selector in action.</p>
 
    <div class="president">
    	<p><small>Click for the answer:</small><br /> George Washington <br />(1789–1797)</p>
    	<a><img src="pres1.jpg" alt="" /></a>
    </div>
 
</div>

There are a few things to note about the structure of the president div. First, I’ve got a little bit of voodoo going on with the paragraph. First of all, I’ve broken the information up into three sections: instruction, name and presidential term. Each piece is put on its own line via a break tag. The initial line uses a small tag, which will serve as an easy way to add a bit of visual differentiation to our text so it’s not monotonous.

Next up is the image, which is wrapped in an anchor tag. Notice though that I don’t have a link. This is because our anchor doesn’t serve as a gateway to another page but simply a clickable object. One important side effect here is that anchors don’t activate a special hover cursor without an “href”, which means we’ll have to do this manually.

All Eight Presidents

Now that we’ve got our basic HTML structure in place, copy and paste the president div until you have eight of them. Then enter the appropriate information for the other presidents.

<div class="president">
	<p><small>Click for the answer:</small><br /> George Washington <br />(1789–1797)</p>
	<a><img src="pres1.jpg" alt="" /></a>
</div>
 
<div class="president">
	<p><small>Click for the answer:</small><br /> John Adams <br />(1797–1801)</p>
	<a><img src="pres2.jpg" alt="" /></a>
</div>
 
<div class="president">
	<p><small>Click for the answer:</small><br /> Thomas Jefferson <br />(1801–1809)</p>
	<a><img src="pres3.jpg" alt="" /></a>
</div>
 
<div class="president">
	<p><small>Click for the answer:</small><br /> James Madison <br />(1809–1817)</p>
	<a><img src="pres4.jpg" alt="" /></a>
</div>
 
<div class="president">
	<p><small>Click for the answer:</small><br /> James Monroe <br />(1817–1825)</p>
	<a><img src="pres5.jpg" alt="" /></a>
</div>
 
<div class="president">
	<p><small>Click for the answer:</small><br /> John Quincy Adams <br />(1825–1829)</p>
	<a><img src="pres6.jpg" alt="" /></a>
</div>
 
<div class="president">
	<p><small>Click for the answer:</small><br /> Andrew Jackson <br />(1829–1837)</p>
	<a><img src="pres7.jpg" alt="" /></a>
</div>
 
<div class="president">
	<p><small>Click for the answer:</small><br /> Martin Van Buren <br />(1837–1841)</p>
	<a><img src="pres8.jpg" alt="" /></a>
</div>

Progress Check

At this point, we have pretty much all of the HTML that we’re going to need. However, since we haven’t styled anything, your live preview should still look pretty rough. You can see everything starting to take shape though, specifically notice that our small tags are already working perfectly.

Starter CSS

Now it’s time to add some style to our quiz. We’ll start by defining the easy stuff: the container dimensions and instructional typography. We’ll toss on a generic container size of 960px and add in a margin of “20px auto” to center the div horizontally and bring it down from the top a little.

We also need to make the h1 and p tags look good so we toss in some basic font styling. I got a little fancy here and used the CSS child selector (.container > p) to target only paragraphs that are direct descendants of the container. This will ignore the paragraph tags nestled into our president divs.

.container {
	width: 960px;
	margin: 20px auto;
}
 
h1 {
	margin-left: 20px;
	font: 37px/1.5 Georgia, Times, serif;
	text-align: center;
}
 
.container > p {
	text-align: center;
	font: 13px/1.5 Verdana, Helvetica, sans-serif;
}

Progress Check

Now you should have some nice margins that move the content away from the edge and a pretty headline that no longer uses the default typographic styling.

Style the President Class

Now we’re going to start adding some style to the president class, which should make a huge difference in our layout. To start, we want to float them all to the left and set their dimensions. Since we’ll be sliding the images in and out, we set the overflow to hidden so nothing breaks out of our little 200px by 200px box.

Next we set the margin to 20px, this is not an arbitrary number. It’s the carefully calculated value that allows four images per row in our layout. Our width is 960px, which is divided up between four 200px wide images, but 4*200 equals 800, leaving 160 pixels left for margins. 160px/4 images is 40px of margin per image, 20 on the left and 20 on the right.

.president {
	float: left;
	height: 200px;
	width: 200px;
	overflow: hidden;
	margin: 20px;
	background: none; /*IE*/
	background-color: rgba(0, 0, 0, .2);
	cursor:pointer;
 
	/*CSS3 Fancy Inset Shadow*/
	-webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, .3);
	-moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 20px rgba(0, 0, 0, .3);
 
}

There are some other points of interest here as well. We’ll be adding some z-index voodoo later, which actually makes any background color cover up our answer text. To account for this, I used an RGBa background fill at 20%. Older versions of IE don’t like this so they simply get no background fill.

I also set the cursor to “pointer” which will make the little hand appear when we hover over a president. Finally, I added an inset shadow just to make our background look a little nicer. This part is completely optional.

Progress Check

At this point things are looking a little weird, but we’re on the right path. Our president images are being contained and clipped, which is good, but the background text is actually pushing them down, which we don’t want. Instead we want the image to float over the text. We’ll accomplish this in the next step.

Fix the Text Styles and Stacking Order

Before we proceed to making all of this work, let’s style our paragraph text real quick. If we wait any longer it will be hidden behind the images and harder to keep an eye on.

.president p {
	font: bold 13px/1.5 Verdana, Helvetica, sans-serif;
	margin: 4px 0 0 10px;
	width: 190px;
}
 
.president p small {
	font: 10px/1.5 Verdana, Helvetica, sans-serif;
}

These styles should make all our text look much better. Notice that even though the small tag has default styling, it can and should be easily overridden in a manual fashion.

Putting the Text Behind the Images

As I mentioned above, we don’t want our paragraphs to push down the image but instead hide behind it. To accomplish this we set it free from the flow from with absolute positioning and then move it behind the image with a z-index of -1.

.president p {
	position: absolute;
	z-index: -1;
	margin: 4px 0 0 10px;
	width: 190px;
	font: bold 13px/1.5 Verdana, Helvetica, sans-serif;
}
 
.president p small {
	font: 10px/1.5 Verdana, Helvetica, sans-serif;
}

This gets everything right where we want it. The text is hiding behind the image and each image is finally being shown in its full form. The problem? There’s no way to see the answer!

Bring It to Life

Now that we’ve got everything right where we want it, it’s time to add the interaction. Let’s think about how we want it to work: We’ve already got the default state coded so we’re good there. The next step is the hover event. This should bump down the image, but only a little, just enough to show the first line of text. Then on the click, we want to bring the image down even further.

This all needs to happen with some nice transitions of course so it turns out that our first step is to set these up on the images. As always, we need a million different versions to account for all of the various browsers:

a img {
	-webkit-transition: margin 0.3s ease;
	-moz-transition: margin 0.3s ease;
	-o-transition: margin 0.3s ease;
	-ms-transition: margin 0.3s ease;
	transition: margin 0.3s ease;
}

With these transitions in place, any time we change the margins on our images, the transition will be animated. So our next step is to define the hover event with our favorite pseudo-class selector.

a:hover img {
	margin-top: 20px;
}

This adds a little bit of margin to the top of our image so that when the user hovers over it, this is what they’ll see:

This serves as a nice little tip for how to get the answer. If we showed the full answer here, we would likely have an issue with accidental reveals, the click serves as a more concrete way to ensure intentionality.

Our final piece of CSS is what we came here to learn about: the active pseudo class selector. By implementing this small but powerful final piece, our entire trivia game comes together.

a:active img {
	margin-top: 100px;
}

Now when a user clicks on an image and holds the button down, the image of the president slides down and his name is revealed. With that, we’re all finished!

Conclusion

After reading through this tutorial you should know a ton of great stuff about some of the most popular pseudo class selectors and how to use them to come up with some really interesting results. We combined the hover and active selectors to create a pure CSS trivia game where the user first hovers and then clicks to see a hidden message.

Leave a comment below and let us know if you learned anything. Also be sure to check out the live demo. Can you name all eight presidents successfully?

While working on a recent post that utilized CSS transitions, I stumbled upon some interesting revelations completely by accident. Switching up where you place the transition syntax can have a dramatic effect on how the transition is carried out.

Today we’re going to go over the various options for CSS transition syntax and how each affects the animation given whether your mouse is entering or exiting a hover.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Mouse Events in CSS

CSS transitions give us the awesome ability to implement simple animations without JavaScript. However, since there’s really not much talk about it in CSS, you would think that differing your mouse over and mouse out effects would still be something squarely in the realm of JavaScript. After all, there’s no support for something like this:

div {
	mouseover-transition: all 2s ease;
	mouseout-transition: all 1s ease;
}

However, it turns out you can in fact effectively control these two different variables. It’s simply not a very intuitive process. Let’s take a look at how it works.

If you want to skip the discussion and go straight to the syntax, CSS Tricks has a good example of this technique.

The Normal Syntax: Mouse In and Out Are Equal

There are a few different ways that we can go about applying a CSS transition. The first one we’ll look at is the plain old default, meaning we’ll use the standard syntax that you’ll find if you run a Google search for how to implement a CSS transition.

For experimentation purposes, we’ll keep the demo simple. We want the transition to animate the shift from a black square to a gray circle. Here’s how this looks (browser prefixes omitted for cleanliness):

#loremdiv {
	height: 200px; width: 200px;
	background: black;
	transition: all 1s ease;
}
 
#loremdiv:hover {
	background: gray;
	transform: rotate(1080deg);
	border-radius: 100px;
}

The behavior of this animation is typical. When you hover over the black square, in the course of one second it spins around as it increases its border radius to 100px and changes its color, making it a gray circle. Then when you take your mouse out, the opposite happens. The square spins counter clockwise back to its original position has its border radius steadily decreases and its color goes back to black.

Demo: Click here to see this example in action.

Reversed Syntax: No Mouse Out Transition

In the previous example, we placed the transition syntax in the #loremdiv selector. What happens if we reverse this and place the same snippet inside of the #loremdiv: hover selector?

#loremdiv {
	height: 200px; width: 200px;
	background: black;
}
 
#loremdiv:hover {
	background: gray;
	transform: rotate(1080deg);
	border-radius: 100px;
	transition: all 1s ease;
}

Even though it feels wrong, it turns out that this still produces a transition. However, it only produces a transition on the hover event, when the user exits the hover, the transformation is immediate.

This effectively gives us what we were looking for: a way to vary the mouse in and mouse out transitions. However, the mouse out is really no transition at all at this point, which isn’t very exciting.

Demo: Click here to see this example in action.

Doubled Syntax: Two Customizable Transitions

Now we’ve tried linking the transition to the normal selector and we’ve tried putting it in the hover selector, now let’s see what happens when we put a transition in both places.

#loremdiv {
	height: 200px; width: 200px;
	background: black;
	transition: all 0.3s ease;
}
 
#loremdiv:hover {
	background: gray;
	transform: rotate(1080deg);
	border-radius: 100px;
	transition: all 1s ease;
}

Notice that I’ve reduced the amount of time on the first transition so that we can tell what it does. Interestingly enough, the result here is the opposite of what many people expect.

Intuitively, you might come to the conclusion that the first transition statement will be applied on mouse in and the second on mouse out. However, the opposite is true. As we discovered in our last example, the snippet associated with the hover selector affects the mouse in event, leaving the other one for the mouse out.

Now we have the setup that we were shooting for! This gives us complete freedom to vary the mouse in and mouse out effects. What I’ve done with this example is reduce the amount of time that it takes for the animation to complete when the user exits the hover.

Demo: Click here to see this example in action.

Varying the Effects

Taking this idea even further, you can’t only vary the time, you can also vary the property and timing function. Here’s an example:

#loremdiv {
	height: 200px; width: 200px;
	background: black;
	transition: border-radius 0.5s ease-in;
}
 
#loremdiv:hover {
	background: gray;
	transform: rotate(1080deg);
	border-radius: 100px;
	transition: all 1s ease;
}

Here I stuck with the same animation that we’ve been using for the hover event, but when the user exits the hover, the only thing that animates back is the border radius.

Demo: Click here to see this example in action.

Conclusion

To sum up, there are three basic ways that you can approach CSS transitions. The first way is to link the transition to a non-hover selector. This makes the hover in and out transitions the same (only in reverse of course). The second way is to link the transition to a hover selector. This creates a hover in transition but eliminates the hover out transition.

Finally, the third way is to link transitions to both selectors. In this case, the non-hover transition will affect the hover out event and the hover transition will effect the hover in event. This is the technique that you’ll want to go with if you want the most control over the separate events.

Leave a comment below and let us know what you think of all this. Have you ever noticed that separate hover in/out events were possible? Have you utilized this in any way?

The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Webkit FTW

To keep things simple, I’ll start off all of this code using the -webkit vendor prefix. This will keep our code cleaner and easier to read as we learn. The reason I chose Webkit is simple: the CSS keyframe animation support rocks. Even Firefox, which recently added keyframe support, really won’t cut it nearly as well as Safari.

Afterwards, we’ll discuss how to toss in the other vendor prefixes and what type of experience you can expect on each browser. Ultimately, if you’re really looking for a solidly supported effect that works on as many browsers as possible, I recommend seeking out a jQuery snow plugin. However, if you’re up for a fun CSS learning experience, keep reading!

Getting Started: We Three PNGs

The setup for this project is three snowy background images. You can definitely add more if you like, but we’ll use three here to keep things nice and simple. Basically, all you need is three transparent background PNG files of varying size with random little white dots on them.

Here’s my process for setting these up. First, I created a 500px square image and used a tiny brush at full hardness. You can set up a scatter brush if you want but I like the control of manually placing the dots around the canvas. Then, to make sure it tiled nicely, I went to Filter>Other>Offset.

Since I started with a 500px square image, I’m going to cut that in half and offset by 250px both horizontally and vertically.

After you’ve run this command, you might have some messy spots near the center, these should be easy to clean up with a little erasing. The important part is that the edges wrap nicely so the middle of the image can be changed however you want.

Now save your PNG out and repeat this entire process for a 400px square image and a 300px square image. For these last two, I made the snowflakes a little blurrier and reduced the opacity a little.

Applying the Backgrounds

Now we’re going to apply these images to our background in CSS. I’m throwing them on using the body selector but feel free to apply them to something more specific.

Implementing multiple backgrounds is exactly like applying only one background, the only difference is that you throw in a comma after the first image URL and add in another. Here’s what our code will look like, note that the background images will all repeat by default.

body {
	background-color: #6b92b9; 
	background-image: url('snow1.png'), url('snow2.png'), url('snow3.png');
}

Multiple backgrounds have great support across the board, the only real thing you have to worry about is, you guessed it, older versions of IE. As with just about everything else in advanced CSS, multiple backgrounds are supported in IE9, but nothing older than that. Hopefully the new IE auto update program will put an end to these types of woes!

Setting Up the Keyframes

In the past, we’ve done some decently complex keyframe animations on Design Shack, but this time we can keep in really simple.

@-webkit-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Despite the fact that I’m referring to this as “simple” there’s admittedly a lot going on in this syntax so let’s break it down piece by piece. What this is doing is setting up an animation that we can then call into action elsewhere in our CSS. The base syntax is “@keyframes” but here we’re implementing the Webkit version so we used “@-webkit-keyframes”. The “snow” part is the name that I chose for the animation. You have some freedom here but try to choose something descriptive and helpful.

Next we initiate two frames. The first is what our page will look like at the beginning of our animation, the second is what it will look like at the end. At the beginning, I’ve placed all of our background images at the top left of the page using “0px 0px.” Then at the end, I’ve moved each image to a new location. Just like when we place each image, we’ll separate each set of position values with a comma.

The Position Logic

The position of each image at the end of the animation may seem arbitrary, but in reality this is very intentional. In order to make the animation work right, you have to understand a few things.

The reason we’re using keyframe animations instead of the simpler and much better supported transition property is because we can loop a keyframe animation endlessly so it will continue to snow indefinitely. With this in mind, you have to remember that once a single instance of an animation has run its course, it’s going to start over. If you don’t position your images properly, you’ll see a blip at this point.

The trick is to utilize the size of your images to make sure the end frame matches the beginning frame, thus creating a seamless transition. For instance, my second background image was 400px by 400px, so I moved the background 400px down during the course of the animation, the same for my third image at 300px. For my first image I did something a little different. I wanted it to move faster so I doubled the height and moved it 1,000 pixels. Since this is a multiple of the height, the last frame will still match the first.

Also notice that I moved the horizontal position of the images as well. This adds a bit of wind into the equation so the snow isn’t falling perfectly vertically. If you want the snow to sway back and forth as it falls, simply add in a few more frames.

Implementing the Animation

Our final step is to return to the body selector and throw in “-webkit-animation” to create an instance of the animation. First we state the name of the animation that we want to use, in this case “snow,” then we state the duration of the animation (20 seconds), next we choose a timing function (linear) and finally we loop the animation infinitely.

body {
	background-color: #6b92b9; 
	background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
	-webkit-animation: snow 20s linear infinite;
}

With that, your website should be snowing like crazy in Safari! Let’s take a look at expanding this a little.

Other Browser Prefixes

Now to add more browser support. Our keyframe setup section should be expanded to the following. I’ve started with the base syntax without a browser prefix, then used the prefixes for Mozilla, Webkit and Microsoft.

/*Keyframes*/
@keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-moz-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-webkit-keyframes snow {
0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-ms-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Then we do the same for the styles in the body. All of the various browsers use the same syntax, only the prefix changes.

body {
	background-color: #6b92b9; 
	background-image: url('snow.png'), url('snow2.png'), url('snow3.png');
 
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}

Note that the IE support here is purely for the future. Only IE 10 has support for keyframe animations and its still under development.

“Not So Fast” says Firefox

At this point I wanted to be all done with the tutorial, but alas, I opened up Firefox and found a problem: no animation! After some digging it turned out that the problem is in the multiple background implementation.

The issue is a strange one. Firefox supports multiple background images and it supports keyframe animations. It even supports animations that use multiple background images! However, for some reason it doesn’t seem to support moving each background image’s position independently during a keyframe animation.

Update

Great news, commenter Patric solved our little Firefox problem! It turns out my love for shorthand got me into trouble here. Firefox works perfectly if you list out all of the values in the initial line. Here’s the updated keyframe code:

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-color:#b4cfe0;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}
 
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

See It in Action

Demo: Click here to launch

Conclusion

To sum up, making a pure CSS looped snow animation that works in modern browsers is a snap. A few minutes of Photoshop and a couple of simple lines of code and you’ve got the North Pole. IE won’t support keyframe animations until version 10, Opera currently has zero support and Firefox has support, but it’s not as extensive as what you’ll find in Webkit.

This project perfectly illustrates why it’s important to play around with this stuff before it’s ready to be implemented in the real world. I had no idea that Firefox would throw a wrench into my little animation until I actually got my hands dirty with an experiment. Now I find myself much more educated on the necessary syntax for CSS animations on a browser to browser basis.

Print stylesheets can be a pain if you don’t know what you’re doing. Before you even approach one you need to make sure to do some solid research into how to go about it.

Today we’re going to help you along by first discussing the conceptual considerations that you need to keep in mind when creating a print stylesheet. Then we’ll dive into some code from the famous HTML5 Boilerplate to see some modern solutions for addressing the problems that arise when printing from the web.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Where Web Design Meets Print

The web and print are two fundamentally different beasts. They’re so different that you’ll often find designers who work full time in one medium or the other with almost no cross over. As a result, print designers often know very little about web design and web designers know very little about print design.

However, interestingly enough, most experts call for a little bit of overlap in every single web project you create. We’re of course talking about print stylesheets, which result in a sort of bizarro world where CSS is being used to design for print! It’s a crazy scenario, but you’re expected to plan for it nevertheless.

Unfortunately, even if you know your way around CSS fairly well, print stylesheets can throw you some curveballs. There are quite a few quirky tricks that you’ll need to implement in addition to plenty of conceptual planning.

Let’s see how to start this process by asking a few key questions.

Print vs. Web: What Are the Fundamental Differences?

This is an important question to ask yourself when creating a print stylesheet. After all, you’re converting a design from one medium to another so it pays to give some thought to how they differ.

Let’s think about the obvious areas. First of all, a page is a very limited canvas. Websites represent a fairly infinite space that can scroll as far as you want in any direction. Physical pages however, are stuck at 8.5″ by 11″ with a printable area of even less than that.

This has major implications. It means that lengthy content will eat up tons of paper. This leads us to think about where we can cut back. For instance, if we’re printing articles with hundreds of comments, maybe we should turn those off. There’s also an obvious change that must be made to the width of our content. Both the copy and the images need to be sized appropriately.

Interaction

Another major difference between print and the web is the capacity for interaction. The web represents a richly interactive dynamic medium while print is static; what’s on the paper is stuck there!

This means you need to rethink any interactive elements on the page. For instance, navigation menus are usually one of the first things to go. A printed page has no use for them and they can really eat up space if converted to simple unordered lists.

You also have to consider what’s going to happen with image sliders and the like. If your page has a slideshow with ten images at the top, that’s not going to translate well to paper.

The most basic level of interaction on the web is a link. This too becomes problematic. On your computer, you can simply click a link to see where it goes, on paper this functionality is lost so you need a good way to take all those inline links and show the reader where they lead.

Who is Printing this Page and Why?

The second important question that needs to be asked relates to why the page is being printed in the first place. A good designer doesn’t just set out to make things look good, the design has to maximize utility for the user.

This of course means that you have to consider just what the typical user wants. This isn’t going to be a universal answer. Every type of project will have a unique use for the printed page.

For instance, Google Maps users want just about everything stripped off the page for print: ads, the huge interactive map, the Google search bar, all of this and more must be ditched for a clean list of readable directions.

These goals are obviously quite different from someone who prints out a design blog post to circulate around at a meeting as a discussion point. Here the emphasis is on presentation of lots of text rather than very little.

Learning By Example: HTML5 Boilerplate

When you’re working with types of CSS that you’ve never approached before, one of the best possible ways to learn is to simply look around and see what others are doing.

The first place I usually start in cases like this is Paul Irish’s HTML5 Boilterplate. This project is a rock solid collaboration from leading industry professionals. It’s not by any means infallible but it’s still a great example to learn from.

If we download the Boilerplate and crack open the CSS file, we find the print styles at the very bottom:

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

This fairly small chunk of code has a lot going on, which means there’s plenty to learn from. Let’s dive in and see what we can find.

Print Media Query

@media print {}

The very first thing you should notice is the use of a media query to specify the print styles. This tells the browser that all the styles contained in this block are only to be applied under a special circumstance, in this case a user printing the page (this will help end the old “click for printer friendly version” technique).

Universal Selector and Blanket Styles

* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }

The next thing I notice is that the universal selector (*) is immediately whipped out to apply some blanket style changes to the page.

The result here is a drastic simplification of the visual styles on the page. Any background image or color is turned off, the text color is turned to black, text-shadows are disabled, etc. All of this both improves readability and saves on ink.

Print Friendly Links

a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */

Remember we said above that something would have to be done about printed links? It turns out that you can handle this task using pure CSS, an impressive feat! Good old Eric Meyer was doing this way back in 2002 on A List Apart’s CSS Design: Going to Print.

After first applying an underline to all the links on the page to help them stand out (some slightly change the color as well), there’s a snippet of code applied that actually prints out the link after the text:

a[href]:after { content: " (" attr(href) ")"; }

The result is that a typical link will be changed to link (http://goo.gl/CWGL4). As you can see, this is perfect for a printout. As a side note, not all browsers will support the CSS above, but those that won’t will print just fine, only without the parenthetical link text thrown in.

Notice that the Boilerplate goes one step further by disabling this action on images and JavaScript containing links.

Optimizing Page Breaks

You’ll notice plenty of code for dealing with page breaks: page-break-after: avoid; and p, h2, h3 { orphans: 3; widows: 3; } are both aimed at helping the pages flow better. The former forbids a page break directly after headers and paragraphs where possible, the latter ensures that no less than three lines can be orphaned or widowed on a page.

What are orphans and widows? When you have the first line of a paragraph stranded alone at the bottom of a page, that’s an orphan. Similarly, the last line of a paragraph may be carried over by itself to the next page, this is a widow. The code above ensures that, where possible, at least three lines of text will appear.

Image Sizing

img { max-width: 100% !important; }

Setting the image maximum width to 100% ensures that you don’t have any weird bleeding images. You’ve probably run into this before as a user: you go to print a web page and end up with several pages containing only partial images that were cutoff from the main page. This is easily preventable with the single line of code above!

Page Margins

@page { margin: 0.5cm; }

The way that the HTML5 Boilerplate defines page margins is very interesting. Most older articles about print stylesheets include very different methods. In fact, I didn’t even know about this method until writing this article.

It turns out that you can use @page to simply apply a margin all the way around the page. The code above applies a margin of 0.5cm (centimeters is CSS? Oh my!) to all pages uniformly.

If you want to get tricky, you can modify this to adjust the settings for every other page. The following code sets the left page (1, 3, 5, etc.) and right page (2, 4, 6, etc.) margins independently.

@page :left{ margin: 0.5cm; }
@page :right{ margin: 0.8cm; }

It’s a simple and elegant solution that is, surprisingly enough, CSS2.

Further Reading

Since HTML5 Boilerplate is a generic template, it doesn’t contain many of the code snippets that are typical of very specific types of sites like blogs. Before attacking your own print stylesheet project, browse a few of the following articles to make sure you’re up to speed.

• 10 Tips for Better Print Style Sheets from Web Designer Depot
• How to Make a Great Print Stylesheet from Aliso the Geek
• Print Style Sheets: The Basics (for No Excuses) by Jens Meiert
• Print Stylesheet – the Definitive Guide from Webcredible

Conclusion

Print stylesheets represent a completely different way to think about and use CSS. They’re not always the most intuitive of tasks so don’t expect to intuitively land on the right answers. Be sure to do your homework and test extensively.

Do you have any tricks or best practices regarding print stylesheets? Let us know in the comments below!