In case you missed the first post, CSS Bits is a series of downloadable packs of original CSS code and images for you to use in your projects. In Vol 2, we have a set of six datestamps (the area of a blog post that displays when the post was made). Below you'll find a list of all six styles, each with an example of the timestamp and the code you can use to create it. At the end of this post, there is a link to a zip file with all the code and images used here.

Stamp 1:



HTML:
<div class="date1">
<div class="month">JUN</div>
<div class="day">24</div>
</div>

CSS:
.date1{width:60px; height:70px; background:url(images/date1bg.gif) no-repeat; color:#fff; font-weight:700;}
.date1 .month{width:100%; text-align:center; position:relative; top:12px;}
.date1 .day{width:100%; text-align:center; position:relative; top:12px; font-size:28px;}

Stamp 2:



HTML:
<div class="date2">
<div class="month">sep</div>
<div class="day">13</div>
</div>

CSS:
.date2{width:60px; height:70px; background:url(images/date2bg.gif) no-repeat; color:#363636; font-weight:700;}
.date2 .month{width:60px; padding-left:10px; position:relative; top:22px;}
.date2 .day{ width:62px; padding-left:8px; position:relative; top:20px; font-size:28px;}

Stamp 3:



HTML:
<div class="date3">
April 26th, 2008 - Posted at: 7:42pm
</div>

CSS:
.date3{width:210px; line-height:28px; padding-left:15px; background:url(images/date3bg.gif) no-repeat; color:#808080; font-weight:700; border-right:1px solid #C8C8C8;}

Stamp 4:



HTML:
<div class="date4">
<div>December 14th, 2008 - Posted at: 12:22pm</div>
</div>

CSS:
.date4{width:250px; height:25px; padding-left:15px; background:url(images/date4bg.gif) no-repeat; color:#005e20; font-weight:700;}
.date4 div{line-height:25px; background:url(images/date4bgcap.gif) no-repeat; background-position:top right;}

The next two stamps are "overhang" style, which means they are meant to be positioned right on the edge of the layout. In each preview image, I added a line to represent the edge of your layout to give a better example of what I mean. In the download, each stamp is just the stamp itself, not the extra borders, so it should fit fine into any existing layout.

Stamp 5:



HTML:
<div class="date5">
<div class="month">JAN</div>
<div class="day">06</div>
</div>

CSS:
.date5{width:64px; height:73px; background:url(images/date5bg.gif) no-repeat; font-weight:700; padding-left:2px;}
.date5 .month{width:100%; text-align:center; position:relative; top:18px; color:#fff;}
.date5 .day{width:100%; text-align:center; position:relative; top:16px; font-size:28px; color:#e3ddc3;}

Stamp 6:



HTML:
<div class="date6">
<div class="month">AUG</div>
<div class="day">17</div>
</div>

CSS:
.date6{width:114px; height:67px; background:url(images/date6bg.gif) no-repeat; font-weight:700; color:#fff;}
.date6 .month{width:105px; text-align:right; position:relative; top:17px;}
.date6 .day{width:105px; text-align:right; position:relative; top:16px; font-size:28px;}