If you’re a front end designer, presenting clients with mockups can be tricky. Emailing files can be cumbersome and lead to unwanted questions about how to view the image properly, and many image sharing services aren’t ideal for viewing full-size website mockups in their proper context.

Today we’re going to take a look at QwikVu, a web app that’s specifically built for designers who want to share web design mockups with clients. Is it the tool you’ve been looking for to make client presentations easier? 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.

Meet QwikVu

The QwikVu homepage above sums up the service in a nutshell. Here you can sign up to try the service free for 30 days. This is a great way to kick the tires and test it out with a few clients to gauge its effectiveness.

Sign up for the service is quick and painless, you just need a name, email address and password and you’re up and running. Let’s take a look at what happens after you’ve signed up for an account and log on for the first time.

We’ll be going through the Pro plan today but there’s also a basic free service that allows you to upload and share individual images. Obviously, some of the more advanced features such as checking in to see if a client has viewed the mockup are reserved for the Pro service.

Setting Up a Gallery

When you sign into QwikVu, you’re greeted with a simple dashboard. Here you can view your client list, adjust your account information and access your galleries. I haven’t set any galleries up yet so there’s a brief message inviting me to do so.

Like pretty much everything in QwikVu, setting up a new gallery is a really simple task that will only take you a few seconds. There’s a lovely form that walks you through the process, asking for basic information like your client details and the title of the gallery.

As you can see, there are some really great advanced features here as well. You can choose a custom URL for the gallery, password protect it, assign a custom background color and choose how the images are aligned in the browser window.

Adding Images

Once you’ve set up a gallery, it’s time to add in some images. You can toss them in one at a time or grab them all in one upload. Once you’re finished uploading, the screen below allows you to rearrange, preview and edit each image.

Sharing a Gallery With a Client

Once you’re ready to share a gallery, click the “Finished” button in the screen above to go back to the gallery view. Here you’ll see a list of all of the galleries that you’ve created. On the right side of this list, there’s a strip of buttons and information. You can check to see if the client has viewed the gallery, see it for yourself, edit the images, etc.

The button we’re looking for right now is the “share” command, represented by a little envelope icon.

Clicking this image will bring up what is essentially an email window. Most of the contents is filled in for you automatically but you can customize all of it to your liking.

Once you’re finished, click the “Share” button and the email will be sent off to your client. Your work is done, now all you have to do is wait for the feedback!

Client Reviews

Once you’ve sent out the invite, the client will receive a simple, text-only email that contains your custom message along with a link to view the gallery. You don’t have to worry about whether or not they know how to properly view the file, it’s a fool-proof process where a single click gets them what they want to see.

The invite link opens up the gallery in a browser. Your settings before have defined the display behavior here. For instance, my image is shown centered on a pure white background. It looks and feels just like a website: I can scroll up and down and the image stays centered as I resize my browser window. You can see my example gallery here.

To make sure there’s no confusion with your clients, there’s a little information box that pops up when you click on the image that informs you about the nature of the mockup. You are told that the image merely represents a design so the buttons and links will not function.

The bar that you see at the bottom allows you to scroll through the images in the gallery, share it with someone else, and download the files.

You can also view the images in a thumbnail strip for easy navigation. Just click the little grid on the left side of the toolbar and you’ll get something like the window below.

Viewing On The Go

Odds are your client is going to receive that email and want to check it right away. If he/she is out of the office and on a mobile device, the viewing experience is optimized and shown in an online image viewer with a quick message to explain that it’s a non-functioning mockup.

The above image shows what the gallery looks like on my iPad. You can swipe back and forth between the pictures or view an automatic slideshow.

Worth a Look?

When the good folks at QwikVu asked us to take a look at their service, we were happy to oblige. It’s a great app that serves a clear purpose and works like a dream. The interface is quite attractive, the UX flow is so simple that anyone can manage it and everything works exactly as advertised.

QwikVu really is a great way to show off your flat mockups to clients. I love having the ability to display work centered in the browser at full size, just like I want it to be. Your clients will definitely appreciate the privacy side, password protected mockups are sure to give them a warm fuzzy feeling knowing that their secrets are safe from prying eyes.

Pricing

QwikVu is $9.99 per month or $99 for a year. To be honest, this is where things get a bit rocky for me. It’s a great app, but a hundred bucks a year for what amounts to slightly modified image hosting is going to be hard for a lot of web designers to justify, especially when they likely already have personal web hosting where they can upload their images.

Fortunately, there is a free component so if you do in fact get some great functionality for nothing. However, I would recommend augmenting the $9.99 plan with some awesome additional features such as the ability to define portions of the uploaded images as clickable links to make the mockups functioning wireframes.

Further, I think with a system like this you simply have to have means for client feedback (another great option that could be only on the premium plan). When a client views a mockup, it would be great if there were some sort of sticky notes feature that allowed for specific portions of the mockup to be targeted and discussed. I know the point here is to keep it simple and fight feature bloat, but simple and direct change requests could be implemented without adding too much complexity. There’s even an example page that unintentionally showcases how this system might look!

Conclusion

If you’re currently on the lookout for a better way to show off your non-functioning mockups to clients, QwikVu is a great solution. The result is far better than emailing a JPG, you really feel like you’re looking at the beginnings of a website in your browser. I highly recommend that you stop by the site and give the free trial a test run.

Have you tried QwikVu or any other service? Let us know your thoughts in the comment area below.

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.

Peruse the options below and download your favorites, then feel free to leave a comment to let us know what you think.

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

Poly – free web font

Accent™ Free Display Typeface

Otama e.p. Typeface

Mosaic Leaf Free Font

Bigmouth Font

Bispo free font

Sketchetik (FREE)

Infinity

Kilogram

Origram Free Font

Adamas Regular – Free font

PLSTK – Free Font

Manteka

Lorena —Free Font

MOLESK font (free)

Five Minutes / Free Font

Glide® Font

Deibi v1.0 – free font

Novecento font family: 32 styles, 12 Opentype features

GRN Burgy [Free Download]

CODE free font

Tetra

Free font VAL™

Hexa (free font)

Urbe – Free Typeface

Tall Boy

Construthinvism – Free Font

Typeface Adec2.0 (free)

Absinthe – Free Font

Dekar free font

Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

30 Amazing Free Fonts from Behance: http://goo.gl/ox9dI

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?

This is the third part in our series all about making fun of design related clichés that drive us all crazy. We’ve already picked on designers plenty with 5 Former Design Trends That Aren’t Cool Anymore and 5 Cliché Logo Design Trends to Avoid, now it’s time to turn around and give some attention to all the crazy things that clients say to their designers.

We put out the word on Twitter and asked for some of the worst things that you hear again and again from clients. The following are some of our favorites.

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

Make It Pop

“Make it pop” has to be the most cliché overused line in design history. I’m not sure who decided that this is the best way to request more emphasis on a given element, but somehow it made its way into the official client handbook.

I swear, some people are convinced that there is a big fat “POP” button in Photoshop just waiting to be pressed. “You mean you didn’t press the pop button? Back to your lab minion!”

One of the biggest problems with this phrase is how most clients want the “pop” to be executed: via a burst, crazy ugly colors or some stock photo that has zero relevance to the communication in question. If you absolutely must tell your designer that you want something to pop, at least consider letting him/her decide how that goal should be accomplished.

Let Your Creative Juices Flow

Seriously, can you think of a more ridiculous thing to say to a designer? I submit that there isn’t one. What are these juices and why are they so… juicy? It’s as if we expect designers to begin secreting some strange, fruity liquid that upon application turns boring old Helvetica into something more exciting like Comic Sans. “Go go gadget creative juices!”

I’d even go a step further and say that discussing someone’s juices sounds more like sexual harassment than creative feedback. Say this a few times to your designer and the only thing that will be flowing is the copious amounts of alcohol he or she has to consume to forget that you ever uttered such an abomination.

Feel Free to Just Be Creative

Designers love it when you tell them to be creative, seriously, do it every chance you get. While you’re at it, the next time you get in a cab, tell the driver to feel free to just… drive.

The assumption here is that you have to give a designer permission to do something creative. Isn’t that what you hired them for? If you neglected to provide this nugget of wisdom would the designer cease all creative juice secretion and provide you with a Word Document set in Times New Roman?

Take It To The Next Level

Feedback like this is as much the fault of designers as it is clients. Too many designers become so emotionally connected to their work that they simply can’t handle criticism without feeling like they’re undergoing a personal attack. As a result, clients have had to resort to “nicer” ways to tell us that our work sucks. “This is great, but let’s take it to the next level.” Translation: “I don’t like it.”

“Take it to the next level” is an empty phrase to designers (plus, it sounds like you’re asking to move in). They’ve given you their best guess at what you want, now it’s time to say exactly what’s not working and why so you can avoid thirty rounds of guessing game artwork changes. Give open, honest and professional feedback that cuts to the heart of the issue. If your designer can’t take it, then it might be time for a new one.

This Project Will Get You Great Exposure

There’s nothing better than a client trying to convince you to take a low or even nonexistent rate because the project will surely earn you some great exposure or provide an awesome portfolio piece. While you’re at it, the next time you go into a restaurant, ask the chef to make you some free food in exchange for you telling all three of your close friends that it was delicious.

There are in fact some projects that are worth it solely for the exposure they provide. The best part is though that those types of clients always have a nice big budget!

This Project Will Lead to Paid Work

Once again, I beg you to go and try this with any other product or service. Perhaps I’ll walk into the Apple Store and ask for a free iPad with the guarantee that if I like it, I’ll actually purchase some Apple products in the future. Somehow I don’t think the folks at the Genius Bar will go for it.

For some reason designers exude some sort of “sucker” hormone that attracts penniless zombies looking for a free meal. The reality here is basically the same as the last time, if you don’t have any money, you can’t hire a professional. It’s simply a matter of respect. If you really stop and think about it you’ll no doubt realize that designers are real people trying to pay their mortgages and put food on the table for their families. Empty client promises don’t buy Happy Meals.

I’ll Send You a Fax

Sorry McFly, I don’t know what time warp you just stepped out of but turn down the Walkman and look around. No one uses a fax machine anymore. In fact, if you’re working with a freelance designer, there’s a good chance that they don’t even have a working phone line in their house.

Email is fast, instant and free. If you need to send signed documents, use a scanner or your computer’s camera. If you refuse to purchase a scanner, then you’ll completely understand when all of the designers that you approach refuse to purchase a fax machine.

We Want It To Look Exactly Like This Website

It’s amazing how poorly this knowledge is disseminated in the general public, but designers aren’t actually supposed to just rip off the work of others. It seems simple enough right? You only have to take the color scheme, layout, buttons and graphics from this website, we can put our own logo on it and it’ll be different!

As Curebit just found out after stealing the Highrise site from 37signals, this strategy doesn’t work out so well in the long run and can lead to some massive PR headaches.

Make The Logo Bigger

This one is so popular that it has spurred countless Internet memes, from Make My Logo Bigger Cream to the Make the Logo Bigger Song.

I’m not going to tell you that there is never a case when your logo needs to be bigger, because such instances do exist, just know that if you request it, your snarky designer is likely to send you back one of the links above.

It Won’t Take Long

For some reason, non-designers often imagine that they are qualified to make accurate time estimates for how long a design project will take. Experienced designers long ago learned to ignore any late night client phone calls because they inevitably lead to a request for a quick fix to a website or brochure. Five hours and nine phone calls later as the sun is rising the “quick fix” is finally wrapped up in time to start a new day of work.

Even worse than the quick changes to existing projects are the judgements received when a designer tells a potential client just how many hours of work to expect on a project. “It’s just a logo! You’re a professional, I don’t see why this should take you more than an hour.” Some clients are convinced that logos just pop out of Adobe Illustrator if you know the right keyboard shortcuts.

What Do Your Clients Say?

It’s always fun to gather around the metaphorical water cooler and jest about the lighter side of our profession. Join in the fun and leave a comment below with some of your client horror stories. Have you heard any of the phrases above lately? What other client clichés can you think of?

Almost. It seems innocent enough right? Surely there’s no evil lurking in those six letters. You might even see this as a positive word. However, as a designer, you should always be on guard when this word can describe certain aspects of your work.

Read on to see why “almost” can be a dirty word and how it just might be bringing down the quality of your work. We’ll also take a look at two underlying foundations of good design that provide ready solutions to solve your “almost” design woes.

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

Secrets Hidden in Plain Sight

Design is an interesting topic. It’s something that, by definition, has to be innate and intuitive to a certain degree. Effective design is pleasing and logical to the beholder, so in theory, designing for mass appeal should be something that almost anyone can do because it leverages our common ideas towards aesthetics and information organization.

The fascinating thing is, finding and identifying those commonalities is a lot more difficult than you’d think. Lots of people know good design when they see it, but they lack the fundamental design education to point out exactly what separates the good from the bad, or even more to replicate the good design practices in their own work.

This type of information, the simple bits of knowledge that are hidden in plain sight, is my absolute favorite topic to explore. This discussion will cover just such a concept. One so simple that absolutely anyone can understand it, yet so secret that I see countless people, from laymen to professional designers, completely miss the mark with this principle on a daily basis.

Almost The Same Is Awkwardly Different

Enough suspense, why in the world, you ask, is “almost” a dirty word in design? It seems harmless enough right? Instead of telling you why it’s dangerous, let me show you.

Alignment & Size

The inspiration for this piece was a website that I was recently asked to critique. The design featured an image with a button below it that looked something like the one shown below:

When I look at this example, I immediately see a case where “almost” is wreaking havoc on the quality of a design. This is more clearly illustrated if we add in some guides:

As you can now clearly see, the button is “almost” the same size as the image, but not quite. This causes some conceptual dissonance and can even be a distraction:

“Did the designer intentionally make the two objects different sizes? It’s difficult to tell. Maybe this is a mistake! Surely the two are meant be the same size.”

Your user has now been thrown off course and instead of focusing on your content is now wondering whether or not you screwed up. Now, some might disagree and say that the above example is an alignment issue and not a size issue, the button should simply be aligned to the center:

Admittedly, this helps. When size discrepancies are present between two simple objects, a center alignment can prove useful. However, I still see the same problem. The two objects are too close in size.

The key to solving this problem is to ask yourself why you made the two objects a different size to begin with. If it’s an accident, then you’re simply being sloppy with your dimensions. However, if it’s an intentional decision meant to add differentiation, then attack this goal with new fervor and actually make the two objects look different:

There’s no doubt when I see this example that the button is actually supposed to be smaller than the image. Similarly, if you don’t really have a need for the difference, then just make the two objects the same width:

My point is, it’s up to you to decide whether or not the objects merit differentiation. Just make sure that if they do, you don’t wuss out and make them slightly different. Go big!

Typography

There are several places where this principle proves true in typography. The first that comes to mind is once again a size issue. The most common place that I see this arise is when a headline and paragraph look something like this:

Here again we run into the trouble that “almost” brings us. The body copy is “almost” the same size as the headline. Sure, you can tell that they’re different but it’s not something strong enough to really help present a clear informational hierarchy. When we drop “almost” and go big, the result is much better:

This image illustrates that there are other factors to consider as well, such as boldness. Consider the following example, which compares a minor difference with a major one:

Notice how the word “Big” is bolded in the first example, but the result is still so subtle that it’s ineffective. “Big” is almost the same as the rest of the sentence. By now we know that if this statement can be said, we need to be a little more extreme. In the second example, I made the typeface even bolder, then use all caps on the word and enlarged the font.

The same goes for the style of typefaces that you select. In this next example, I’ve implemented two different typefaces in an attempt to add some variation to my headline: Garamond and Trajan.

As you can see, these typefaces are so similar that they’re difficult to differentiate between. Do you think a non-designer will spot the difference between the two? I made the example and I can barely spot it!

This example is probably a little extreme, I’m sure you wouldn’t choose two fonts this similar. However, it drives home a point that is constantly missed by real world designers. Make sure your typefaces are never “almost” the same. Try varying the serif choice, boldness, etc. Take something simple and mix it with something more complex. The result is much more aesthetically pleasing:

The Underlying Principles

I could go on and on, but I’m sure you get the point. You can apply this idea to any area of design you choose. The basic idea is that “almost” is dangerous. Any time you find yourself approaching “almost,” just remember that it typically leads to average results. No designer should want to produce average work!

By now, faithful Design Shack readers have realized that I’ve tricked you into reading yet another post on contrast. Yep, this whole concept can be boiled down to that one magical word. Contrast is one of the main pillars of good design and learning to wield it properly will make you an infinitely better Designer.

The information here simply frames the idea of contrast in a different way that might or might not make the topic clearer for you: Different is good, almost different is bad.

This goes even deeper than that as well. Notice that the first example with the button presented an alternative that suggested making the two objects exactly the same width. This is of course the principal of repetition. When contrast doesn’t seem appropriate, repetition is your best bet.

Conclusion: Be Careful with Almost

Keep in mind that there are in fact plenty of legitimate uses for close similarities in design. For instance, subtle variations of a color can provide a nice and simple color scheme. However, even in this scenario you don’t want the two to be so close that no one can tell them apart.

The message here is not to completely avoid the “almost syndrome” all the time but merely to take caution when designing anything that approaches it and to ask yourself whether the result you’re going for can be better achieved with contrast or repetition.

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.

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Income Diary, a blog that offers simple, practical advice for how to earn money online. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Income Diary

“I launched IncomeDiary back in 2009 after a conference I attended in Washington DC in March that year. Before this, I had been running websites successfully for around 4 years and one of the major things I took away from meeting like minded entrepreneurs was, you got to give back! This is what this website is all about, educating and helping internet entrepreneurs, no matter what level they are.”

Here is a screenshot of the homepage:

First Impression

Income diary isn’t breaking any barriers in blog design. It’s a very straightforward design that utilizes a layout seen on a million other blogs around the web. Is this a negative thing? Not in the least. In the same way that newspapers eventually all fell into a similar and predictable format, it’s perfectly natural that blogs would land on a few standard layouts that work well.

The benefit is that new visitors are immediately comfortable with the format and know how to get around from the second the site loads. Innovative layouts are great too, but there’s a common misconception in design that something that isn’t innovative isn’t good, and that’s simply not a true statement.

That being said, there are a lot of solid design choices made on this site. Aesthetically, it doesn’t blow me away, but it is fairly attractive and functionally solid. The primary question that I always ask for any design critique is, “Does the design accomplish its purpose?” In this case, think the answer is yes if the purpose is to successfully educate people on how to make money online. Let’s explore why this is true.

Color Scheme

If you’re familiar with our design critiques, you should already know what I’m going to say about this color scheme. It uses the simple color scheme trick that you almost can’t go wrong with:

First, the designer chose a main color, in this case green. Green is a solid choice, not because of anything aesthetic but because of the psychological correlation that we inevitably make: green = money. This site is about making money so there’s no color more appropriate!

Next up, a few different shades of this color were chosen. This provides a decent way to have subtle variation throughout the design: gradients, different header bars, etc. Finally, one color was chosen that complements but stands out from the main color. This technique provides an incredibly safe route to choose a color scheme that is neither monotonous nor overly busy.

Logo

Like everything else, the logo takes a very safe and predictable route. This is something important that is worth discussing. Is this a boring, generic logo? Yep. Is it better than a non-designer attempting to create a complex logo? Absolutely. The bottom line is that not everyone who creates a website is a professional designer. If this is the case with you, don’t feel bad about typing out your website name in a simple manner and calling it a day. One day when you have the budget (though arguably this site should right?), you can hire a professional to create a unique identity for you.

One thing that I think this site needs to rework is the tagline on the logo. It’s simply too thin and tiny and doesn’t read well. A simple solution might just be to increase the size of this line so that it has the same horizontal width as the line above it.

Navigation

The navigation area is a classic CSS nav format with big blocks defining each link. One thing that I’m constantly criticizing designers for in these critiques is link hover effects that are so subtle that you can barely tell that one exists, especially if you happen to be a color blind user. Fortunately, that’s not the case here.

As you can see, the difference between the hover and non-hover states is quite dramatic and can clearly be seen by all users. This may seem small, but small mistakes can ruin a design so it’s important to get this stuff right.

Information Hierarchy

Creating a solid informational hierarchy cuts to the very core of what your goals are in a web design. If you write down all the things that you want to accomplish with a web design, this should always be near the top of the list.

One of the most solid aspects of this design is how all of the information on the page is structured. For instance, notice that the most recent post in the home feed is given more visual importance than the other posts in the form of a larger preview image.

We use this same trick on the Design Shack homepage to an even greater degree. It’s a bit subtle on Income diary and I would even suggest that the designer find an additional way to make it stand out even more (different background color, larger headline, etc.).

There’s yet another level of differentiation as well. As you scroll down the post list, there’s a section with a few products that you can purchase. This is where that other color comes in that we discussed before:

This content is thrown into a nice minimal box with solid text and image layout and plenty of whitespace. It’s a great way to set this content apart from the main feed.

Now, though I like the design of this little box area, I’m a perfectionist so there’s one thing that drives me crazy:

The button below the product preview is almost the same width as the image above it, but not quite. It’s literally a manner of a few pixels but I can’t help but be distracted by it. Either make it the same width or make it much narrower, anything else looks like a mistake.

Footer

We’ll end this critique off with a quick look at the footer, simply because I like the way it looks. I love how the content breaks the footer line, the transition from gray to white when you hover over a link, the clean, minimal presentation of the social icons, and the oh so subtle hint of texture behind the logo. In my opinion, this is the best looking part of the site. A strange conclusion to be sure, but I’m just a big fan anyone that doesn’t slack off and toss on an ugly footer as the last step of a design.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Business cards are an awesome creative outlet where designers tend to push themselves to come up with unique and interesting solutions. If you’re a newbie to business card design though it can be difficult to break out of the cliché unoriginal layouts that will no doubt pop into your head. This post of over 15 free layered business card templates should help you out.

As a bonus, we’ve included not only layered business card templates, but a few editable 3D mockup files as well so that once you start creating your own awesome designs, you can show them off in style.

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

Templates

Creative Business Card Vol 3

Seextwood business card by hertzz

Page Curl Business Card

Industrial Business Card Vol 1

Free Modern Business Card II

Business Card Template 2 by An1ken

Free Business Card PSD by robbythedesigner

Free Modern Business Card I

Technix business card by hertzz

Bokeh Card by anderworks

Business Card

Che Guevara Business Card by robbythedesigner

Corporate Business Card Vol 2

3D Mockups

Psd Business Card Mock-Up Vol 1

Free letterpress business card mockup

Free Business Card Mock Up

Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

15 Free Business Card Templates That Don’t Suck: http://goo.gl/blBga

Today we’re going to examine a very specific example of good design and discuss what makes it so successful. Along the way we’ll discover the importance of good design and how to structure experiences that turn users into addicts.

We’ll hone our sights in on Pinterest and perform a seriously in-depth analysis to see why this seemingly generic idea seems to stand so far out from the competition. The ultimate conclusions will equip you to design experiences that your users will absolute love.

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

A Lame Idea

Imagine that I came to you in 2010 with what I thought was a brilliant idea. I was confident that I could make it work and needed only some investors to help get things off the ground.

Being the cautious spender that you are, you ask about my idea. What is it? How does it work? My answer: a social bookmarking site. I’m going to create a website where people can sign up and save links. Cue patronizing letdown. You would no doubt inform me that this idea is anything but unique and is sure to flop. How could I possibly take on Delicious and the other bookmarking giants?

I’ve got a big idea though: I’m going to use images. Users will be able to grab any image from any webpage, save it to their account and share it with others.

Once again, in your best slightly derogatory tone you would inform me to do a Google search for “image bookmarking” and take note of the countless sites such as FFFFOUND! and Ember that already populate this market. You might even direct my attention to a list of 10 popular image bookmarking services, published in 2010, as further proof that my idea was completely unoriginal.

The Not So Lame Success Story

At its core, Pinterest is nearly identical to the concept of the sites in the list above: a simple visual bookmarking service with a strong emphasis on sharing. I can’t help but look at the climate of competition under which Pinterest was born and marvel at how it came to stand out as a clear leader in the category.

So why has Pinterest caught fire lately? If it’s one of countless image bookmarking services, how in the world did it draw over 1.5 million users during a “private” beta? How could it possibly be snagging tens of millions of page views per week and have an estimated company worth of around $200 million?

Why Did It Work?

The secret to Pinterest’s success is incredibly important. In a time where social media is a multibillion dollar industry, a truly successful formula is the holy grail.

There are no doubt several pieces to the Pinterest success puzzle but the one we’re going to focus on today is design. How did Pinterest not only set itself apart with design, but actually surpass what everyone else was doing and create something that engaged users on an entirely new level?

Solving Layout With Diverse Image Sizes

One of the primary aspects that set Pinterest apart from other social image bookmarking services is that they completely rethought how the images should be presented to the user.

The goal is a simple one, you ideally want your users to be able to browse through hundreds or even thousands of images with relative ease. If this action requires too much effort on the user’s part, you lose their interest. If it’s effortless, you keep their attention focused on the content.

One important step in this battle was “masonry” style layout, a fairly recent trend in web development named after the jQuery Masonry plugin. Pinterest uses its own scripts for this, but the concept is the same.

Basically, masonry style layout creates the most efficient utilization of space possible given varying image heights. It overcomes past layout hurdles and takes vertical height into account when laying out the images, thereby creating a super tight, puzzle piece flow of images on the page.

Pinterest wasn’t the only image bookmarking service to try this layout though. Competitors such as Image Spark had also integrated masonry layouts. Obviously, there has to be more to this puzzle.

The Pagination Conundrum

In addition to maximizing layout efficiency without sacrificing image quality from uniform cropping, the Pinterest team was able to identify another underlying problem with existing image gallery formats: pagination is a pain.

Websites love pagination because it increases their page views (more views = more money), but as a user it sucks: scroll down, click the “next” button, wait for new page to load, scroll down and click the button again… then at some point you realize you want to go back and find a specific image or page and you’re left hitting that back button a million times until you find it.

To solve this problem, the Pinterest team looked to infinite scrolling, a neat little trick that automatically loads more content as the user hits this bottom of the page, thus allowing for a fairly uninterrupted browsing process.

Way back in 2008, Paul Irish was creating and distributing infinite scroll plugins. The advice on that site says to use infinite scrolling when:

• Retaining the user is important and clicking “Next Page” is a usability barrier.
• The full content available is too large to show on initial load.
• The content is available in paged chunks: search results, blog posts, product listings and portfolio features.

This perfectly describes the circumstances of a social image bookmarking service, making Pinterest prime territory to implement this technique.

Masonry + Infinite Scrolling = Magic

Masonry style layout and infinite scrolling have melded into a single idea in our head, but they started as two separate technologies. Putting them together, it turns out, creates a truly addicting experience.

If you doubt this for a second, stop by Pinterest and start scrolling. What follows is some strange form of time travel where you stop by the site for a quick peek and out of no where a solid hour has gone by. In this time you forget about user interfaces and controls, you simply absorb the content as thousands of beautiful pictures slide by, controlled by a single flick of your finger.

It’s a truly engaging experience that simply blows away many past user interaction models. It’s interesting to note that the Facebook News Feed, the epitome of website addiction, uses infinite scrolling. Further, the new Timeline pages now combine this technique with a two column masonry style layout. It’s catching on folks, expect to see a lot more of these two techniques in the next year.

Unbeatable Content

Fancy interaction models don’t mean a thing unless you have the content to back them up. In order for Pinterest to really take off, two conditions had to be met: the content had to be great, and there had to be a ton of it.

These two goals are actually conflicting. The best way to get lots of content is to open your site to the public, which is also the best way to ensure that your site is full of crap.

Pinterest chose to stay in private beta for quite an extended period of time, carefully controlling invites. I honestly have no idea how they pulled it off, but the core group of early adopter pinners really set the stage for Pinterest’s identity and quality expectations.

In the early days especially, you couldn’t deny the strong, unique personality that the Pinterest community seemed to have. It seemed that every image on the site was oozing with style. Instead of sifting through piles of garbage to find the gems, you were presented with wave after wave of gorgeous interior design ideas, DIY projects and the like. Which brings me to my next point: a targeted user base.

A Woman’s Touch

Social bookmarking services, for whatever reason, have traditionally been quite nerdy. The visual nature of the service attracts two kinds of people: designers and guys who want to save images of girls that tend to be of a particular variety. Consequently, these services are typically filled with an odd mix of beautiful examples of design and erotic photography. Don’t believe me? Spend twenty minutes on FFFFOUND! and you’ll be a believer.

Pinterest on the other hand, has actually found an audience largely with females. As the user base expands at a rapid pace, people of all types are flocking to Pinterest and “pinning” all manner of content, but the initial base of content was largely Etsy-style material that exuded a feminine style simply not found in other similar services.

Women found Pinterest and used it to save recipes, collect outfits ideas and create lists of home decor products. Pinterest targeted and leveraged this vast potential user base and used it as a foundation for its personality. I talked to a non-techy friend yesterday who is admittedly still “creeped out” when a male user follows her on Pinterest because she sees it as a largely female network.

In the end, this proved to be a very powerful strategy that has paid off with content that no one else can come close to matching. Again though, the folks at Pinterest will have to keep a close watch on their audience and evolve with their user base. Their growth is already taking them from a very specific offering to one that is more general and broad reaching.

A Solid Metaphor That Encourages Sharing

The final thing I want to discuss regarding Pinterest’s success is a little deeper into the interaction model than the surface layout and scrolling techniques. The way that they’ve structured the service’s collection process and social layer is yet another stroke of genius that helps make the service strong.

The metaphor behind Pinterest is instantly understandable and quite catchy to discuss. The idea is that Pinterest is your “virtual pinboard.” You create various “boards” and assign them categories, then use a bookmarklet or the main feed to “pin” items to your boards. Other users can then follow boards from users they like and receive a custom stream of content tailored to their specific tastes.

What people pin has become a hot discussion topic that promises new insight even into the minds of those you already know well. For example, I used my wife’s Pinterest account for gift ideas at Christmas time. It also helps with those you’d like to know better. When inviting another couple over for dinner, my wife checks the other girl’s Pinterest account to see what types of food the couple enjoys.

Making It Easy

We already discussed how Pinterest has created an awesome source for finding inspiration, but in order to get people to actually use your digital content collection service, you have to make the act of collecting and sharing content a nearly effortless task.

One of the ways that they’ve done this (in addition to the bookmarklet) is to pick up the “Retweet” idea from Twitter. Every item in a given stream of pins can be liked, commented on, and most importantly, repinned.

This creates a system where collection is super easy and encourages lots and lots of pinning. There’s even a page describing Pin Etiquette so everyone can learn to play nicely together.

Conclusion

Looking around the web, we encounter countless examples of fantastic ideas that are ruined by poor execution. Pinterest turns this on its head by presenting a fairly generic idea that works extremely well because of its amazing execution.

Pinterest succeeds on several layers of interaction. First, they maximize their content presentation with a masonry like layout and keep you interested for hours on end with infinite scrolling. Next, they carefully targeted and crafted a very specific user base that was both a huge potential source of users and a fairly untapped market in this space. This led to a solid foundation of daily content that defined Pinterest’s very identity. Finally, underneath it all is an instantly understandable metaphor and sharing platform that is wickedly viral and incredibly easy to pick up and use.

All of these factors together create a winning formula for an undeniably addictive user experience. Whether you personally love it or hate it is irrelevant, the truth is that Pinterest is turning heads and dramatically increasing in corporate value. It therefore serves as an important lesson that you as a designer simply shouldn’t ignore.

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?

Didone typefaces (also known as Moderns) are a particularly classy type of font that is characterized by heavy contrast between the thick and thin portions (the vertical parts are thick) and typically very thin, unbracketed serifs. They’re a lot like slab serifs that want to be upscale and fancy.

This particular classification of typeface is one of the rarer breeds to find in the free font world so be sure to take all you can get. Today we’ve got a great little collection of six beautiful and free Didone fonts for you to download and enjoy.

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

AW Conqueror Didot

Bodidota

Theano Didot

Otama e.p.

Villa Didot

Dubiel Plain

Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

6 Sophisticated and Free Didone Fonts: http://goo.gl/YU3hj ]]> http://designshack.net/articles/freebies/wf-didonefonts/feed/ 1