Hot Dates with CSS

Here are some demonstrations of ways to make blog dates look like small calendar pages. Read the related blog entry at christianmontoya.com

Update July 9, 2006: This demonstration has been rewritten using the Microformats date-time-design pattern. Unfortunately I had to use "acronym" instead of "abbr" because IE 6 does not support "abbr."

First, the markup

All dates will have the following markup. You could do probably do them a little different, but it's important to have one wrapper container and two inner containers in order to have enough hooks.

<acronym class="published" title="June 28, 2006">
	<span class="pub-month">Jun</span>
	<span class="pub-date">28</span>
</acronym>

Next, some basic styling

The credit goes to j wynia on the default styling here, except that unlike his examples, I will not use pixel sizing on my text. Here's the styling:

.published {
	display:block;
	text-align: center;
	float:left;
	font-family: Arial, Helvetica, sans-serif; 
	border-bottom:none;
}
.pub-month {
	display:block; 
	font-size: .9em;
	margin:0; 
	padding:0;
}
.pub-date { 
	display:block; 
	font-size:1.4em;
	margin:0; 
	padding:0;  
}

The result of this default styling is this:

Jun 28

All elements must be given display:block for this to work. By floating the parent container, the block shrinks horizontally to the width of its text. (Remember that all floats have to be followed by a clearing element if you do not want other content to sit next to it.) The end result is a basic calendar date with the text exactly where we want it. Now we can play with images to get different results.

Example 1

The first example will use this image across the middle to divide the month and the date: cal-triangle.png.

It will also use a border on the wrapper to complete the container. Here is the CSS:

.published {
	display:block;
	text-align: center;
	float:left; 
	font-family: Arial, Helvetica, sans-serif;
	border-bottom:none;
	border:1px outset #bbb;
}
.pub-month {
	display:block; 
	font-size: .9em;
	margin:0; 
	padding:0 2px;
	padding-bottom:4px;
	background:#fed url(cal-triangle.png) 
		center bottom repeat-x;
}
.pub-date { 
	display:block; 
	font-size:1.4em;
	margin:0; 
	padding:0 2px;
	background:#f6ffff;  
}

The result of this styling is this:

Jun 28

Example 2

This example is inspired by everyone's favorite blog design over at veerle's blog. Here are the images I will use: clip-top.png clip-bottom.png. They are not pretty but I suggest you take the technique and make your own images. Here is the CSS:

.published {
	display:block; 
	text-align: center;
	float:left; 
	font-family: Arial, Helvetica, sans-serif;
	border-bottom:none;
	background:url(clip-bottom.png) 
		right bottom no-repeat;
	width:2.2em;
}
.pub-month {
	display:block;
	font-size: .9em;
	margin:0; 
	padding:0;
	padding-top:12px;
	background:url(clip-top.png) 
		center top repeat-x;
}
.pub-date { 
	display:block; 
	font-size:1.4em;
	margin:0; 
	padding:0;
}

Notice that here I have applied the bottom background to the parent container and attached it to the bottom right, so as it scales with the date block the effect does not change. Both images are extra wide so they still fill the width as the text size increases. Notice that I also had to set the width of the parent container, because float-wrapping can get funky on elements of different sizes and cause the background images not to line up correctly. Here is the result:

Jun 28

A Complete Example

Here's the previous example combined with a sample blog post. Check it out:

If you really need the CSS for the sample blog entry, here it is:

.post-content-final { 
	margin-left:2.6em; 
	border-left:1px solid #ccc; 
	padding-left:5px; 
}

The div of class "post-content-final" appears just after the calendar block in the markup. A float clear was added after that just for safety, but it usually will not be necessary if the entries are long enough.

Conclusion

Dressing up your dates makes them stand out nicely, and you can do it in such a way that they scale well with the rest of your layout (even an elastic layout like this one). Feel free to use any code or images from this demonstration, and if you enjoy it, just a link back would be appreciated.

— Christian Montoya