Noupe

Styling Design Elements: 5 Beautiful Post Headings

We will start a new set of posts that will demonstrate different way of creating and styling various design elements. Today our focus will be on “Post Headings“, how to style and markup this important block that comes before any post.

Usually “Post Headings” consists of 5 essential elements:

• 1- Post Title
• 2- Publishing Date
• 3- Author Name
• 4- Post Category ot Tags
• 5- Number of Comments

What we are going to do is play around with these 5 puzzle pieces to get 5 different and pretty “Post Headings” for your blog posts. All the headings mentioned here actually need only couple of lines of CSS.

Take a look at the demo

Artistic Post Heading

The HTML will look like this:

<div id="block4">
    <div class="title-wrap">
    <h1><a href="#" >7 Steps for Systematizing The Design & Build Process%u2026</a></h1>
    <h5><span>Sep 21, 2009</span> | Comments <a href="3" >67</a> | by Cameron</h5>
    </div>
</div>

and the CSS:

#block4 {
    background:url(images/bg.jpg);
	border:3px solid #542437;
	font-family:Georgia,"Times New Roman",Times,serif;
        margin:20px 0px;
	padding:20px;
	z-index:5;
}
#block4 h1 {
	font-size:190%;
	letter-spacing:0px;
	line-height:42px;
	margin:0 0 10px;
	text-align:center;
	text-transform:uppercase;
}

#block4 h1 a{
	color:#542437
}

#block4 h5 a{
	color:#542437
}

#block4 h5 {
	border-bottom:1px solid #4C4C4C;
	border-top:1px solid #4C4C4C;
	color:#6A6969;
	font-size:13px;
	font-weight:100;
	letter-spacing:3px;
	line-height:21px;
	padding:5px 0;
	text-transform:uppercase;
}
#block4 .title-wrap{
	background:url(images/trans_bg.png);
	padding:10px;
	border:1px dashed #542437;
}

Traditional Post Heading

The HTML will look like this:

<div id="block1">
        <h2>Simplicity in Good Web Design</h2>
        <p>
            by <em> <a title="" href="http://www.noupe.com" >Noura Yehia</a> |
            <a href="" class="comments">Comments</a> |
            <a href="" class="cat">Category Name</a>|
            <a href="">Sep 10</a></em>
        </p>
</div>

and the CSS:

#block1 {
	background:#D5E4E8 none repeat scroll 0 0;
	border:3px solid #B5CAD0;
	margin:20px 0px;
	padding:20px;
}
#block1 h2{
	font-family:Georgia,"Times New Roman",Times,serif;
	font-weight:normal;
	text-shadow:0 0 1px #000;
	color:#444444;
	font-size:2em;
	padding:2px 0 0;
	text-transform:capitalize;
	line-height:1.2em;
	margin:0 0 10px;
}
#block1 p em {
	color:#999999;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-style:italic;
	letter-spacing:0.2em;
	margin:10px 0 20px;
	text-transform:none;
	padding-bottom:10px;
}
#block1 a{
color: #F50077;
text-decoration:none;
}
#block1 a:hover{
text-decoration:underline
}

#block1 .comments{
	background:url(images/comments.png) no-repeat;
	padding:0 0 0 25px
}
#block1 .cat{
	background:url(images/folder.png) no-repeat;
	padding:0 0 5px 30px;
}

Lines Post Heading

The HTML will look like this:

<div id="block2">
<div class="date-stamp">
				<div class="day">4th</div>
				<div class="month">Mar/09</div>
			</div>

<h2>7 Rules for Mixing Multiple Fonts in Good Web Design</h2>
<p class="details"><span class="type">Full-Time</span> <em>at</em> Magnet Media, Inc. (ZIO Pro) <em>(Manhattan, NY)</em></p>
</div>

and the CSS:

#block2{
	border:3px solid #A8635A;
	color:#fff;
	font-family:Georgia,"Times New Roman",Times,serif;
	margin:20px 0px;
	padding:20px;
}

#block2 h2{
	background:#ECD078;
	color:#542437;
	font-size:160%;
	font-style:normal;
	font-weight:bold;
	letter-spacing:-1px;
	line-height:115%;
	margin-top:5px;
	padding:0;
}
#block2 p.details{
	background:#542437
}
#block2 .date-stamp {
	background:#FFF;
	border:1px solid #ECD078;
	color:#542437;
	float:left;
	font-style:italic;
	height:62px;
	margin:0 10px;
	overflow:hidden;
	padding:0;
	width:72px;
}
#block2 .day {
	font-size:22px;
	font-weight:normal;
	padding:7px 0 0;
	text-align:center;
}
#block2 .month {
	font-size:11px;
	padding:2px 0 0;
	text-align:center;
	text-transform:uppercase;
}

Fancy Post Heading

The HTML will look like this:

<div id="block3">
    <p class="date">Sep <span>10</span></p>
    <h1>CSS: Design Out Of The Box</h1>
    <p class="tags"><span>Tagged in:</span>
    <a href="#" >CSS</a>,
    <a href="#">Design Trends</a>,
     <a href="#" >inspiration</a></p>
</div>

and the CSS:

#block3 {
	background:#92FF2C;
	border:3px solid #F50077;
	font-family:Georgia,"Times New Roman",Times,serif;
	margin:20px 0px;
	padding:20px;
	position:relative;
	z-index:5;
}

#block3 .date {
	background:#F50077 none repeat scroll 0 0;
	color:#92FF2C;
	font-size:130%;
	height:40px;
	left:-55px;
	line-height:30%;
	padding:20px 0 5px;
	position:absolute;
	text-align:center;
	text-transform:uppercase;
	top:0;
	width:54px;
}
#block3 .date span {
	display:block;
	font-size:170%;
	font-style:italic;
	font-variant:normal;
	letter-spacing:-1px;
	line-height:90%;
}
#block3 .tags {
	text-transform:capitalize;
}
#block3 .tags a{
	color:#F50077;
	font-weight:bold;
}
#block3 h1, h2 {
	color:#2B2B2B;
	font-size:190%;
	font-weight:bold;
	letter-spacing:-1px;
	line-height:100%;
	margin-left:-2px;
	padding:0 0 8px;
}

Colorful Post Heading

The HTML will look like this:

<div id="block5">
    <div class="date_block">
        <div class="day">4th/Mar</div>
        <div class="comments">10 Comments</div>
    </div>
    <div style="padding: 10px;">
        <h2><a href="#">Creating a Great Portfolio Site</a></h2>
        <span class="author">by <a href="#"><span>Noura Yehia</span></a>, Posted in <a href="#">Tips and Tricks</a></span>
    </div>
</div>

and the CSS:

#block5 {
	background:#27453A;
	border:3px solid #D95B43;
	color:#ECD078;
	font-family:Georgia,"Times New Roman",Times,serif;
	margin:20px 0px;
	padding:20px;
}

#block5 .date_block {
	border-left:1px solid #D95B43;
	display:block;
	float:right;
	font-style:italic;
	height:50px;
	margin:0 10px;
	padding:10px 20px;
	width:90px;
}

#block5 .day {
	font-size:22px;
	font-weight:normal;
	padding:0 0 20px;
	text-align:center;
}
#block5 .comments {
	background:transparent url(images/comments.png) no-repeat scroll 0 5px;
	font-size:11px;
	padding:2px 0 0 20px;
	text-align:center;
}

#block5 h2{
	border-bottom:1px solid #D95B43;
	font-size:24px;
	font-weight:normal;
	letter-spacing:-1px;
	line-height:26px;
}
#block5 h2 a {
	border:medium none;
	color:#468E76;
	text-decoration:none;
}
#block5 .author a {
	color:#D95B43;
	font-weight:bold;
	text-decoration:none;
}

Tags: CSS, DESIGN, TUTORIAL

This entry was posted on Tuesday, September 22nd, 2009 at 3:50 pm and is filed under CSS, TUTORIAL.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.