Tutorials

Styling Post Headings That Stick Out

Tags: Intermediate

Recently, I’ve noticed a trend in blog post headings where it sticks out of its base layout. I would like to share this technique for those who would like to give their post headings a new style. One tip to keep in mind when designing this is to make sure it fits your target audience screen resolution size.

Note that this technique may vary depending on your design. My goal is for you to grasp the main concept in this tutorial so you can experiment and apply it to your own projects.

Step 1. Wireframe – HTML

Start by visualizing the wireframe of how each post item will be laid out.

<div class="post">
	<div class="postheader">
		<!--Post Header Elements Goes Here-->
	</div>
	<!--Post Content Goes Here-->
</div>

Step 2. Styling Wireframe – CSS

Each post entry will be wrapped within the .post class. Since we are using absolute positioning on the .postheader, be sure to add enough top padding on .post so the post content does not overlap with the heading.

.post {
	margin: 0; padding: 110px 20px 20px;
	float: left;
	width: 560px;
	position: relative;
}
.post .postheader {
	background: url(postheader_bg.gif) repeat-x;
	float: left;
	width: 600px;
	position: absolute;
	left: 0; top: 0;
}

Step 3. Post Header Wireframe – HTML

Now we’ll look closer at how each element will be placed within the .postheader.

<div class="postheader">
	<span class="date"><strong>Oct</strong>25 <small>2009</small></span>
	<h2><a href="#">Styling Blog Post Headers with CSS</a></h2>
	<a href="#" class="comments">25</a>
	<p>
		<span>Category: <a href="#">CSS</a> | Tags: <a href="#">Headings</a>, <a href="#">Tutorials</a></span>
		By <a href="#">Soh Tanaka</a>
	</p>
</div>

Step 4. Styling Post Header – CSS

Date Style
The part that sticks out of the layout is the date. Set the positioning to absolute and pull it back -50px to the left.

.date {
	background: url(date_bg.gif) no-repeat;
	width: 46px; height: 57px;
	float: left;
	padding: 3px 5px 3px 0;
	text-align: center;
	font-size: 1.8em;
	position: absolute;
	left: -50px; top: 0;
}
.date strong, .date small {
	font-size: 0.5em;
	text-transform: uppercase;
	display: block;
}

Comments Style
Similar to how we styled the date, we will use absolute positioning to push the comments block -10px to the top and -10px to the right.

a.comments {
	position: absolute;
	right: -10px; top: -10px;
	background: url(comment_bubble.gif) no-repeat;
	width: 34px; height: 39px;
	padding: 7px 0 0;
	text-align: center;
	color: #fff;
	font-size: 1.6em;
	text-decoration: none;
}

Level 2 Heading Style
Since the comments area is bleeding over on top of the heading, make sure you have enough padding on the right side so it does not overlap. Set height and line-height to match so it can be vertically aligned. For those browsers that support text shadows, we can add a nice touch of letter press style using the text-shadow property.

.post .postheader h2 {
	margin: 0; padding: 0 25px 0 10px;
	font: normal 2.2em Georgia, "Times New Roman", Times, serif;
	height: 62px; line-height: 62px;
	text-shadow: 1px 1px 1px #cfeb7f;
}
.post .postheader h2 a {
	text-decoration: none;
	color: #222;
	display: block;
}

Auxiliary Information Style
The aux information will be wrapped in a paragraph tag. To accommodate for the background image, be sure to add 60px padding to the left. For the category and tag information, wrap it in a span which will be floated to the right.

.post .postheader p{
	font-size: 0.9em;
	background: url(author_bg.gif) no-repeat 10px bottom;
	height: 27px; line-height: 27px;
	margin: 0; padding: 0 10px 0 60px;
	color: #fff;
}
.postheader p a {color: #fff;}
.postheader p span {float: right;}

Conclusion

Now that you know how this technique is achieved, check out some of the sites below for inspiration! If you have any questions, suggestions, or concerns, please don’t hesitate to let me know.

Usability Post

Line 25

Noupe

From the Couch

Koodoz

Web Designer Wall

Branded 07