Check out the calendar detail to the left of the post title. I created this with a combination of some simple div tags two background images and some CSS. It looks really good in Firefox and “ok” in IE. If you change the text zoom size in IE the borders get a bit flaky. I’m sure with a bit more hacking we can make it look better in more browsers.
The width matches the width of the background image which is anchored to the top of the month box. (shown next). The float tells the entire datebox where to go on the page and the margins ensure text does not smash up against the box. The values 1ex and 1em are just pulled out of thin air. Other values work fine.
The month box contains the background image anchored to the top edge. It is important to know the exact color of this image so you can make the background color of the box match. Furthermore the image must not be transparent otherwise the background color of the box bleeds through the top edge of the image.
datebox month { font-family: Cambria,"Times New Roman",Times,serif; font-size: 0.9em; padding-top: 0.3em; padding-bottom: 0.1em; text-align: center; background: #660033 url('images/calendar-top png') left top no-repeat; color: #dddddd;}
The top padding gives just a bit of space to allow the background graphic to show. The bottom padding is arbitrary. I just tweaked it until I liked the way it looks.
datebox day { font-family: Cambria,"Times New Roman",Times,serif; font-size: 1.4em; text-align: center; padding-bottom: 0.1em; color: #333333; border-right: 1px solid #660033; border-bottom: 1px solid #660033; border-left: 1px solid #660033; background: #faf8d2 url('images/page-fold-small png') right bottom no-repeat;}
The folded paper image is anchored to the bottom right. This box also provides a 1-pixel border that matches the background color of the other elements.
That’s it. If you are a better artist than me you can probably improve on the look of this calendar. But after trying to zoom the text on several other people’s blogs. I think my CSS version scales pretty nicely.
If you’re interested in it zooming a bit more gracefully to huge text sizes you could always try specifying the datebox width in ems; 2.7em looks about right to me (FF running on Ubuntu). Does make the top graphic look a bit odd at intermediate zoom levels though–fixable by using a single ring image twice in place of your calendar-top png but maybe there are better uses for time than optimizing appearance for huge text.
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Related article:
http://stuffthathappens.com/blog/2007/09/17/almost-bullet-proof-css-calendar/
comments | Add comment | Report as Spam
|