CSS Date Blocks for Blogs

Sep
05
2005

You've probably been seeing the little date blocks that people have started using recently in their blog designs (even if you didn't notice them).
Example:

SEP
05
2005

I've seen a few instances and explanations of these that go to lengths as extensive as generating images on the fly. That's totally overkill for what 3 little DIV tags and a couple of CSS classes can accomplish. You also gain the fact that your date information will actually be present in your HTML.

The CSS:

.dateblock {
text-align: center;
width: 50px;
font-family: Arial;
}
.day {
font-size: 26px;
position: relative;
top: -5px;
}
.month {
font-size: 12px;
}
.year {
font-size: 12px;
position: relative;
top: -10px;
}

Example HTML

<div class="dateblock">
<div class="month">
SEP
</div>
<div class="day">
05
</div>
<div class="year">
2005
</div>
</div>

Extending it
One obvious extension would be to make the dateblock container float:left next to, say, a blog post. The result would be something along the lines of a dropcap for your date. The CSS numbers for pixel alignment, sizes, etc. are tied to the font chosen. If you chose another font (and I will for my own instances) the numbers will change.

Another intriguing option would be to use the sIFR web fonts to get out of the default fonts available on the web. It would take some trial and error to get the sizing right, but then you'd be able to use nearly any font you like.

A border and appropriate padding on the container will look like this (mouseover extended examples to see the combined HTML/CSS):

SEP
05
2005

Throw in a background and inverted colors and you get:

SEP
05
2005

Change the color and you can match whatever site theme you are after:

SEP
05
2005

 

Comments on this post

Feedback is always welcome. Read some from other folks or leave your own below. Just keep things civil and remember that what you post lives on in public. Forever.

Thanks,
J

8 Responses to “CSS Date Blocks for Blogs”

  1. David Says:

    Very nice!

  2. css : date cards at Community Groups Web Site Project Says:

    [...] css date blocks for blogs [...]

  3. Idiotprogrammer » Blog Archive » J. Wynia on Literary Collaboration and Open Source Says:

    [...] Tricks by J. Wynia: Using CSS to create date blocks . Putting fake postit notes on a resume. Using mindmaps/freemaps to outline creative ideas. [...]

  4. Ravi Says:

    Thank you so much!
    It helped me a lot.
    God bless.

  5. Steve Says:

    Used this on my blog site. Thanks.

  6. qureyoon Says:

    nice and simple ^^

  7. david blanchet Says:

    sweet, just what i was looking for thanks!

  8. DamionKutaeff Says:

    Hello everybody, my name is Damion, and I'm glad to join your conmunity,
    and wish to assit as far as possible.

Leave Your Own Comment

By submitting a comment, you agree to license it under the terms of the Creative Commons Attribution license.

© 2003-2008 J Wynia. All original content is licensed under the terms of the Creative Commons Attribution license unless otherwise noted. Content from other sources is licensed under its original terms.