Account Login

Forgot Password?

Not a registered member? Registration is quick, easy and FREE!

REGISTER NOW!
 
  credit cards accepted  

In The Community:

First time visiting?

You may want to grab the blog feed to be notified when new templates become avaialable.

  •  

Featured Template:

Image River $35.00 - Designed by: Kadom
  •  

Search The Community:

  By clarklab on 4/21/2008

CSS Bits - Vol 2 - Date Stamps

Pre-made bits of code and images to use in your projects.

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:

stamp1

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:

stamp2

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:

stamp3

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:

stamp4

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:

stamp5

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:

stamp6

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;}

download now

Don't have an account? Register Now!