Let’s Create a Responsive Picture Gallery – Part 2

  • 22 Read Time(minutes)
  • 2/5 Difficulty
  • <> Application

In the last article we learnt how to create our responsive picture gallery’s layout in Photoshop. In this tutorial, we’ll slice up the design and then code it into working HTML and CSS. By reading this tutorial I assume you have a basic knowledge of HTML, what tags there are in how the code works. If you haven’t tried building up a website in HTML yet, but you know a little something about the language, this tutorial is just for you. Let’s get started right away!

One word about file structure

In order to stay organized, let’s put all our images in an [images] folder. At the same level will be our HTML and CSS files. Like this:

– [images]              folder
– index.html         HTML document
– style.css              Stylesheet

Here is a sneak peak of what we’ll create today


(Click on the image for bigger size!)

Step 1 – Slicing up the PSD

Before we begin to write our first starter tag, let’s take a quick look at our design. Which parts of the design can we style with CSS, and what are the elemets that need to be saved as images? The Logo – first of all, needs to be exported, because that font is not available as a webfont or anything.

We could use Cufón to sort this out, but for now, let’s just stick with the good old logo-image syndrome. Either way is equally good, none of them is better that the other.

Also, since we used a pattern for the design, we’ll need to slice out one tile, so we can repeat it with CSS.

So, start up Adobe Photoshop, and open your PSD file.

To slice out the logo, press V for the Move Tool and Ctrl+click (Cmd+click) on the logo text. This will select its layer. Now comes a cool keyboard-combination series which must be remembered for slicing. For PC that is Ctrl+A, Ctrl+C, Ctrl+N (Enter), Ctrl+V. For the Mac, it’s Cmd+A, Cmd+C, Cmd+N (Return), Cmd+V.

Please note that when you press Ctrl+N/Cmd+N, make sure you set a Transparent Background. This way you can save backgroundless PNG’s.

Once you have your logo pasted into a new document, hit the File menu – Save for Web & Devices command. The keyboard shortcut for this is a long one, but a must-know: Ctrl+Alt+Shift+S (or Cmd+Option+Shift+S on the Macintosh). Since this logo is meant to be placed on a pure white background, we could just save it in JPG, but for the sake of professionalism, let’s select PNG-24 here. Hit OK, and let’s name it “logo.png”.

PNG-24 supports transparency, PNG-8 doesn’t.

All right, one done, one more to go. The background needs a little tackling, let’s see what it is! If you draw a selection on a layer that has layer styles applied to it and try to copy from that layer, Photoshop will only copy the actual content to the clipboard, all layer styles will be neglected. So, first of all find the background’s layer in the Layers palette, right-click on it and choose “Convert to Smart Object”. Now grab the Rectangular Marquee Tool (M), and draw a selection over this area. Make sure you select it right, as shown in the image below!

Again, copy and paste it into a new document (see that looong keyboard-combo-series a little above), and save it as “body-bg.png”. And we’re done! The rest can be coded with pure CSS. Let’s see how!

Step 2 – Coding

The first thing you’ll need is a text editor. You can use any kind of text-editing program you like, however you can download or purchase many professional applications that will definitely help you get the most out of coding. These programs include features like color-coding, auto-indenting and even code-completion.

Here are just a few of many coding applications:

Windows – Notepad++ (free!), UltraEdit, Dreamweaver
Macintosh – TextMate, Dreamweaver, Espresso, Coda

So if you’ve picked the program that best suits you, let’s jump right in! First of all, create a new blank file. This will be our HTML document that will hold the markup.

Depending on what program you’re using, you may be prompted to choose from various document types. If that is the case, try creating a blank file, or create any HTML-type document and delete all contents.

Every single HTML document’s Line 1 is the doctype. The doctype declaration tells the browser „-Hello, I’m an HTML 4.01 Transitional document, please treat me like this!” … or so. Old HTML doctypes were pretty long and wacky. Luckily, HTML5’s doctype is short and memorable.

<!DOCTYPE html>

Great. One line done. Now our browsers know that this is an HTML5 document.

Let’s now save this file into our working folder. Name it „index.html”.

Now, continue on by adding the basic HTML skeleton. That consists of a <head> and a <body> tag wrapped together in <html> tags. Just like this.

<html>
	<head>
	</head>
	<body>
	</body>
</html>

Great. Skeleton done. Let’s add some lines into the <head> section. A lot of cool stuff can come here if you learn deep into HTML. Today, we’ll just add some basic declarations that are a must for our website to work properly. Starting off with the title. Whatever you write in between the <title> tags, will be displayed in the title bar of the browser. Hence the name; easy, huh?

Of course, today’s modern browsers don’t have any title bars, they use tabs, therefore, these tabs will hold the website’s title.

Make sure you add it between the <head> tags.

<title>Fluid Gallery</title>

Great. Let’s add some meta data. There are a lot of meta types in HTML, we’ll use the basic „charset” in this tutorial. This content will tell the browser what kind of character set we’d like to use. In HTML5, this is also a very short one, and it’s also good to know from brains.

<meta charset="utf-8" />

Notice this tag is not closed the ordinary way (</meta>). This is called an empty tag. Empty tags are always closed inside the tag declaration.

All right. Before we move on, we need to create the stylesheet document. Create a new file in your text editor, and let’s add this block right away.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside  canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

The heck is this?! – you might ask, and for a good reason. This code is called a CSS Reset. Basically what it does is it sets all HTML elements to their default or zero values.

Why is this important? Every single browser has its own stylesheet. There is only one problem with this: they are somewhat different. So if I were to add 3 levels of headlines and a couple of paragraphs, I would then see some differences when viewed in Chrome and in IE9 for example.

Now that we know what a CSS Reset is, let’s save this document as „style.css” next to our index.html file.

Okay, great. Let’s now link these two together. Remember, we used an empty tag just a minute before? Well, here is another one!

<link rel="Stylesheet" href="style.css" />

The <link> tag tells the browser to link something up with our HTML. In our case, it’s a Stylesheet, as the „rel” attribute says. The „href” atrribute tells its location, of course. In older versions os HTML, we would have had to input some more info, but in HTML5, this one got shortened again.

Allrighty, enough of the <head> section. Let’s jump into the body now.

Remember to save your files regularly!

So, let’s begin with our header. It basically consists of a pure white background, a logo, and a contact button. Nothing fancy. But a little fanciness comes in HTML. We want the full width of the header to be white, but also, we want to wrap the contents of the header (and the whole website!) to the center of the browser window. Because of this, we need to create a container div around our header div. According to this, our markup will look like this:

<div id="headerContainer">
   <header>
   </header>
</div>

Notice the <header> tags. These tags only work in HTML5; we could have used the traditional <div id=”header”> declaration, but one of the main aims of this tutorial is to learn some HTML5.

Care about browser compatibility? Good point! We’ll talk about that in the end of this article.

So, having that done, let’s add the markup for our header’s content. We need to input the logo, and the contact button. Let’s do it!

<img id="logo" src="images/logo.png" alt="Fluid Gallery" title="Fluid Gallery" />
<div id="contactBtn">
   <a href="#" target="_parent">Contact me</a>
</div>

Let’s see what each element is. The logo is put in as an image. That’s done by the <img> tag. The <img> tag has 3 main and must attributes: „src”, „alt”, and „title”. Without these three, the img declaration wouldn’t be semantic. The „src” attribute tells where the image is located. The „alt” attribute is used when images are turned off in the user’s browser. Who the hell would do that, anyways? But if someone did, that particular text would be visible in the browser. The „title” attribute serves as a tooltip. If you hover over the image, you’ll see the text you’ve input in a pop-up bubble. Using the „alt” and „title” attributes are a must when working on Search Engine Optimization (also known as SEO). Therefore, let’s fill them in!

Notice, I also added an ID to it, named „logo”. This will help me target this image in CSS later on.

The button is made up of a div and an anchor tag inside it. The div will serve as the button’s body, and the anchor tag (<a>) will be the text on the button. Notice that the “href” attribute is empty, marked by a hashmark (#).

Okay, let’s give the whole header some styling now. We’ve already created the #headerContainer, the header (HTML5), the #logo and the #contactBtn. We also need to add some styling to the <body> as well!

You may want to open up your design in Photoshop so you can see the end-result that we’re trying to achieve.

So, jump over to the CSS file, and let’s start with the body’s styling. You always want to start your CSS with the body.

body {
   background-color: #993D4C;
   background-image: URL("images/body-bg.png");
   background-position: top left;
   background-repeat: repeat;
}

These 4 lines will add our custom background pattern to the website. Background-color does what is says, the same with background-image. Background-position tells in which part of the body we’d like the background pattern to start at. Background-repeat repeats our pattern so it will be visible throughout the whole page.

In case you don’t like this declaration in 4 lines, I encourage you to try the shorthand property called „background”, which will look like this:

background: #993D4C URL('images/body-bg.png') top left repeat;

See how cool it is? All shorthand properties work like this. I tend to use the background shorthand property quite often. Let’s finish the body declarations.

font-family: 'Trebuchet MS', sans-serif;
font-weight: normal;
font-size: 16px;
color: #4D4D4D;
line-height: 18px;

We could have done the same shorthanding with the „font” selector. For some reasons I like it divided to separate lines… Don’t ask me why. Font-family defines what fonts should be used; you can add multiple fonts to the list by separating them with commas. In our case, if the user for some reasons didn’t have the font „Trebuchet MS”, then the default sans serif font would be substituted.

Font-size: pretty much straightforward. Font-weight is set to normal; it’s not really required as „normal” is its default value, but hey, who knows?

Color stands for the color of the text in the body. Line-height sets a desirable line height based on our font-size.

You always want to set a bigger line-height than your font-size. If you’re working with paragraphs, of course, and you aim for readibility.

That’s it for the body. Let’s see the header’s styling now. First, the #headerContainer. We want this one to be full-width and white. We’re also adding a CSS3 property to this one, called the „box-shadow”.

#headerContainer {
   background: #FFFFFF;
   height: 100px;
   width: 100%;
   box-shadow: 0 0 30px #333333;
}

Notice the hashmark (#) sign before the selector. That refers to an ID. Also take note of „background: #FFFFFF;”. You might ask „- Are you using a shorthand property, where it is unnecessary?” Truly, yes. It works!

„Width: 100%” is another line that wouldn’t be needed, but let’s just put it there, you may never know! Height is set to 100px as it is in the design.

Here’s how box-shadow (CSS3 only) works: First property is the X-offset, second one is the Y-offset, the third value is the blur size (amount) and the last one is the desired shadow color.

Okay, next one is the header.

header {
   width: 960px;
   margin: 0 auto;
}

Simple as hell. Or not? Width sets a fixed width to be 960 pixels wide. This a general convention to use 960 pixels as the basic width of a webpage. See 960.gs for more information! What may not be so clear at first sight is the „margin: 0 auto;” line.

The attribute „margin” has 4 options by default. Let’s see an example for this to clarify. The code „margin: 10px 20px 30px 40px;” will set 10px top margin, 20px right side margin, 30px bottom margin and 40px left side margin. Think of it as a clock: 12 is first, 3 is second, followed by 6 and 9 when going clockwise.

In this example, though, we have two values only. The code “margin: 10px 50px;” sets 10px top and bottom margin along with 50px side margins. The „auto” property applied as a side margin will basically center the particular element in relation to the window size.

If you write just one property to the „margin” attribute, it will then apply to all four sides.

Okay, let’s continue on with the Logo.

#logo {
   float: left;
   margin-top: 27px;
}

You can use the „float” property to pull out an element from the document’s native flow. Therefore, „float:left;” will pull out the #logo and place it to the left side of the div. We’ve also moved the logo image 27 pixels downwards.

Let’s see the button. This is going to be a tricky one, if you haven’t put together a button in HTML+CSS. Let’s first style the button’s body. Here is the code.

#contactBtn {
   float: right
   margin-top: 27px;
   width: 132px;
   height: 38px;
   background: #4D4D4D;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}

We have to float this element, too, if we want it to be placed next to our logo. If we didn’t float this button, it would appear below the logo. We’re using the same margin here as with the logo. It has been the third sentence that ends with logo. Fourth. Width and Height pretty much tells the div how big it can be. After measuring in Photoshop, it need to be 132×38 pixels in size.

Border-radius is a CSS3-only property, again. It can make any element rounded… well, mostly divs and images, of course. 5px is our choice here. The „-moz-” and „-webkit-” lines are all the same, those are required for browser-compatibility.

Next thing, the button text, which is an <a> tag inside the #contactBtn div. Since there is only one anchor tag in this div, we don’t need to use a class or ID for it, instead, we can just target it the following way:

#contactBtn a {
   font-family: Tahoma, sans-serif;
   font-weight: bold;
   font-size: 18px;
   color: #FFFFFF;
   text-transform: uppercase;
   text-decoration: none;
   letter-spacing: -1px;
   display: block;
   padding: 10px;
}

We’ve already seen the „font” properties before. What’s new is „text-transform”, which is now set to „uppercase” (and does what it says) and „text-decoration”, which says „none”. The „text-decoration: none;” line makes the link lose its default underlined status.

By default, when you create a link in HTML, it automatically gets an underlined decoration, thus letting you know that it’s clickable.We don’t need this functionality here, so we’ve removed it.

What’s also there, is „display: block;” and „padding: 10px;” which make the text centered inside its parent div. This is a tweaking technique that is always good to remember of.

Nice! The basic styling of the header is done… but hey, why don’t we add some motion to this button? Let’s create the CSS code which will set a different color background, when hovered on. For this, we can use Pseudo-classes. In this example, we’ll use „:hover”.

For anchor tags, there are 3 main pseudo-classes to use: „:hover”, „:active” and „:visited”. With these, you can for example set a different color to each state of the link.

Always put the pseudo-class after the element of which’s state you want to configure. In our case, we want to edit the button’s background, so we’ll put the pseudo-class onto the button.

#contactBtn:hover {
   background: #993D4C;
}

If you now test the site, and hover over the button, you’ll see that its background color changes to our dark red we’re using throughout this course.

And so, we’re done with the header. Let’s continue on by creating the content.

If you look through the design, you’ll see that all the little polaroid images look the same. Which means, we’ll create the markup and the styling only for one, and we can then copy and paste it a couple more times. How is it going to look in HTML? The polaroids will be articles, which will be placed in a wrapper section.

<section>
</section>

The section tag is new in HTML5, which is commonly misused. The section tag has its own semantic use, it is not meant to substitute all divs. Only use the section tag when you have different types of content-blocks on your website.

Let’s give some styles to the sections.

section {
   width: 990px;
   margin: 50px auto 0;
}

Here is another different use of the margin shorthand property. When used with 3 values, the first value is the top, the second value is the side margins (both left and right) and the third values is the bottom margin.

Inside the section tags comes the article itself, which will have the following markup:

<article>
   <img src="images/image.png" alt="Image" title="Image" />
   <p>Croissant bear claw liquor fruitcake tootsie roll love biscuit lemon drops.</p>
</article>

The “article” is another new HTML5 tag, and is used to hold elements that have the same styling (and same meaning). In our case, we have an image and some text below it. Switch over to the CSS file, and let’s style these quickly. First, the article itself.

article {
   float: left;
   background: #FFFFFF;
   width: 280px;
   height: 230px;
   padding: 10px;
   margin: 0 15px 50px 15px;
   box-shadow: 0 0 10px #444444;
}

They are again floated to the left to be positioned next to each other. They have a fixed width, white background, and 10px padding from each sides to bring in some room. Te margin property defines 15px side- and 50px bottom margins to each. There is some CSS3 box-shadow that we’ve also seen before.

This is it for the article container. If you preview the website in your browser, you can see that the image perfectly fits in its container– This is because the image’s with is 280px, the container’s width is 300px, and we’ve set the padding to 10 pixels on all sides. Great, moving on to the paragraph styling.

We’ re not going to hassle too much with this, we’ll just add a simple margin declaration.

article p {
   margin: 8px 0 0 3px;
}

If you remember how the margin attirbute works, that gives 8px top and 3px left padding. That’s all for the paragraph. And that’s all for the articles! It was rather simple. Now, all you need to do is create a few more copies of the articles below each other. Let them be 6 or 9 pieces. You can also change up the lorem ipsum texts to something else (but make sure it doesn’t exceed two lines), and if you’re working with your own custom 280x180px images, you max change the src properties of the img tag.

The last thing to do with the design is the footer. Let’s create the markup.

<div id="footerContainer">
   <footer>
      &copy; Copyleft 2012 | <a href="http://blog.szaboka.hu" target="_blank">The SzabokaDesigns Blog</a>
   </footer>
</div>

You can of course type something more creative here. Notice the same usage of the #footerContainer div as we did with the header! We’re using an <a> tag here again to create a link. Just like in the Contact button.

Again, the #footerContainer will be 100% wide white, and the footer itself will be 960px centered.

#footerContainer {
 clear: both;
 background: #FFFFFF;
 height: 30px;
 width: 100%;
 box-shadow: 0 0 30px #333333;
}
footer {
 width: 960px;
 margin: 0 auto;
 font-size: 12px;
 padding-top: 7px;
}

We need to use a clearing tweak, because we used floats in the last section. White background, 100% width and a fixed 30px height. Some box-shadow for styling as always, and the #footerContainer is complete.

In the footer itself, we’re declaring the font-size to be 12px, simply because we don’t need that much font size in the disclaimer text. Some padding makes the text vertically centered in the footer.

If we preview it in our browsers, it looks good, but the link has a weird color compared to our design. Let’s fix it as a final step! We need to add just one declaration in CSS, and we haven’t used this technique in this tutorial yet, so let’s see.

a, a:visited {
   text-decoration: none;
   color: #993D4C;
}

By using commas, we can target different properties and give them the same styling. Very handy I might say. Again, text-decoration: none; eliminates the underlined state, and the color sets a different color to the link. The :visited state comes into play when you have clicked on the link and it has changed to a visited link.

And that’s it! We are done with the basic markup and the styling! Congratulations! Before we say good-bye though, let’s say a word about browser compatibility.

It’s very nice to build a website in HTML5, because it has got much easier and it now has cool new features but how about older browsers? If we take a look at ou design in Internet Explorer 8 and below, we’ll see that the entire design is crashed. Simply, because IE6, IE7 and IE8 don’t support HTML5. Fortunately, there is a tiny little JavaScript library called “html5shiv” that helps us solve the problem. Let’s link it to our HTML, make sure you put it between the <head> tags.

<!--[if IE]><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

This line will only load if the browser is Internet Explorer, and will most probably repair HTML5-related layout problems.

The next and last tweak we’re going to use is called “PNG-fix” and is working in Internet Explorer 6, since it doesn’t support transparent PNG file format. Here it is, put this one in the <head>, too!

<!--[if IE 6]><script type="text/javascript" src="http://clgs.googlecode.com/svn-history/r3/trunk/jquery.pngFix.js"></script><![endif]-->

And, we’re done!

You can view my end result with custom images and varied dummy text here.

Epilogue

I hope you enjoyed this tutorial and I hope I could teach you some new techniques in HTML5 and CSS3. Please let me know if I missed something important, or also if you don’t understand something. I’m always happy to help out!

Of course, it would be much appreciated if you shared this tutorial with your friends or by posting it on your Facebook wall os Twitter feed. Thank you! See you later in the last part of this tutorial series, in which we’ll create a responsive version of this website! Cheers!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

4 Responses

Comments

  • Sbinning said on 2012.05.15. at 4:57 Reply

    Part 1 is available here: http://blog.szaboka.hu/tutorials/lets-create-a-responsive-picture-gallery-part-1/

  • CarlV said on 2012.10.06. at 12:12 Reply

    Wonderful tutorial. I'm studying html5, css3 to create a website. This has helped me tremendously. It is not the theory alone but most of all, how you start from scratch. How everything is built up, block by block. Now I have the best method to create a true semi-professional website. Many thanks Szaboka !

    • Szaboka said on 2012.10.06. at 21:15 Reply

      I'm glad you liked this tutorial. Feel free to browser through my other tutorials as well. I hope you can learn even more. Thanks for your kind words! :)

  • ululf01 said on 2013.02.12. at 10:00 Reply

    Really nice results! Great tutorial man

Trackbacks

There are no trackbacks yet.

Join the Conversation

Captcha: − eight = 1