Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.

Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width.

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

What Is a Masonry Layout?

When you float objects in CSS, the browser arranges elements first horizontally then vertically. When we fill a container with a bunch of equally sized objects and float them left, we get a nice grid of images.

However, if the objects have variable heights, the results are much more difficult to predict. Instead of a nice tight grid, we get something that tends to be fairly scattered.

The obvious quandary here is how to pull off a nice tight grid that with items that have variable heights. It’s a pretty interesting topic and various developers have come up with several ways to go about it. Let’s take a look at three of the current best solutions.

To go one step further, we’re going to make sure that all three solutions are responsive, meaning the grid will reflow as the window size changes.

jQuery Masonry

jQuery Masonry is the most popular solution to pull off this type of layout. It utilizes some pretty fancy JavaScript to reflow a series of divs.

Putting Masonry into practice is pretty easy, all you need is a container that holds a series of divs that you want to arrange masonry style. You can place anything you want inside the divs, in this case I threw in some placeholder images.

Once you have that in order, toss in jQuery and jQuery Masonry. Then you need to create a simple function that identifies your container and targets the class that we used for our Masonry images divs. Here’s a basic example:

<div id="container">
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/200/food/1" alt="" />
	</div>
 
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/150/food/10" alt="" />
	</div>
 
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/250/food/3" alt="" />
	</div>
 
	. . .
 
</div>
 
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
  $(function(){
 
    var $container = $('#container');
 
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.masonryImage'
      });
    });
 
  });
</script>

CSS

As long as we have a width set on our container div, the code above performs the magic we need it to and reflows the elements. If you set the div width to a percent, jQuery Masonry even automatically reflows the items as the page resizes.

Even though this is the case, things can get messy if you want to keep your container centered. I found it easier to apply a static width to my container, then use media queries to reflow the columns as the page size decreases past the container size.

#container {
	width: 1200px;
	margin: 0 auto;
}
 
/*Media Queries*/
@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#container {
		width: 1000px;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#container {
		width: 800px;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#container {
		width: 600px;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#container {
		width: 400px;
	}
}
 
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
	#container {
		width: 200px;
	}
}

See It In Action

This gives us a nice tight image gallery that perfectly responds to various browser window sizes. I’ve taken all the spacing out to illustrate just how tight you can get your images, but feel free to build in some margins so your images are spaced out a bit more.

Demo: Click here to launch demo

Wookmark

Another popular JavaScript solution for achieving the same type of layout is Wookmark.js, which is the driving plugin behind the Pinterest-like Wookmark.com.

Wookmark.js is in my opinion a little trickier to implement than jQuery Masonry because of the lack of documentation, but it’s still pretty basic stuff. All we need to do to start is toss a bunch of images into an unordered list. The catch with this plugin is that we have to declare inline height values for each of the images.

<ul id="myContent"> 			
	<li style="height: 206px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/206/animals/1" alt="" /></li>
	<li style="height: 256px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/256/animals/2" alt="" /></li>
	<li style="height: 216px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/216/animals/3" alt="" /></li>
	<li style="height: 276px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/276/animals/4" alt="" /></li> 
	. . .
</ul>

Once you’ve got that set up, then you insert the JavaScript at the bottom of the body just like last time. Insert both jQuery and Wookmark.js, then set up the simple function below, which targets the list items in our #myContent unordered list.

I tossed in another simple function here which essentially reloads the script as the window changes size. This will ensure that the columns automatically reflow and provide that responsive functionality. This time around we’ll ditch the media queries and let the JavaScript handle all of the layout.

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.wookmark.js"></script>
 
   <script>
		$('#myContent li').wookmark({offset: 2});
 
		window.onresize = function(event) {
		    $('#myContent li').wookmark({offset: 2});
		}
   </script>

CSS

The CSS for this version is super minimal. All we need to do is set our ul width with a percentage and use position:relative. Then we set a specific width for each list item. That’s it!

#myContent {
	width: 80%;
	position: relative;
}
 
#myContent li {
	width: 200px;
}

See It In Action

Just like last time, the result is a tight grid of images. However, even though spacing options are adjustable with Wookmark.js, I couldn’t get it to work at zero so we have a little bit of spacing in between the images.

Demo: Click here to launch demo

Pure CSS

The JavaScript solutions are probably the safest and most widely compatible ways to go about a masonry layout, but the CSS nerd in me knew there had to be a way to pull it off without JavaScript.

It turns out, it’s actually pretty easy using some fancy CSS3. This technique was pioneered by Radu Chelariu at SickDesigner and though it’s definitely not as powerful, flexible, or cross-browser-compatible as the previous options, it’s still extremely impressive given that it’s all CSS.

To start off, let’s use the same unordered list that we did last time (no inline styles necessary), thrown into a container div.

<div id="container">
	<ul id="myContent"> 			
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/206/nature/1" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/256/nature/2" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/216/nature/3" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/276/nature/4" alt="" /></li>
		. . .
	</ul> 
</div>

CSS

Here’s where the voodoo happens. To start, apply a width to the container and center it. Then use the new CSS columns functionality to lay out the content into six columns with zero gap. Finally, target the images directly and set the display to inline-block with a width of 100%. Inline-block allows us to flow elements inline without floats while maintaining block level functionality.

#container {
	width: 1200px;
	margin: 0 auto;
}
 
#myContent {
	-moz-column-count: 6;
	-moz-column-gap: 0px;
	-webkit-column-count: 6;
	-webkit-column-gap: 0px;
	column-count: 6;
	column-gap: 0px;
	width: 1200px;
}
 
#myContent img{
	display: inline-block;
	margin-bottom: 0px;
	width: 100%;
}

That’s all we need for the masonry layout, but we still have the responsive bit to go. We’ll basically use the same trick that we used for the first layout, only this time we’ll change the column count and container width when the window size gets too narrow.

@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#myContent {
		-moz-column-count: 5;
		-moz-column-gap: 0px;
		-webkit-column-count: 5;
		-webkit-column-gap: 0px;
		column-count: 5;
		column-gap: 0px;
		width: 1000px;
	}
 
	#container {
		width: 1000px;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#myContent {
		-moz-column-count: 4;
		-moz-column-gap: 0px;
		-webkit-column-count: 4;
		-webkit-column-gap: 0px;
		column-count: 4;
		column-gap: 0px;
		width: 800px;
	}
 
	#container {
		width: 800px;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#myContent {
		-moz-column-count: 3;
		-moz-column-gap: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 0px;
		column-count: 34;
		column-gap: 0px;
		width: 600px;
	}
 
	#container {
		width: 600px;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#myContent {
		-moz-column-count: 2;
		-moz-column-gap: 0px;
		-webkit-column-count: 2;
		-webkit-column-gap: 0px;
		column-count: 2;
		column-gap: 0px;
		width: 400px;
	}
 
	#container {
		width: 400px;
	}
}

Compatibility

The big problem here is that IE doesn’t have support for CSS columns until IE10. This means that you’ll have to use jQuery Masonry as a backup for IE users if you want to implement this technique in a real world scenario.

See It In Action

Here’s our third and final masonry layout demo. At a glance, the effect is exactly like we saw with jQuery Masonry. Not bad for plain old CSS!

Demo: Click here to launch demo

Conclusion

In a recent article on Pinterest, I discussed just how powerful masonry layouts can be from a UX perspective, especially when combined with infinite scrolling.

You can definitely expect this budding trend to increase in popularity and before you know it you’ll have clients asking for a layout like the one they see on Pinterest. When this happens, you’ll now be prepared with not one but three possible solutions!

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.

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.

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

CSSDesk

I’ll start with CSSDesk because it’s one of the oldest on this list. It’s been around for years now as a quiet and obscure little tool that is extremely helpful for playing with basic web code. CSSDesk is a very simple tool that focuses purely on HTML and CSS.

What I Like About CSSDesk

There are a lot of things that I just love about CSS Desk. There are three main sections: HTML, CSS and live preview, the sizes of which can all be easily tweaked with a click and drag. I like that you can easily see everything you need in one simple view. There’s no effort or setup here, just load the page and start creating.

There’s also basic syntax highlighting just like all of the other tools on this list. However, one fairly unique feature that you don’t often see in these types of tools is line numbers. It’s such a simple addition but I tend to like line numbers so I really appreciate the inclusion.

The toolbar features are pretty cool as well, providing some options that you simply don’t find other places. In addition to the standard sharing feature, you also have the option to download what you just built. Further, there’s a set of default tiling background textures that are applied if you don’t manually override them. These are fun if you’re just building a button or widget of some kind and want something other than the typical plain white background.

What I Don’t Like About CSSDesk

Honestly, there’s not much to dislike about this one. Sure, it’s simple and doesn’t have some of the fancy features the other options have, but that’s also what makes it great. I hardly ever use this one anymore but every time I do it’s so nice I think I should stop by more often.

The biggest downside for hardcore coders is the lack of JavaScript support. If this is a deal breaker for you, try checking out one of the other options.

JS Bin

JS Bin is another popular place to tinker around with your code. The design of this app is quite minimal and really allows you to focus on the code. By default, the page only shows the HTML and live preview panes, but you can easily add JavaScript to that as well.

What I Like About JS Bin

There are quite a few nice features on JS Bin. The first thing that I found myself appreciating is the fact that refreshing the page doesn’t kill your work. The preview updates automatically but for those rare times when you do need a manual refresh, it’s nice that your first instinct (Command-R) doesn’t result in the accidental loss of an hour’s worth of tinkering.

As with CSSDesk, you save, share and download your work. The place where this obviously pulls ahead though is the JavaScript implementation. You can obviously enter your own JS but as a bonus you can choose to include popular libraries like jQuery.

Another cool feature is the ability to control which panes you see by manipulating the URL. For instance, “http://jsbin.com/#javascript,html,live” will get you all three panes while “http://jsbin.com/#html,live” will just get you two.

What I Don’t Like About JS Bin

To be honest, JS Bin is my least favorite option on this list. It’s not bad, but it definitely lacks the charm of the others. One thing that always gets me is that there’s no dedicated place for CSS, forcing you to embed it into your HTML. This works just fine, but it’s not as nice as the intentional separation seen in the other options.

jsFiddle

jsFiddle has completely taken off in the past few months to a year and is probably the most popular option on this list at the moment. And for good reason, this is one amazing app. Let’s face it, once you dig into jsFiddle, you may never look at any of the other options again.

What I Like About jsFiddle

There are a ton of great things to cover in my list of reasons why you should use jsFiddle. First up is the layout. There are four panels (HTML, CSS, JavaScript and preview) so you can see everything you need to at once and resize each area on the fly. The layout system here feels really flexible and is actually sort of fun to play with.

While we’re discussing panels, you can customize the CSS and JavaScript panels to utilize your favorite third party tools. You’ll find support for the Sass SCSS syntax and CoffeeScript.

jsFiddle lets you create a login and view a dashboard of your past saved work. There are a ton of menu options and tools once you’ve saved a fiddle, my favorites are the ability to quickly create a fork and the option to automatically tidy up your messy code structure.

In addition to the panel customization options, the sidebar has a bunch of other great features as well. For instance, you can quickly add both any major libraries that you want to include (jQuery, MooTools, etc.) and your own JavaScript/CSS resources.

One last amazing jsFiddle option that I only just discovered the other day: you can embed fiddles into a webpage. This option is found under the share menu and is a great alternative to other code embedding services.

What I Don’t Like About jsFiddle

My main beef with jsFiddle is the lack of an auto update option for the preview. Once you’ve used all the other options on this list and experienced the joys of auto update, it’s hard to put up with manual refreshes every few seconds in jsFiddle.

As far as other features go, it’s the best on the list but that one annoyance often drives me elsewhere if I just want to bust out a quick test. Keyboard shortcuts help, but they’re still not as nice as something automatic.

Dabblet

Dabblet is a fairly new kid on the block in this genre. Like CSSDesk, it focuses on only HTML and CSS with no JavaScript. However, don’t count it out because it brings some serious innovation to the table that you won’t find in any other editor.

What I Like About Dabblet

By default, Dabblet is split into three tabs: CSS & Result, HTML & Result and Result. This provides flexibility and focus while allowing you to always keep an eye on the result.

You can change things up with the controls shown below. The split can be vertical, horizontal or taken out completely. There’s also an interesting “behind code” mode where your result is simply the background for the coding area. Notice there’s also a message about using prefix-free. I use Dabblet all the time and never noticed this until just now! This means that you don’t have to use crazy vendor prefixes and can code the simple defaults, the hidden JavaScript will make sure your browsers interprets it correctly.

Dabblet has some great saving options as well such as “save anonymously.” It also links to your GitHub account, which coding nerds like will love.

My favorite Dabblet feature is the super slick hover effect integration in the CSS. They’re easier to show that describe. Here two few examples:

As you can see, hovering over certain bits of CSS brings up these little tooltips that are really great. You can get previews for fonts, colors, sizes, and even images.

What I Don’t Like About Dabblet

Dabblet is a bit quirky from a visual perspective, you either love it or hate it. I personally really enjoy using it but really wish that I had more control over the panel size. Having an auto 50/50 split is great, but I should be able to manually adjust that however I choose.

As far as I know, there’s also no way to view your HTML and CSS at the same time, which is a little annoying if you’re used to options like jsFiddle where you can keep an eye on everything at once.

Tinkerbin

Tinkerbin is the closest alternative to jsFiddle that I’ve found. Though it doesn’t have all of the fancy features found in jsFiddle, it has a few tricks of its own that are really nice.

What I Like About Tinkerbin

The default panel layout on Tinkerbin is probably my favorite on this entire list. It’s a very logical layout that puts the code on the left and a nice big auto-updating preview on the right. The HTML, CSS and JavaScript sections are all stacked on top of each other, with optional tabs that allow you to focus on just one of these.

Further, Tinkerbin supports even more alternate syntax options than jsFiddle. You can choose HTML or HAML; CSS, SCSS (with Compass), the old SASS syntax or LESS; and JavaScript or CoffeeScript. Needless to say, if you dig preprocessors, this is the option for you.

Tinkerbin is the only option that allows you to swap out your preview for a nice, extensive “View Source” window.

What I Don’t Like About Tinkerbin

Even more so than Dabblet, the Tinkerbin layout is completely rigid. Sure, I like the default setup the best, but sometimes I want to make that preview wider and I simply don’t have the option here.

Further, the saving options aren’t the best. There’s no account setup, dashboard, GitHub integration, etc. You simply save your experiments to a shortened URL.

Conclusion

By now I’m sure you can see the benefits of having a few of these sites bookmarked. I encourage you to experiment as often as possible with new ideas to keep yourself fresh and these services provide an awesome way to do it.

I hope this review has served as a helpful look into the details of each of these solutions. You should now know not only what makes each option unique but also where each falls short. This will help you make an informed decision about which one or two to primarily focus on.

I personally bounce back and forth with all of them fairly regularly but lately I’ve been hanging out mostly in jsFiddle, Dabblet and Tinkerbin. Which of these is your favorite and why?

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.

Recently, we took a look at a really solid framework from the good folks at Twitter called Bootstrap. This toolkit is a swiss army knife of utilities and includes both a functional layout grid and enough pre-styled elements to get a great jumpstart on any project.

Today we’re going to look at a very similar tool from Joshua Gatcke called HTML KickStart. This framework is simply overflowing with great stuff that will enable you to build web page prototypes at light speed. Let’s jump in and build a page with it to see what we think.

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

Before we jump into what HTML KickStart is and how you can use it, here’s a sneak peek at the final result of today’s tutorial:

Demo: Click Here to launch.

What Is HTML KickStart?

According to 99Lime.com (the project’s homepage), HTML KickStart is “an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10′s of hours on your next web project.”

According to this statement, this project could theoretically save us one or even multiple full days of work. That’s certainly no small promise! How does it make good on such a claim? By providing a huge set of features. Don’t bother asking “what’s in HTML KickStart?” Instead ask, “what’s not in HTML KickStart?” The answer is of course, “not much.”

Getting Started: Nav Menu

To see how all of this works, we’re going to rough out a quick project. If you want to follow along, download the project and start with the sample HTML page, just be sure to strip out any placeholder elements so you have a fresh blank slate.

The first thing we’re going to do is add a topside navigation. If we swing by the HTML KickStart elements page, we’ll find three built in menu options to choose from.

We want the Horizontal Menu option so we click on the “Horizontal” tab and find some sample code that we can use for our own purposes.

The system here is really straightforward, you simply create an unordered list with the “menu” class and each list item will become a menu item. The class “current” is added to the current page and sub lists can be used to create drop down menus.

<!-- Menu Horizontal -->
<ul class="menu">
	<li class="current"><a href="">Home</a></li>
	<li><a href="">About</a></li>
	<li><a href="">Services</a>
		<ul>
		<li><a href="">Web Design</a></li>
		<li><a href="">Web Development</a>
			<ul>
			<li><a href="">E-Commerce</a></li>
			<li><a href="">Personal Portfolio</a></li>
			<li><a href="">Publishing</a></li>
			</ul>
		</li>
		<li><a href="">UX Consulting</a></li>
		</ul>
	</li>
	<li><a href="">Contact</a></li>
</ul>

With only this little bit of HTML and zero CSS work, our menu looks great and is perfectly functional. As with the CSS, the JavaScript magic is already being taken care of for us.

Notice that there’s already a background image applied to our body. This is the default grid image that comes with the framework, we’ll see how to swap this out later.

Welcome Message

Next we want to add a nice big headline to our page to welcome any visitors. This will make use of the pre-built typography styles.

<div class="headline">
	<h1>Welcome to a Design Shack Demo</h1>
	<p>This is a demo of HTMLKickStart, a rapid prototyping tool from <a href="http://www.99lime.com/elements/">99Lime.com</a>.</p>
</div><!-- END WELCOME -->

The h1 and p tags will already contain some default styling, but there’s nothing at this point governing our layout so we’ll need to help this out with some custom CSS.

To start, we’ll want to center that text in the window. The paragraph and header also have a huge margin between them so we’ll need to tighten that up. Go into the “style.css” file and start a new section with your own styles. Then insert this code:

.headline {
	text-align: center;
}
 
.headline h1 {
	margin-bottom: 0;
}
 
.headline p {
	margin-top: 0;
}

With that, our headline is looking great. It’s perfectly centered has a greatly reduced vertical height.

Using the Grid

We haven’t really needed it yet but HTML KickStart does come with a prebuilt layout grid. If you’ve ever used anything like 960.gs before, there won’t be any surprises here. It’s your basic 12 column grid that uses numbered classes (ex: col_5).

As you can see, to get the full width, you need the total of your column class numbers to add up to 12. So if you want to split the page in half, you’ll create two divs, each of which have the class “col_6″ (6 + 6 = 12). You can do this with any combination that adds up to 12: col_7 + col_5, col_2 + col_10, etc.

To test this, we’ll do what I always do to test a grid system, code a basic three column layout. The CSS for this is already in place so busting out a three column layout is as easy as creating three divs, each with the “col_4″ class.

In each div we’ll toss three elements: a headline (h3), paragraph and an image. Placeholder images are grabbed via the placehold.it service.

<div class="col_4">
	<h3>Column One</h3>
	<p>Lorem ipsum dolor sit amet...</p>
	<img src="http://placehold.it/284x100/4D99E0/ffffff.png&text=284 x 100" width="284" height="100" />
</div>
 
<div class="col_4">
	<h3>Column Two</h3>
	<p>Lorem ipsum dolor sit amet...</p>
	<img src="http://placehold.it/284x100/4D99E0/ffffff.png&text=284 x 100" width="284" height="100" />
</div>
 
<div class="col_4">
	<h3>Column Three</h3>
	<p>Lorem ipsum dolor sit amet...</p>
	<img src="http://placehold.it/284x100/4D99E0/ffffff.png&text=284 x 100" width="284" height="100" />
</div>

Now we have a nice three column section under our headline. How easy was that?

A Little Cleanup

Looking at the example up to this point, I think the content is pushing up a little to close to the edge for my liking. To fix this, I wrapped everything after the menu into a “col_12″ div. The difference is subtle, but it feels much better from a whitespace perspective.

Changing the Background

While we’re tweaking things, let’s go in and swap out that background graphic. You’ll find this in the style.css file under the layout section.

/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
margin:0;
padding:0;
color:#000;
background:#efefef url(css/img/grid.png) repeat center top;
font:normal 0.9em/150% 'Arimo', "Trebuchet MS", arial, verdana, sans-serif;
text-shadow: 0px 0px 1px transparent; /* google font pixelation fix */
}

All you have to do is replace the “grid.png” image with your own background pattern. I grabbed this one and dropped it in just to give our page some contrast.

Slideshows and Buttons

We’ve still barely scraped the surface of the great elements that are available in this framework. Let’s bust out a quick new section that utilizes some more features.

<div class="headline col_12">
	<h1>Here's Another Section</h1>
	<p>This time we'll be utilizing a slideshow and a button.</p>
</div><!-- END SECONDARY HEADLINE -->
 
<div class="col_8">
	<!-- Slideshow -->
		<ul class="slideshow" width="600" height="350">
		<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="600" height="350" /></li>
		<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="600" height="350" /></li>
		<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="600" height="350" /></li>
		</ul>
</div><!-- END SLIDESHOW -->
 
<div class="col_4">
	<h3>A Slideshow!</h3>
	<p>Lorem ipsum dolor sit amet...</p>
	<button class="blue">A Sample Button</button>
</div><!-- END SLIDESHOW PARAGRAPH -->

Let’s walk through this piece by piece. First, we started with a headline exactly like the last one that we used. We reused our headline class from before so we shouldn’t need anymore custom CSS.

Next up, we used the awesome HTML KickStart Slideshow feature. This is implemented in a very similar way to the menu that we started with. Just toss in an unordered list with the class set to “slideshow”, define your height and width, then drop in some list items. Each list item will then become a slide. You can put anything you want inside of slides: text, images, etc.

Just like with the menu, this slideshow will automatically be functional as long as you’ve included the requisite JavaScript files that come with the download. This is an important feature, Twitter’s bootstrap requires some extra hoop jumping to get the JavaScript up and running but it’s truly effortless with HTML KickStart.

Buttons

Notice that the slideshow is in a “col_8″ div, which means we need a “col_4″ div for the next part, which is just a simple paragraph referencing the slideshow.

In this paragraph you’ll notice that I used a simple “button” element with a class of “blue”. There are all kinds of pre-built buttons to choose from: plain and gray, colored, you can even add icons!

I chose to go with the simple blue for this button but it’s just as easy to use any of the others. Drop in the code from the examples on the site and you’re good to go.

Here’s a shot of what this section looks like. Once again, without a single bit of extra CSS or JavaScript we were able to accomplish some impressive feats!

Footer

Included in your sample files is an example of a footer. This is important because it shows you how to break out of the grid and establish a full width colored area, something that I struggled with in my own attempts before noticing the footer.

<div class="clear"></div>
<div id="footer">
This page was built with <a href="http://www.99lime.com">HTML KickStart</a> for <a href="http://designshack.net/">Design Shack</a>.
<a id="link-top" href="#top-of-page">Top</a>
</div>

Here it uses an ugly, non-semantic div to clear the floats, but this is a fairly common practice and really isn’t the end of the world so don’t get too caught up with it.

To style the footer div, some padding and color was applied and the little link to the top of the page was prettied up a bit. This transition is animated via some more fancy built-in JavaScript.

#footer{
text-align:center;
padding:20px;
margin:0;
background:#efefef;
border-top:1px solid #ccc;
color:#999;
font-size:0.8em;
text-shadow:0px 1px 1px #fff;
}
 
	#link-top{
	float:right;
	color:#666;
	text-decoration:none;
	display: inline-block;
	padding:5px 10px;
	background:#e5e5e5;
	line-height:100%;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	}

Final Product

We could keep going for days with all of the stuff that’s in this toolkit. You’ll also find pre-styled tables, forms, image galleries, breadcrumbs, tabs, horizontal rules and even pre code snippets.

With what we’ve gone through, you get the basic idea for how it all works. The documentation is very thorough so all you really have to do is find the item you want to insert, then paste the code into your HTML and tweak as needed. Here’s another look at the page we just built:

Demo: Click Here to launch.

Who Is This For?

Now that we’ve seen how to use HTML KickStart, it’s important to discuss why you would use it. Perhaps even more relevant is who should think about giving this a shot.

Like most fully featured frameworks and boilerplates, HTML KickStart provides you with a really solid starting point for your development projects, not only from an HTML standpoint, but for CSS and even JavaScript as well. You should think about giving it a look if you don’t currently have a system in place that makes starting new projects easy.

Keep in mind that there’s a lot in this toolkit, too much for many developers’ taste. You can pick and choose what you want and leave out the rest, but also consider that the real strength in these types of toolkits is rapid prototyping. In a finished product, you may want to take the time to work out a layout scheme and all these bits of styling manually, but in the initial concept stages, why not upgrade your non-functioning wireframes to something like what we built today? It’s much more interactive than a flat sketch and really doesn’t take much more time to bust out.

Is It Any Good?

To be sure, this is not the only product of its kind on the market. There are a million different free frameworks out there, each with their own degree of custom styling. As I mentioned above, the closest thing I’ve seen to HTML KickStart is Twitter’s Bootstrap. In fact, the two projects are nearly identical at a glance.

Having tried both, there’s definitely a lot that I like about Bootstrap better. For starters, the layout is a little tighter and the docs go through advanced features like offsetting columns. I also like Bootstrap’s typography styles better and really appreciate the LESS integration.

That being said, there are some things that I like about HTML KickStart that you won’t find in Bootstrap. For instance, the slideshow feature is a huge bonus and something that I would genuinely use quite a bit. Further, all of the JavaScript in HTML KickStart “just works” while I had to do a lot of fiddling to get things working in Bootstrap.

Ultimately, I recommend that you give both a quick test drive to see which you like better. Even better, use both as inspiration for developing your own personal framework that’s custom-tailored to your needs.

Conclusion

HTML KickStart is an awesome project and I truly appreciate all the handwork that’s been put into it. When members of the development community distribute projects like this freely, I’m always amazed by their generosity and willingness to help others.

By now you should have a solid understanding of what HTML KickStart is, what it does, how to use it and whether or not it’s right for you. Leave a comment below and let us know what you think. How does this project compare to other similar toolkits that you’ve used?

New technologies are making web development more exciting than ever before. HTML5 and CSS3 provide a double dose of modern practices that are absolutely refreshing and empowering. Unfortunately, utilizing these technologies can considerably complicate your quest for cross browser compatibility.

How can you know which techniques are safe to use now and which you should either provide alternatives to or avoid altogether? Join us as we take a look at a handful of our favorite resources that quickly and easily help you make informed decisions about real world HTML5 and CSS3 implementation.

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

Simply Irresistible

Cross browser compatibility was difficult enough a few years ago before we started diving into fancy new technologies like HTML5 and CSS3. Now with these tools creeping to the forefront of our development methods, it can be a downright mess.

The benefits of using HTML5 and CSS3 are clear and undeniable. They’re so full of goodies and fun that nary one in ten developers can resist at least dipping a toe in to test the waters. To further the hype, authors like me are constantly dishing out awesome new tutorials that teach you the ins and outs of these technologies, thereby fueling your desire to put them into practice as soon as possible.

Are We Rushing Ahead?

While most of us are rushing headlong into utilizing the latest and greatest in web development trends, a few more rational souls are begging us to slow down. New toys are all well and good but much of this stuff is still under construction and the rest hasn’t been implemented well across all of the important browsers.

So who is right? How can you as a practical, real world developer know whether to buy into the hype and run with the new or trust the skeptics and stick with the tried and true methods from years past?

Stop the Guesswork

The single best thing that you can do to decide whether you can personally begin to implement new web technologies is to educate yourself on the support that you can expect for each new item in the various browsers that matter most to your audience.

This sounds like a lot of work doesn’t it? There are countless blogposts, books and websites dedicated to teaching you this stuff, enough to eat up an entire lifetime and more. The amount of material is so completely overwhelming that you might avoid learning simply out of intimidation.

Fortunately, there are some very easy and straightforward ways to make sure that what you’re doing will work well across various browsers. You won’t have to sort through mile long blog posts or read a stack of books every time you want to toss in a drop shadow, you’ll just need a quick look at a few select resources to get you going.

Browser Compatibility Charts: A Developer’s Best Friend

The very first thing that I recommend that you do in your quest to figure out which new technologies you can implement today is to bookmark one or two solid browser compatibility charts.

These resources are invaluable and can save you endless hours of research. They serve as a quick reference that immediately helps you identify which browsers do and don’t support the techniques that you’re trying to implement. Some of the better choices even offer help getting the older browsers to play nice.

When can I use…

Caniuse.com is certainly not the prettiest option available for browser compatibility charts, but it is one of the most helpful and thorough.

The organization here is very simple and easy to use: just click an item from any of the five categories (CSS, HTML5, SVG, JS API and Other) and you’ll be taken to a chart showing you the support for various browsers. Also, the search provides instant results as you type so answers to all your browser questions are never more than a few keystrokes away.

For instance, let’s say you read my recent article on :before and :after and would like to double check my statements about browser compatibility for the :after pseudo element (always double check your facts!), all you have to do is type “after” into the search bar and the chart below will pop up.

There’s a ton of great information here for you to utilize. The chart informs us that we’ve got great support across the board for current browsers (even IE), but run into some trouble two versions back with IE7 and before.

In addition to the compatibility chart, you’ll find two other valuable items: a browser comparison feature and a list of helpful resources.

The latter of these often includes some really great links. For instance, if you’re looking up new CSS3 functionality such as gradients, you might get a link for a generator that will do the work for you. In the case above we received a link for a detailed guide explaining the use of CSS generated content using pseudo elements.

The browser compatibility chart allows you to choose two browsers and see an overview of the support for the items in any of the five categories mentioned before.

FindMeByIP

If you’re looking to forgo all of the features of the previous site in favor of some plain old extensive browser compatibility charts that you can bookmark and reference in a flash, check out the HTML5 & CSS3 Support page at FindMeByIP.

As you can see, the charts here are quite attractive and very easy to read. These are perfect for when you just need to quickly double check something or get an overview of browser support across the board.

Should You Use It?

Browser compatibility charts are awesome for letting you know whether or not a given browser supports what you’re trying to implement, but they only empower you to make decisions, you still have to interpret the information and decide whether or not it’s safe to proceed.

If you’re a new developer, this can be intimidating. To help you out further, be sure to check out HTML5 Please. This community sourced project flat out tells you whether or not to use a given technique and makes recommendations for how to proceed. You should never follow something blindly, but when you’re on the fence this can sure help you make the call.

As with When Can I Use, the search bar here provides instant results as you type. Let’s say you want to know whether or not CSS transitions are safe to implement, simply enter “transitions” and the results will filter to the following:

Right away we get a recommendation for use, shown in the top right corner of the result:

“Use with fallback” is the advice we are given for CSS transitions. This is coupled with some brief and straightforward information that tells us that transitions are safe if they’re not necessary for a usable experience and that any interaction critical transitions should be backed up with an alternative for other browsers. The necessary browser prefixes for implementation are also provided. For many items, recommended polyfills are provided to help make your implementation as cross browser compatible as possible.

Modernizr Has Your Back

The final resource you need to become familiar with in your quest for cross browser compatible CSS3 and HTML5 is Modernizr. You’ve no doubt heard of it before, but it’s time to download it and check it out.

The reason that Modernizr is so great is that it can automatically detect whether or not a browser supports a given feature and then serve up some JavaScript magic in response. This allows you to account for an impressively wide array of circumstances and provide JavaScript fallbacks and polyfills for older browsers with very little effort.

Modernizr will test for support for over 40 next-gen features, provide on the go information to tell you what will and won’t be supported and provides the best solutions around to help you respond to any holes in support.

Conclusion

The resources above are all aimed at helping you make informed decisions about whether or not to implement a given HTML5 or CSS3 technique.

Browser compatibility charts provide a quick reference to how you can expect each browser to respond to a given technique, HTML5 Please will give you solid and honest recommendations for whether or not to proceed, and Modernizr will help you identify and fill the functionality gaps in a specific design.

These resources don’t get you off the hook for diving into deeper understanding of how to properly implement these features, but they do serve as an awesome starting guide for how and when to proceed.

Leave a comment below and tell us about your favorite resources in this area. Do you use any of the sites listed above? What other tools are invaluable to your workflow?

Today we’re going to have some fun as we take a look at an awesome new free tool for web developers simply called CSS Button. This web app makes it quick and easy to make the CSS buttons of your dreams using simple and intuitive controls.

I’ve seen quite a few other CSS button makers before and almost none really merit repeated use, but this site has a lot going for it and can genuinely save you a lot of time and frustration. Let’s jump in and check it out!

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

Meet CSS Button

The CSS Button app is great for jumpstarting your buttons. To start off, there are a few things on the home page that you don’t want to miss. The basic controls are fairly obvious, you can start a new button from scratch, check out and modify a template or hook up with Twitter so that you can save your work.

Also, don’t miss the somewhat hidden “Random Button” feature in the footer. There isn’t too much content on the site at the moment (the app is still in beta) but as it picks up and gains more users, this feature will become a fun way to discover new button ideas.

Creating a Button From Scratch

I’m never one to opt for the easy way out, so let’s start by building our own button completely from scratch. To do this, just hit the link on the left:

This should take you to a new screen where you will have all of the controls that you need to create a super fancy button. All of the inputs are basic and use either simple forms or intuitive WYSISYG controls.

We’ll go through each step to show you how the process works. Keep in mind that this may feel fairly involved in a written layout, but once you try it for yourself the effort really feels minimal.

Background Gradient

The first step we’re going to take is to define a background for our button. You can either choose a solid color or a gradient, I’ll take the gradient route. This uses simple color selectors to help you build your gradient. If you’ve ever coded CSS gradients by hand, then you know that we’re already saving ourselves a big chunk of time because choosing two colors is far easier than writing the mess of code necessary to perform this operation.

Clicking the lightning bolt next to an option brings out its list of controls. For many of these, you can click multiple times to add the effect a number of times. This helps create really complex, Photoshop-like layers.

Understanding the Preview

Off to the right of the button controls is the preview of what you’re creating. It doesn’t look like much at this point but it will get much better as we progress.

Notice that they’ve covered all the bases here and allow you to style the normal, hover and active states. By default, our actions will affect the normal state, we simply click on one of the other states to target it specifically. The “Final” version is a live button that you can use to evaluate and interact with your design.

Box-Shadow

Next up are the box-shadow controls. These are simple enough and allow you to quickly enter values for the offset, blur, spread, etc. You then choose your color and can even toggle the inset option for inner shadows. My one disappointment here is that it doesn’t look like you can set the shadow using an rbga value, which is my preferred method so that the background shows through.

Button Dimensions

Now it’s time to finally give our button some substance. In this section you can set a static size and add in margins/padding to add weight to your button. You can also round the corners off with some border radius. Each of these options lets you be as specific as you want, so for example you can either choose to set the border margin to be the the same on all sides or different for each corner.

After this step, we can see that our button is looking much more like, well, a button!

Font Properties

Next up we have some controls for setting our text and text shadow styles. I really appreciate being able to set not just the font, but the font stack. This shows that the developer had coders in mind when building this tool.

After this step, our button is looking pretty sharp. We’ve set just about everything that we need to for a basic button (you can also go in and set a transition if you wish).

Hover and Active

After getting my normal button state exactly how I want it, it’s time to go back and add in the settings for my hover and active states. I took the predictable route of making the button a little lighter on hover and reversing the gradient to simulate a press on active.

Once we’re done, we get a nice fat chunk of CSS to place in our code. It’s a big chunk of code but it’s all my own doing and mostly results from all of those crazy browser prefixes that you have to use to pull off gradients and shadows. As I look at all of the code necessary for this simple button, it becomes quite evident just how much time this little tool saved me. I’m more than capable of creating this button by hand but it would admittedly take me several minutes, I was much quicker using the WYSIWYG controls here.

Starting From a Template

Now that we’ve gone the DIY route, let’s go back to the beginning and take the other option: start from a template. Clicking that link takes you to the templates page where there are currently five super slick button examples to choose from.

Modifying the Template

To begin, I chose to start from the “Sexy Green Download Button” template. Choosing an option takes you into the same generator that we saw before, the only difference is that it’s now pre-populated with the appropriate settings to create the button below.

It’s really nice to have that solid base built up already, from here it’s just a matter of customizing the values that you’d like to change. For instance, starting with the button above, I went in and changed only the border-radius and box-shadow properties and was able to quickly bust out my own unique faux 3D button.

Worth a Try?

I know what many of you are thinking, and I’m with you. I’m a total nerd who loves both the art and science of CSS so I actually enjoy coding these types of things by hand. That being said, I can’t help but appreciate a utility that can genuinely save me time, and this is one of those tools. Beyond that, I don’t always know what I want in a button when I start creating it and its nice to have some visual tools to experiment with and tweak until I find something that I like.

CSS Button is still in beta so I did run across a bug or two. For instance, when you type in a color by hand and then click on the color selector later to tweak it, you find that the color selector doesn’t update to reflect the manual entry.

Aside from a few very minor quirks though, this is a solid utility that I plan on adding to my ever growing CSS3 toolbox. As I mentioned above, there’s a lot about this app that makes it evident that it was built with coders in mind. I have an impressive amount of flexibility to do all the things that I would normally do by hand, they’re just in a format that’s a bit easier to follow.

What do you think? Do you enjoy tools that aim to help you perform complex tasks a little easier or do you prefer the purist route of only coding by hand?

Responsive design often requires setting your widths using percentages. This is easy enough to accomplish, that is until you start throwing borders into the mix. If your columns and total width are set using percentages, a static border size wreaks havoc on your layout.

Today we’re going to look at a couple of different ways to beat this problem. You’ll learn how to create a completely fluid layout that doesn’t mind extra borders or padding one bit.

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

Responsive Design Is Easy… In Theory

Responsive design is currently our best answer for serving up optimized content to the wealth of different devices and screen sizes that access the web today. With a few basic media queries we can quickly and easily take a static design and turn it into something that evolves based on the user’s unique needs. How amazing is that?

In theory, this looks nice and simple to me. I’ve spent a lot of time both reading and writing about responsive design, so I know both the theory and the practices well enough that I should never encounter any major hurdles. However, real world coding has a way of surprising you. No matter how prepared you think you are, when it comes time to actually bring your project to life, some major hurdles are bound to present themselves. Especially when you’re approaching complex layouts in CSS.

There are a million issues that arise in situations like this but today I want to focus on one that specifically threw me a curve ball: borders. When designing responsive layouts these seemingly innocent touches can have the effect of ruining everything!

Responsive Math

When coding a full on responsive site, one highly recommended practice is to use percentage based widths on your content. Sure, you can combine media queries with static widths, but then your layout isn’t nearly as adaptive as it could be. If that’s the ultimate goal, why not go all the way?

Combining multiple column layouts with percentage based widths involves a little bit of math, but it’s actually super basic and can be handled by anyone with basic addition and multiplication skills (we performed this next bit in our responsive thumbnail gallery tutorial).

Let’s say we want a five column layout. The first thing I like to do is think about margins. If we want 4% margins between our columns, 4% times 5 columns equals 20% of our width being reserved for margins. Then we subtract 20% from the total width (100%) to come up with 80% left for the actual columns. 80% divided by five columns equals a 16% width on each column. Here’s a graphic to make everything a little clearer:

Putting this math to good use in our CSS would look something like the following. Pretty easy right?

.column {
	width: 16%;
	margin: 0 2% 0 2%;  /*2% right +2% left = 4% margin*/
}

The Border Problem

Not so fast. Let’s say we want to add a border to our design. How do we do that? Normally we would simply add a border to the column class, but we’ve already accounted for 100% of the width in the layout above. Adding border completely screws up our layout. Here we have five columns distributed via the CSS above:

And here’s what happens when we add a border of say, 2px to a column:

The solution of course would be to account for the border in our previous math, but how do we go about this? It turns out, we can’t set the border size as a percent, only a static value. This is problematic because if we use percents for everything else, the amount of space that we leave for the border will be a varying value, meaning it will change as the page width changes. This makes it nigh upon impossible to decide on a width for our borders! So what do we do? Should we give up and scrap the border idea?

CSS Outline to The Rescue

Obviously, what we need is a way to apply a border to a column without screwing with its width. As any good CSS trickster knows, there is in fact a property that does just that: outline. Using the following code, we can leave our math exactly as we figured before and still come away a border-like effect that doesn’t break our layout.

.column {
	width: 16%;
	float: left;
	margin: 0 2% 0 2%;
	background: #03a8d2;
	outline: 2px solid black;
}

This works great for our test, the columns flow nicely and fit perfectly in the space provided despite the outline:

Headaches

We found our solution, let’s pat ourselves on the back and call it a day! Unfortunately, there’s always a caveat. In this case, there are several.

Browser Compatibility
The first issue that arises with using the CSS outline property is of course browser compatibility. To be fair, the situation here could be worse. We’ve got great support across the board in modern browsers: Safari, Chrome, Opera, even IE! Unfortunately, IE support only goes back to IE8 with IE6 and 7 having zero support.

Many developers have only recently decided that they can scrap IE6 support so I know many won’t be willing to do the same for IE7 just yet. However, the good news is that this is purely a subtle aesthetic touch and it’s definitely not going to ruin my day if everyone sees the outline except IE7 users.

Firefox Box-Shadow Problem
Even though Firefox fully supports the CSS outline property, you have to be really careful how you use it. Specifically, you’ll run into problems if you combine an outline with a box-shadow. To see what I mean by this, here’s an outline and a box-shadow rendered in Safari (the good way):

Now here’s the exact same code rendered in Firefox (the messed up way):

As you can see, for some crazy reason, Firefox places the outline outside of the shadow rather than on the true edge of our column. This results in unacceptable ugliness!

All Or Nothing
One final thing to remember about CSS outlines: you can’t apply them selectively. With borders, you can use border-right, border-top, etc. but with an outline you’re forced to accept the idea that it will be uniform all the way around the edge of your object.

Another Solution: box-sizing

The CSS outline has a lot of baggage! It solves our problem but comes with a pretty hefty set of instructions that you might not care for. If only there a way to use the far superior border property but adjust the CSS box model to our own devices. Well you’re in luck, because there is in fact just such a property: box-sizing.

This magical property allows us to tweak that ever confusing box model. The default value of box sizing is “content-box”, which is essentially the box model that we know and love. The width and height values determine the size of the content and any padding or borders are drawn outside of that and therefore add to the width. So a 200px wide div with a 2px border technically eats up 204px of space.

border-box

The other possible value for box-sizing is “border-box”, which actually places any padding and borders inside of the specified height and width. This means that a 200px wide div with a 2px border is still only 200px! Here’s what this looks like if we apply it to our columns:

.column {
	width: 16%;
	float: left;
	margin: 0 2% 0 2%;
	background: #03a8d2;
	border: 2px solid black;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

With this code, our columns are flowing perfectly despite having borders applied:

We can even take this a step further and add some padding to the equation without screwing anything up. As long as you have the box-sizing property set to border-box, no additional math is necessary. Add all of the borders and padding that you like and everything still works:

.column {
	width: 16%;
	float: left;
	margin: 0 2% 0 2%;
	background: #03a8d2;
	border: 2px solid black;
	padding: 15px;
	font-size: 13px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Browser Compatibility

Interestingly enough, browser compatibility here is the same as with outline, meaning this works on pretty much everything but IE6 and IE7. Your main concern here though is that, unlike with outline, the layout will in fact fail in browsers that don’t support this property.

Which Method Is Best?

The outline property is definitely the simpler fix, it works in a lot of situations and if it fails, nothing bad happens to your layout. However, I think that the box-sizing method just feels so much better. I can combine it with a shadow without any serious problems, browser support is actually not bad and I can still enjoy all the goodness of borders. The fact that padding can also be thrown into the mix is icing on the cake and brings this way ahead of the competition in my mind. If you’re worried about IE7, you can always whip up a quick conditional stylesheet that solves the problem.

Demo

If you want to see box-sizing in action, cruise over to Dabblet to see the live demo of the example above.

Conclusion

Outline and box-sizing represent two possible solutions to our problem of combining borders with percent based widths in CSS layouts. Neither solution is perfect, but as long as you know what you’re doing, both can be used to successfully solve your layout woes.

Now that you’ve seen my solutions for this problem, it’s time for you to chime in. How do you handle the problem of borders in responsive layouts? Do you have a different solution not listed above?

We recently took a look at :active, an extremely handy pseudo-class selector that can be used to create some awesome mouse-down effects. Today we’re going to take a step back and explore some other “pseudo” items, this time we’ll be looking at the pseudo-elements :before and :after. You’re probably beginning to see these used all over the web in advanced CSS examples so you might as well jump in and learn to use them yourself.

What is a pseudo-element and how does it differ from a pseud-class? Why do pseudo-elements sometimes have one colon and sometimes have two? How are :before and :after implemented in CSS? What are some ways that developers all over the web are using these tools to perform amazing feats of modern coding? Read on to find out.

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

Pseudo-Classes vs. Pseudo-Elements

This is a super confusing little piece of semantics that lots of people seem to be mixed up about (myself included before diving into the research). If you run a quick Google search to find the difference between the two, you’ll find longwinded and overly technical responses mixed in with simple, uninformed statements that the two are in fact different, with no discussion as to how or why. Some sources, such as W3Schools, seem to use the terms interchangeably, which often results in incorrect usage. The answer though is pretty simple if you break it down.

Pseudo-Classes: Target Whole Elements

First, let’s look at pseudo-classes, which target complete elements or element states.

a:link {color: #111}
a:hover {color: #222}
div:first-child {color: #333}
div:nth-child(3) {color: #444}

As you can see, though these conditions aren’t necessarily based on the DOM, the resulting selection is a complete element in every case. What is ultimately styled is an entire link element, paragraph, div, etc.

Pseudo-Elements: Target Element Sub-Parts

Pseudo-elements, on the other hand, select sub-parts of an element. This is an important distinction, here are some examples:

p::first-line {color: #555}
p::first-letter {color: #666}
a::before {content : "hello world";}

As you can see, all of these target only a part of an element: the first line or letter of a paragraph for instance. These also have the amazing ability to target and even add to things that aren’t even specified in your HTML, which is exactly what :before and :after, the topic of today’s discussion, do for us.

To read more about the differences between pseudo-classes and pseudo selectors, I highly recommend that you check out UMD for a nice and thorough explanation with plenty of examples.

:before vs. ::before

Before we jump into what :before and :after actually do in CSS and how you can use them to accomplish some cool stuff, let’s clear up one more major point of confusion. If you look around the web for examples of :before and :after in use, you’ll find two different syntaxes.

Sometimes developers will use a single colon, other times they’ll use two. Do the two perform different functions? Not at all, it turns out they’re exactly the same from a functional perspective, meaning both will achieve the same result and are used for the same purpose. So why the difference? Here’s an example:

/*CSS2*/
.example:before {}
.example:after {}
.example:first-child {}
 
/*CSS3*/
.example::before {}
.example::after {}
.example:first-child {}

As you can see, in CSS2, we used a single colon to represent both pseudo-classes and pseudo-elements. However, to help differentiate between the two, CSS3 includes a second colon only on pseudo-elements.

IE Ruins Everything, Again

So why do we still see both syntaxes in modern examples and tutorials? Are some developers just ignorant of the change? That might be the case, but the likely answer for most of these inconsistencies lies with our old friend Internet Explorer, destroyer of all things new and good in the world of web development.

It turns out that all modern browsers accept the double colon syntax, but sadly, IE8 does not. For this reason, when coding with ::before and ::after, most developers opt for compatibility over convention and simply use the CSS2 single colon syntax. To keep things simple and consistent, we’ll stick with this more widely compatible syntax for the rest of this discussion.

What Are :before and :after?

That was a lot of groundwork but it’s all necessary to know when you’re going into a discussion on using :before and :after in CSS. Now we can finally jump in and see how these things work.

The concept here is actually really simple. Both :before and :after allow you to actually add to your HTML elements from your CSS without cluttering your presentational markup. This opens up a lot of possibilities for adding little decorative elements that don’t necessarily merit extra markup.

For instance, let’s say you have a few phone numbers throughout your site and would like to place the ☎ icon in front of them. You can use the :before pseudo element to do just that:

.phoneNumber:before {
	content:"☎";
	font-size: 15px;
}

This code will actually insert the little icon before every element marked with the .phoneNumber class. The :after code works exactly the same way only, as you can guess, it will place the icon after the phone number.

.phoneNumber:after {
	content:"☎";
	font-size: 15px;
}

A Brief Example

One reason that :before and :after have become so incredibly popular lately is for their ability to dramatically increase the complexity of pure CSS design elements. Without any additional markup, we can use these pseudo elements to add in additional style-able elements and layers.

To see how this works, let’s style a simple button. These are the basic styles that style the .button class to be round with a red gradient:

.button {
  height: 100px;
  width: 100px;
  position: relative;
  margin: 50px;
  color: white;
  text-align: center;
  line-height: 100px;
 
  /*Rounded Corners and Shadows*/
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
 
  /*Ridiculous Gradient Syntax*/
  background: #e51d16; /* Old browsers */
  background: -moz-linear-gradient(top,  #e51d16 0%, #b21203 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e51d16), color-stop(100%,#b21203)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* IE10+ */
  background: linear-gradient(top,  #e51d16 0%,#b21203 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e51d16', endColorstr='#b21203',GradientType=0 ); /* IE6-9 */
}

Amazingly enough, all of this work will result in a fairly plain looking circle button:

Now, let’s say we want to add a slightly darker area outside the button and give it an inner shadow so the whole thing looks slightly inset. Rather than adding extra markup, we can simply use an empty pseudo-element.

.button:before {
  content:"";
}

Now we can style this to add the desired effect. This is the basis for many of the fancy, difficult to wrap your mind around CSS styling tutorials you see on the web today.

.button:before {
  content:"";
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  position: relative;
  padding: 15px;
  background: #ddd;
  left: -15px;
  top: -15px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

Now our button has a little bit more dimensionality to it. The :before pseudo-element is evident in the outer ring. We gave it a z-index of -1 to drop it behind the button and used absolute positioning to nudge it into place.

Now let’s say we wanted to do the same thing one more time. This go around we can access the :after pseudo-element and repeat the process.

.button:after {
  content:"";
  width: 100%;
  height: 100%;
  display: block;
  z-index: -2;
  position: relative;
  padding: 25px;
  background: #eee;
  position: absolute;
  left: -25px;
  top: -25px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

This simply adds in another layer. Now our button appears to have a double inset from the top canvas:

Demo

If you want to see this in action and play around with the code, check out the live demo on Tinkerbin. Can you use the basic structure to make your own fancy button?

What Else Can You Do With :before and :after?

By now you should know quite a bit about :before and :after and how they are being used in modern web design. It turns out though that the rabbit hole goes deeper still, these pseudo-elements are being used for all kinds of crazy stuff. Here are a couple of popular uses that you should know about:

Micro Clearfix

Who doesn’t love a good clearfix? CSS floats can be a real pain (they break the fifth commandment and aren’t nice to their parent elements) and developers everywhere are constantly looking for a better way to clear them.

Nicolas Gallagher came up with what appears to be the current favorite clearfix hack, which utilizes :before and :after in a creative way.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Here the :before pseudo-element prevents top-margin collapse and the :after pseudo-element is used to clear the floats. It’s a pretty nifty solution that uses a lot less code than other notable cross-browser friendly attempts.

Before you run off and leave a comment, I both know about and use the overflow: hidden method. This is simply an alternative that’s particularly helpful when the overflow trick isn’t appropriate.

CSS Shapes

Another really interesting use of :before and :after is to create complex shapes using pure CSS instead of images. This is accomplished through some really clever manipulation of borders along with some pseudo-element magic.

CSS3Shapes.com has some awesome examples of basic shapes that you can build using this method. For instance, here’s the code for an octagon.

#octagon {
   width: 100px; 
   height: 100px; 
   background: blue;
}
 
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid blue;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
 
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid blue; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}

As you can see, :before and :after are called, positioned and then given borders. This combines various simple shapes into complex ones. Pretty spiffy!

Even More Pseudo-Element Goodness

If you’re looking for even more crazy stuff to do with pseudo-elements, Chris Coyier has an awesome roundup of possible applications on his site CSS-Tricks.

Conclusion

By now you should pretty much be an expert on :before and :after in CSS. You should know the difference between pseudo-classes and pseudo-elements and why the latter is often seen with either a double or single colon. You should also know how :before and :after work on a basic level and have a good idea for how to use them to create some impressively advanced CSS voodoo.

Leave a comment below and let us know if you learned anything. What other great tricks have you seen performed with pseudo-elements?

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?

Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.

One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. One day you’ll be working on a project and will need a responsive gallery and you’ll remember this post on that very topic.

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

Sneak Peek

Before we get started, take a quick look at what we’re building. Be sure to resize your browser window page to get a glimpse of just how well the page responds to different viewport sizes.

Demo: Click here to launch the demo.

Initial HTML

Let’s jump into this project with some basic HTML. Instead of using plain old images in our gallery, we’ll go for something that’s much more versatile. For any given entry, you might want an image, title and brief description. Wrap all of this into a repeatable element and throw it all into a container div. It should look something like this:

<div class="container">
	<div class="galleryItem">
		<a href="#"><img src="..." alt="" /></a>
		<h3>Title</h3>
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
 
	<div class="galleryItem">
		<a href="#"><img src="..." alt="" /></a>
		<h3>Title</h3>
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
</div>

To add items to the gallery, simply copy and paste the galleryItem div (our example will use ten of these). From here we can see what we’ll need to target in our CSS. We have two classes: container and galleryItem. We also have some images, h3 tags and paragraphs. For the images, I’ll be using photos from LoremPixel.

Container Styles

To begin our CSS, let’s set a width to the container and center it on the page. This gives us a nice, wide area to work in for our gallery.

.container {
	width: 80%;
	margin: 30px auto;
	overflow: hidden;
}

Notice that I’ve set the width with a percent. This how we make sure the whole page is nice and fluid. We don’t want the design to merely look good for a few preset breakpoints, instead we to make sure that it can continually adapt to whatever viewport is being used.

Basic Gallery Styles

Now let’s attack the galleryItem class basic styles. We’ll set the text color and font-size and float the items to the left.

.galleryItem {
	color: #797478;
	font: 10px/1.5 Verdana, Helvetica, sans-serif;
	float: left;
}
 
.galleryItem h3 {
	text-transform: uppercase;
}
 
.galleryItem img {
	max-width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

I also added some image styling here. By setting the max-width of the images to 100%, I’ve ensured that, as the page gets narrower, the images will follow suit. I finished off by slightly rounding off the corner of each image.

We’ll add the column widths in the next step but for now I wanted to give you a preview of what the text and image styles will look like once we get all that worked out. If you’re following along, you should only have on wide column at this point but your text should look like this:

Flowing the Columns

This is the trickiest part. We need to figure out our width and margin for each of the elements in the gallery. As with the container as a whole, each of these will need to use a percentage so they adapt to changes in the viewport size.

As a starting point, I’d like to use a five column design. To figure out the math necessary to pull this off, it’s easiest to start with the margins. I want a four percent margin between each column, so multiply that by five columns and we know that twenty percent of our width will be eaten up by margins, which leaves eighty percent for content. Eighty percent divided by five equals a sixteen percent width for each column.

Now we can add these values to the CSS that we’ve already established. Each .galleryItem class represents one column, so each will have a width of 16% and a margin of 2% on each side for a combined total of 4% per item.

.galleryItem {
	color: #797478;
	font: 10px/1.5 Verdana, Helvetica, sans-serif;
	float: left;	
 
	width: 16%;
	margin:  2% 2% 50px 2%;	
}

This gives us a perfect five column layout that looks great on screens that are 13-inches or larger.

Where It Gets Ugly

Unfortunately, this layout really starts to suck as we reduce out page size. By the time we’re under 500px wide it has completely lost its readability and usefulness.

To address this problem, we’ll use media queries to insert some breakpoints that will reflow the columns to a more appropriate size.

Deciding On Breakpoints

There’s been a lot of discussion lately on which breakpoints you should aim for in your design. The market is saturated with different devices all at different sizes, and it’s not easy to account for all of these specifically.

To simplify this task, let’s scrap our thoughts about what size screen the most popular devices have and let our design itself decide where the breakpoints are. If we analyze the points where our layout breaks down, we can fix those specific areas, thereby making our design look good on every conceivable device (our fluid grid takes care of the in-between).

Where Does It Break?

The best way to test this is just to open our live preview in a browser and start reducing the window size. Technically, our layout will never break because it’s built to scale. However, at around 940px, the columns of text start to become far too narrow for my liking:

To account for this, I need to bring the column count down to four instead of five at that point. By reducing our column width to 21%, we can do this very thing. Since I’m using both “max-width” and “max-device-width” here, the design will reflow on both desktop browser windows (at this size and lower) as well as any devices with physical screen sizes under this width.

@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
	.galleryItem {width: 21%;}
}

Adding in these styles fixes this problem up nicely. Our five column design now works perfectly from full size down to 940px, at which point it turns into a four column design.

Lather, Rinse and Repeat

At this point, you just repeat this same process over and over. Keep reducing the window size and watching for a point where the design no longer functions well. I quickly find another problematic area around 720px:

This time we want to bring the design down to a two column design, which is done with a column width of around 29.33%.

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
	.galleryItem {width: 29.33333%;}
}

I continued this process all the way down the the point where I only had one column right around the size of the iPhone. Here’s the full set of media queries.

/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
	.galleryItem {width: 21%;}
}
 
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
	.galleryItem {width: 29.33333%;}
}
 
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
	.galleryItem {width: 46%;}
}
 
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	.galleryItem {width: 96%;}
	.galleryItem img {width: 96%;}
	.galleryItem h3 {font-size: 18px;}
	.galleryItem p, {font-size: 18px;}
}

Conclusion

There we have it. You should now have a nicely formatted responsive thumbnail gallery that looks great on just about every device and browser window size.

Instead of thinking about which media queries are the most popular, we instead analyzed the points where our specific design ceased being functional and reduced the number of columns at that point to make for a better reading experience. The result is a design that excels in the in-between.

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?

Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation.

This article then is an extension of that previous discussion. We’ll be using multiple backgrounds to create a cool cinematic effect where someone traverses a map while the vantage point zooms out. The best and most nerd-tastic way to show this off is of course to use the familiar tale of Frodo crossing Middle Earth to arrive at Mount Doom in Mordor. 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

The basic idea for this hover effect is simple. There’s a container with two different backgrounds. The one on the bottom of the stack fills the entire container, the one on the top of the stack is much smaller. On hover, the full bleed image (which actually extends well beyond the container) moves left while the small image moves right. This is a super fundamental animation technique that makes it look like the subject is moving through the scene.

To make things even more interesting, I want the scene to start on a zoomed in view of the subject and then pan out to view the landscape as a whole.

Why Middle Earth?

The most practical use that I could think of for this idea was to show someone moving across a map. This is a pretty typical use case. Whether your company just changed locations or your family just went on vacation, you’ll find it pretty easy to come up with a decent excuse to implement a fun map animation.

Now, given that I’m a huge nerd who is completely excited about the upcoming film, “The Hobbit,” my mind immediately jumped to a scene from Middle Earth. Consequently, today’s project evolved into a hat tip to the last cinematic hobbit journey. Feel free to make fun of me in the comments, after seeing the demo, my wife ensures me that I deserve it.

Why Multiple Background Images?

Could we do this same thing with images dropped into our HTML? Yep. Would it give us even more freedom to manipulate the images? You bet.

Then why don’t we use HTML? Because the entire point of the exercise is to learn how to wield multiple background images in CSS, that’s why! One day you’ll be forced to code something with multiple background images and you’ll fortunately know all about them.

See It In Action

Before we start building, let’s get a look at what we’re trying to create. Click below to check out the finished product.

Demo: Click here to launch the live version.

Getting Started: The HTML

This experiment uses all CSS with minimal markup. All you really need for the entire project is a single empty div. That’s it!

<div id="middleEarth"></div>

Obviously, you can add text and other objects to make the item more complex but for today’s purposes, this is all the HTML we need.

Size Up the Div

Before proceeding with anything else, we need to decide on a size for our div. This will influence all the rest of our decisions. I chose a good sized rectangle: 500px wide by 375px tall. I then centered it on the page and dropped it down from the top of the page by 20px.

#middleEarth {  
  width: 500px; height: 375px;
  margin: 20px auto;
  border: 3px solid white;
}

Prepare your Images

To follow along, you’ll need two images: a map and a subject. You can use anything you like but I chose the two images below for reasons already explained:

My Middle Earth map is fairly large: 1000px by 750px and my Frodo image is fairly small: 100px by 100px.

Plan the Animation

Now that we have our images, we need to think carefully about what it is that we’re trying to do. Obviously, Frodo starts his journey in The Shire, so we’ll need to zoom in on the Northwest quadrant of the map and position the small image somewhere in that area.

He then makes a journey to Mordor, which is in the Southeast quadrant, so we want Frodo to move down and to the right in a diagonal line. At the beginning of the animation, we want to be zoomed in on The Shire but at the end of the animation we want to see the whole of Middle Earth. Here are the two states for our map size:

• Beginning Map Size: 1,000 by 750 pixels (full size)
• End Map Size: 500 by 375 pixels (the div size)

Frodo will also need to change size since we are zooming out. Since the numbers above worked out to perfectly cutting the image size in half, we’ll follow suit here:

• Beginning Frodo Size: 100 by 100 pixels (full size)
• End Frodo Size: 50 by 50 pixels (half size)

We’ll also need to position the images, but that’s easier to do on the fly as we insert them so let’s proceed to that step.

Insert the Images

Now it’s time to toss the images into our div. The great thing about using multiple backgrounds is that you don’t need any crazy vendor prefixes, you don’t even really need to learn new syntax, just drop one image in like always, insert a comma, then toss in another image.

Here I’ve thrown in some line returns for clarity. They add in extra space, but help keep the code readable. Keep in mind that the stacking order in the code will represent the stacking order in the live version. Here the map is on the bottom and the subject is on top, which is exactly what we need (this is all in the #middleEarth selector).

background:
	url('frodo.jpg') no-repeat,
	url('middleearth.jpg') no-repeat;

Here’s what this gives us:

The good news is that the map is, by default, positioned with the top left as its origin, which is exactly what we want. The bad news is that Frodo is positioned the same way so we’ll need to move him over to The Shire to start.

To position the Frodo image, simply add in a horizontal and vertical position after the “no-repeat” bit. The best way to do this is just to experiment and see what works. I came up with 150px 150px, which puts him right next to the label for The Shire.

background:
	url('frodo.jpg') no-repeat 150px 150px,
	url('middleearth.jpg') no-repeat;

Our initial setup is now right where we want it to be.

Applying Separate Image Sizes

To make sure the animation works poperly, we need to make sure we get a few key things right. One important step is to declare our background image sizes.

These aren’t necessary at first as we’re simply using the default size, but we can’t animate the change without explicitly stating the starting and stopping parameters. We simply use the background-size property with and throw in a comma to separate the values. Just as with inserting the images, we can uniquely manipulate the corresponding properties of each image using a comma.

background:
	url('frodo.jpg') no-repeat 150px 150px,
	url('middleearth.jpg') no-repeat;
background-size: 100px 100px, 1000px 750px;

Hover Styles

On hover, Frodo needs to set off to Mordor as the map begins to zoom out. We’ve already figured out most of what we need to do this. This time our background sizes need to be 50px by 50px and 500px by 375px (shrinks Frodo, zooms out to show full map). Also, we need to move Frodo way down to Middle Earth so we crank up the horizontal and vertical shift to 400px and and 240px respectively.

#middleEarth:hover {
  background:
    url('frodo.jpg') no-repeat 400px 240px,
    url('middleearth.jpg') no-repeat;
  background-size: 50px 50px, 500px 375px;
}

This puts good old Frodo right in the heart of Mordor.

Final Step: The Animation

Now we have our starting point and our stopping point all set up, all that’s left is the animation. Of course, we’ll use CSS transitions for this. CSS keyframe animations would be much more fun and would allow us to do lots more (like make appropriate stops along the way), but they’re not as widely supported so we’ll have to stick to transitions.

On hover, I want the journey to be nice and long, about five seconds. When you stop hovering, the animation should reverse back to where it started. However, I want it to be much quicker here, about one second.

To accomplish this, we need to set up two separate transitions. The first one goes in the #middleEarth selector and is set to one second. Oddly enough, this will control the mouse-out animation. The second transition goes inside the #middleEarth:hover selector, this controls the mouse-in animation.

Here’s our completed CSS, which shows everything you need to make it all work:

#middleEarth {
	width: 500px;
	height: 375px;
	margin: 20px auto;
	border: 3px solid white;
 
	/*Background*/
	background: url('frodo.jpg') no-repeat 150px 150px, url('middleearth.jpg') no-repeat;
	background-size: 100px 100px, 1000px 750px;
 
	/*Mouse Out Animation*/
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
 
#middleEarth:hover {
	background: url('frodo.jpg') no-repeat 400px 240px, url('middleearth.jpg') no-repeat;
	background-size: 50px 50px, 500px 375px;
 
	/*Mouse In Animation*/
	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease;
	-o-transition: all 5s ease;
	-ms-transition: all 5s ease;
	transition: all 5s ease;
}

Conclusion

With that, we’re all finished! You should now know a ton of great stuff about using multiple backgrounds: how to apply them in the proper staking order, position them independently and animate each image’s size and position.

Be sure to take another look at the demo to see the project in action and let us know what you think in the comment section below.

Bootstrap is an interesting framework or “toolkit” offered up to developers completely free of charge by none other than Twitter.com. According to Twitter, Bootstrap is “designed to kickstart development of webapps and sites.”

Today we’re going to jump into Bootstrap and take a quick look at some of the things that it has to offer. This should help you decide whether this is just another bloated framework or an incredibly useful tool that you should use to kickstart your next project.

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

What Can You Do With Bootstrap?

Bootstrap is sort of a Swiss Army Knife for developers. It’s simply loaded with tools and utilities, some of which you’ll find extremely useful, others you’ll never touch.

The real goal behind Bootstrap is to save you time. Twitter has done the heavy lifting for you by researching and implementing some of the best ways to perform various tasks. They’ve also taken several steps towards applying solid basic styles to various commonly used elements.

Should you take this as it is and turn your critical brain off during development? Absolutely not! You should dig in, find what you like and ditch or change what you don’t. Bootstrap is specifically built to handle customization in many cases so feel free to go nuts and make it your own.

Getting Started

If you want to implement some of the styles we’ll be working with on the fly, you can simply hotlink to the Bootstrap CSS file like so:

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">