CSS for a Calendar-Like Date Stamp

The date stamp you see here on the page can be made with following code:

.post-date {
 background: url(images/date_icon_blue.jpg) no-repeat;
 float: left;
 height: 40px;
 line-height: 18px;
 margin: 0px 5px 0px 0px;
 text-align: center;
 width: 37px;
}

.post-day {
 color: #434B4D;
 font-size: 20px;
 margin: 0px 0px 1px 0px;
 padding: 0px;
 text-align: center;
 width: 37px;
}

.post-month {
 color: #FFFFFF;
 font-size: 10px;
 margin: 0px 0px 1px 0px;
 padding: 0px;
 text-align: center;
 width: 37px;
}
Background image used in the code:

Social Share: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Webnews
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • TwitThis
RSS 2.0 | Trackback | Comment

One Response to “CSS for a Calendar-Like Date Stamp”

  1. Mechelle Hanson

    24gz5xhhibvv6s5r

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>