Advertise here with BSA
The popular design network Dribbble has grown substantially in just a few short years. Graphics designers and illustrators from all over the world have flocked onto the web seeking invites. But aside from the exclusivity their layout design has become a prominent factor of the entire branding.
I love the simplistic nature of their gallery-style photo boxes. It matches well with a community of designers excited to share their latest pixels with the world. In this tutorial I’ll go over techniques for constructing a similar design in HTML5 and CSS3. You can build a very similar page structure with just bare-bones essential CSS. Yet when we can utilize new browser-supported properties like box shadows the process becomes much more captivating.
Live Demo – Download Source Code
Starting in HTML
To begin let’s build the default HTML template so we have a starting point to work with. The basic HTML5 construct requires a simple doctype declaration. In the code below I’m also including some meta tags along with an external CSS stylesheet.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dribbble-Styled Homepage Demo - SpyreStudios</title>
<meta name="author" content="SpyreStudios">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
If you notice we don’t need to close the link or meta tags anymore. The syntax <link rel="stylesheet" /> is still valid with a forward slash at the end. However it’s not required in HTML5, so this will save you a bit of typing.
Now let’s move on to building the core body page. I’ve slimmed down the template a bit to include only the header navigation bar along with the notorious thumbnail display. In the top portion I’m isolating the navigation with HTML5′s nav element. We need to use this as a container since the background will span the entire width of the page. However our inner content is set inside a wrapper limited at 710px wide.
<nav>
<div class="wrap">
<ul id="menu-l">
<li><a href="#">Shots</a></li>
<li><a href="#">Explore</a></li>
<li><a href="#">Designers</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">About</a></li>
<li class="floatr"><a href="#">Sign in</a></li>
</ul>
</div>
</nav>
The rest isn’t too exciting, just a simple unordered list of navigation links. Dribbble actually has the sign in link floating off to the right side pushed up next to the search bar. For this I just created a class .floatr to append onto the list item.
Building our Thumbnail Display
Now directly underneath the navigation section I’ve created another div wrapper. This holds a sub-navigation menu with inactive links to sort through the many different shots. I also included a copy of the small heading text displayed on Dribbble’s featured section.
<ul class="subsortnav">
<li><a href="#" class="sel">Popular</a></li>
<li><a href="#">Everyone</a></li>
<li><a href="#">Debuts</a></li>
<li><a href="#">Playoffs</a></li>
</ul>
<h2><strong>What are you working on?</strong> Dribbble is show and tell for designers. <a href="#">Sign up as a spectator</a></h2>
Now let’s take a quick look at how I’ve setup the shots gallery. Each row displays 3 different shots measuring about 220px in width. The formatting is held inside an ordered list with each new shot attributed inside a list item.
This can get a bit tricky since we’re working with more than just plain text. But HTML lists were built for much more than just navigation menus. And certainly this dribbble gallery is one such example. Check out my code below and we can break down each segment individually.
<ol class="dribbble clearfix">
<!-- @teaser #001 -->
<li id="screen-1" class="group">
<div class="shot">
<a href="http://dribbble.com/shots/393501-Ampackaging"><img src="shots/01_teaser.jpg" /></a>
</div>
<span class="meta"><a href="http://dribbble.com/55His"><img src="photos/55-hi.png" class="avatar" /> 55 Hi's</a></span>
</li>
To make recognition easier I’ve given each list item an ID of “screen-#” starting at 1. Inside are two different block areas – a div containing the shot image along with a span underneath for the author’s name and avatar photo. Much of the internal HTML looks exactly the same within the OL element. So now let’s turn our focus onto CSS markup.
Styling the Page
Inside my example style.css you’ll find each of the code blocks split into segments. At first I’m doing some formal browser resets to remove margins and padding, along with re-setting font sizes to the traditional 1.0 scale. By that I mean the 62.5% value creates a ratio of 1.0em = 10px and all font sizes/line height values are even.
/** default styles **/
* { margin: 0; padding: 0; }
html { height: 101%; }
body { font-family: Arial, Tahoma, sans-serif; font-size: 62.5%; line-height: 1; background: #eeeeee; }
a { color: #5484a7; text-decoration: none; }
a:hover { text-decoration: none; color: #356080; }
Such an interesting part of our CSS is handling each dribbble box display. The ordered list element is given a class of “dribbble” and each internal list item holds a shot image and author details.
If you notice I’ve included a secondary class .rowstart on some list items. This is applied to each shot starting on a new row. In this case ID numbers 4, 7, and 10. The class will just clear everything from the previous row so we know the next three boxes will display properly. Also worth noting are some of the slight margin fixes I’ve applied to the author avatar image.
ol.dribbble { list-style: none; }
ol.dribbble li { width: 220px; height: 210px; margin-right: 15px; float: left; }
ol.dribbble li.rowstart { clear: left; }
ol.dribbble li span.meta { font-size: 1.2em; display: block; font-weight: bold; padding-left: 6px; }
ol.dribbble li span.meta a { text-decoration: none; display: block; }
ol.dribbble li span.meta img.avatar { float: left; margin-right: 6px; margin-top: -3px; }
Creating Shots
We are using a class of .shot attached to the internal div element inside each list item. This behaves as a block with a limit of 220px in width and 210px in height.
Ideally this should be enough since none of the author’s names would break onto the second line. However if you wanted to include extra user information or add Dribbble’s social icons you can set the box height to auto. Then using a bottom margin add extra space as needed. Though I feel that using strict size limits will work better across all browsers and resolutions.
ol.dribbble li div.shot {
display: block;
clear: left;
margin-bottom: 8px;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
A fantastic bit of CSS3 code is from the selector above using drop shadows. This displays a very slight shadow coming out of the right side of each box. The color setting is applied using RGBa which allows reduction in opacity. In this scenario we’ve created a solid black color with only 07% alpha transparency instead of 100%. This gives an ever-so-slight drop shadow that looks stunning in contrast with such a light background.
Live Demo – Download Source Code
Conclusion
I hope this brief tutorial has demonstrated just how easy it is to prototype a layout using CSS3. Even with many of the older properties it’s still a simple process to look over a page design and clone much of the functionality yourself. And with HTML5 specs growing in support web developers have never had it easier! Let us know your thoughts in the post discussion area and be sure to download a copy of the demo source code above.
Advertise here with BSA
