Styling Design Elements: 5 Beautiful Post Headings
by Noupe on September 22, 2009
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.
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;
}
No related posts.