Dumpster-fairy.com

About sometime last fall, I came across a tutorial on how to create those little CSS calendar icons that are practically everywhere now. The method I found uses a background image and while that’s fine, I guess I prefer something that doesn’t require an image to bring off the design. This last layout that I’ve been working on for Dumpster-fairy.com makes use of those CSS icons, and to give credit where credit is due, I was very much influenced by the icons used at Last.fm for the events calender list. I came up with my own workable solution and I’ll walk you through my methods in this post.

Since I was going to be using a calendar icon in different places on my website, I obviously would want the icon to appear slightly different in each place; for instance, I use a larger calendar icon as part of the header for my blog posts, and a smaller event-like calendar for the side-bar. So, I start off specifying a series of default styles:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}

HTML Code:

<span class="cssCalendar" title="Friday November 28th, 2008">
    <span class="day">Fri</span>
    <span class="cssCalInner">
    	<span class="date">28</span>
        <span class="month">Nov</span>
        <span class="year">2008</span>
    </span>
</span>

This is what you should have:

I’ve tested the base styles in Firefox 3, IE 7, Safari and Opera 9.5 and it appears pretty much the same across the board. But it’s a little boring, don’t you think? So we move on to adding some additional styles:

/* Medium Size */
.medium {
	width: 52px;
	font-size: 18px;
}
.medium .cssCalInner {
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.medium .day {
	font-size: 100%;
	font-weight: bold;
	color: white;
	background: red;
}
.medium .date {
	font-size: 120%;
	font-weight: bold;
}
.medium .month {
	font-size: 75%;
	font-weight: normal;
}
.medium .year {
	font-size: 50%;
	font-weight: normal;
}

So this is what we do now. Our HTML fragment above? Change the first line to this:

<span class="cssCalendar medium" title="Friday November 28th, 2008">

Didn’t know you could have more than one class for an html tag? Well, now you do. Your calendar—browser depending, of course—should look like this:

We could leave this tutorial here or, we can go on. You can check out the Last.fm-style calendar icons on the next page.