First impressions are always important. Whether it’s a website, movie, or book, that primary effect can persuade you to put it down or continue. Website design is a key element in attracting visitors to a site. If your words are barely legible, will you really generate much traffic? This usually results in the inevitable answer: no.

With beautiful content boxes, visitors will love to read what you have in store. Let’s take a ride and learn how to create stunningly simple content boxes with just an open source image editing software and your favorite text editor.

This tutorial will be explained using GIMP, the GNU Image Manipulation Program, which can be downloaded here for free, as it is open source.

Note: click on any of the images below to view a full size version.

Alright, it’s time to open GIMP:

To start off the first image, click on new under the file menu:

A pop-up screen will appear asking you for the dimensions of the image. For this tutorial, set the width and height to 600px by 30px, respectively. Later on, you may want to edit these dimensions depending on your preferences:

You will now see a canvas appear. Find the layers menu in this screen and create a new layer. Set the dimensions to 598px by 29px, as shown here:

Creating a New Layer in GIMP

The layer is placed in the top right hand corner by default. Now you need to change the location of this layer. Click on the move tool in GIMP and select the option that states “Move the Active Layer”:

Once you have completed this, click and hold the mouse button on the layer. Gently move this layer 1px to the right and 1px down. Zoom in if you have trouble. This is what your image should now look like:

Let’s add a gradient now. Select the blend tool from the menu:

Look at your pallet to find the black box that’s overlapping a white one. Click on it and change the color to #e7e7e7:

Move back to your canvas and find the previously created layer. Click on the top of the layer and drag your mouse down to the bottom, creating a straight line:

Let go of your mouse and you should now see a gradient. Find the file menu and click save. Name it top.jpg:

At this point, many of you will see a message that says you have to export the image due to transparency reasons. Go ahead and click export and then choose the quality of the image that you want.

Our second image is very similar to the first. Go back to your canvas containing the first image and right click. Go to image -> transform -> rotate 180 degrees. The result should be this:

Save this image as bottom.jpg.

Now create a new file with dimensions 600px by 10px. Leave this file completely empty and save it as middle.jpg. The whole point of this image is to enable customization later on:

And that’s it for our images!

Let’s move on to our CSS. It will use these three images in a very specific way. The top.jpg and bottom.jpg images will stay the exact same on each content box. Middle.jpg, on the other hand, will be repeating downwards in order to ensure that our content box will fit any size of text. Designs may be added to this image for more detail.

Use a text editor and create a file named style.css in the same directory as your images. Before coding for the content box, you should place a small reset snippet at the top of the newly created CSS file:

* {
	padding: 0;
	margin: 0;
}

This helps to ensure that your style will be displayed similarly on different browsers. Now we move on to our box:

 .content-box-top {
        width: 600px;
	margin: 15px auto;
	padding-top: 30px;
	border: 1px solid #cdcdcd;
	background: url(top.jpg) top no-repeat;
}

Lets go through these lines one by one:

• Line 1 is setting the width of the top.jpg image to 600px, which is what we defined it in GIMP
• Line 2 is centering our content box and giving it a slight offset from the top and bottom of the page
• Line 3 ensures that our text does not overlap with our top.jpg image and instead resides in the middle.jpg. Remember that this image was 30px high. That is why the padding is also 30px.
• Line 4 adds in a border for a better look.
• Line 5 sets the background to top.jpg and places it in the correct position

Moving on to our bottom image:

.content-box-end {
	width: 600px;
	padding-bottom: 30px;
	margin: 0 auto;
	background: url(bottom.jpg) bottom no-repeat;
}

This is very similar to our previous snippet, but with a few differences:

• The padding is set to effect the bottom so that the text doesn’t appear too low.
• There is no margin on the top or bottom because this was already set in our previous snippet.
• The background image is bottom.jpg and is placed in a different position.

On to our final image:

.content-box-mid {
	width: 570px;
	margin: 0 auto;
	padding: 0 15px;
	background: url(middle.jpg) repeat-y;
}

Note: For those of you who are experienced with CSS, you might have noticed that:

background: url(middle.jpg) repeat-y;

could be replaced with:

background: #fff repeat-y;

because the middle image is completely white. The reason I did not use the latter method in the tutorial is because the image is more flexible, as you can place designs/glows/pictures inside for customization.

And the explanation:

• Note that the width is 30px shorter than the other two images. This is because of our padding on the left and right. We don’t want the text to border the sides of the image; instead we want some space in-between. This is exactly what padding does. Unfortunately, the CSS box model adds padding to width if it is defined in the same set of properties. Because we have padding on both the left and right, we subtract this from the actual width. Thus, our width is 600 – (15 * 2) = 570.
• The background is middle.jpg and is repeated in the y direction (downwards). This is used to ensure that our box can fit any size of text.

And that’s our main CSS. Now, just for some extra looks, you can add this snippet in:

body {
	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
	font-size: 14px;
	line-height: 24px;
	text-align: justify;
}

p {
	padding-bottom: 24px;
}

All this does is change the font and make the text look nice. Our finished CSS file is as follows:

* {
	padding: 0;
	margin: 0;
}

body {
	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
	font-size: 14px;
	line-height: 24px;
	text-align: justify;
}

p {
	padding-bottom: 24px;
}

.content-box-top {
        width: 600px;
	margin: 15px auto;
	padding-top: 30px;
	background: url(top.jpg) top no-repeat;
	border: 1px solid #cdcdcd;
}

.content-box-end {
	width: 600px;
	padding-bottom: 30px;
	margin: 0 auto;
	background: url(bottom.jpg) bottom no-repeat;
}

.content-box-mid {
	width: 570px;
	margin: 0 auto;
	padding: 0 15px;
	background: url(middle.jpg) repeat-y;
}

The HTML to make this all work is going to be our last code snippet for this tutorial. Place this in a file called index.html in the same directory as your images and style.css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Stunning Content Boxes</title>
</head>
<body>
<div class="content-box-top">
	<div class="content-box-end">
		<div class="content-box-mid">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum lacus quis massa. Etiam at massa nec magna dapibus bibendum. Donec viverra quam sed mauris. Suspendisse nulla. Quisque vehicula sollicitudin metus. Integer ut eros. Nunc sagittis, erat sit amet luctus ullamcorper, mauris velit pulvinar enim, eu mollis augue ipsum eget lectus. Fusce vel nunc. Ut enim. Suspendisse quis justo. Nam in nulla nec nisi lobortis suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur laoreet aliquet arcu. Quisque facilisis, odio id placerat dignissim, lectus mauris commodo arcu, eget auctor sem arcu sit amet sapien. Proin sem lectus, sodales a, hendrerit vitae, facilisis id, eros.</p>
		</div>
	</div>
</div>
</body>
</html>

This sets up our basic div structure and adds in text courtesy of a Lorem Ispum void text generator . You can read more about Lorem Ispum at that link. All that’s now left is to view this HTML file in your web browser:

Thanks for reading!

You may download the files used in this post or view the demo.