Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly

Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly

I’ve received numerous inquiries about how I created the entry post calendar icon look for Brainstorms and Raves, so today’s post shares the basics of the CSS and the two tiny background images I created to achieve the calendar icon look.

* First, I wanted to create a calendar icon look that would show the blog entry post dates.
* I also planned on Movable Type to auto-generate the HTML text date information for each entry post in the format that I wanted - the entry’s abbreviated day of the week, the numerical month date, the abbreviated month, and the year.
* While I was in part inspired by calendar icons at iStockPhoto and elsewhere, I wanted to use CSS for as much of my calendar look design as possible to allow flexibility - especially a flexible width for font resizing. A graphic icon background would have a fixed width and fixed size that wouldn’t allow the flexibility I needed.

After brainstorming and playing in Photoshop to create the look, this is the result I was after that would also blend with this site’s design:

Screenshot of post entry date calendar design layout

You can see my Online work (Graphic/Multimedia/ WebDesigner):http://lifewithoutcolour.blogspot.com/