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
1.
So, I started with the markup basics:
* Paragraph element tags to visually present each item on a new line - the day of the week, the numerical month date, the month, and the year,
* An outer div element that would later be used for positioning the box and for the bottom and right side background image.
Sat
10
Feb
2007
2.
Then I added CSS rules for a narrow width, and centered, smaller text to begin creating the box:
/* Outer div */
div.datetime {
border:1px solid #000;
width:5.0em;
}
div.datetime p {
margin:0 auto;
padding:0;
text-align:center;
font-size:x-small;
}
The result:
Screenshot: Calendar - paragraph elements added to post entry date text
For these initial rules, I wasn’t too concerned about the exact dimensions and border color. I’d replace the temporary black border when the bottom right corner graphic was added, too, but this provided an easy way to start setting up the layout.
3.
Next came styling the day of the week top section with a darker blue background and light-colored text. I added an outer top section div (.top) for these rules:
The markup:
Sat
10
Feb
2007
The CSS:
div.datetime .top {
color:#fefefe;
background-color:#2f4765;
}
The result:
Screenshot: Calendar - top section background color added
It was finally starting to look a little like the desktop calendar icon.
4.
Next was the typography. Since each needed different styles, I added unique classes for the numerical day of the month, the month, and the year to the markup:
10
Feb
2007
5.
First, the day of the week was to be uppercase and use a contrasting font style that I’d also used for my page headings. So I added a CSS rule for that, along with a bit of letter spacing:
div.datetime .top p {
font:bold x-small/100% Georgia, "New Century Schoolbook", "Book Antiqua", "Times New Roman", serif;
letter-spacing:0.12em;
text-transform:uppercase;
}
The result:
Screenshot: Calendar with typography added to top section
6.
Next I added rules for the numerical day of the month, the month, and the year:
/* day of the month (NUMBER) */
div.datetime p.day {
font:bold 1.5em/98% Georgia, "New Century Schoolbook", "Book Antiqua", "Times New Roman", serif;
letter-spacing:0.13em;
}
/* month */
div.datetime p.mon {
font:x-small/135% Verdana,Geneva,Arial,Helvetica,sans-serif;
letter-spacing:normal;
text-transform:uppercase;
}
/* year */
div.datetime p.yr {
font:x-small/110% Verdana,Geneva,Arial,Helvetica,sans-serif;
letter-spacing:0.05em;
}
The result:
Screenshot: Calendar layout with typography added to month, day, year
7.
Then it was time to create and add those metal rings at the top. Using gradients in Photoshop, I created the metal ring look, and saved the image as a transparent .gif:
Enlarged metal rings
I wanted the rings to be on top of the top section, with the top of the rings above the top section, much like a real desktop calendar:
Englarged metal rings placement
Using CSS and a negative top margin, I added the metal rings image as a background image (transparent .gif) to the top section’s paragraph element so it would show up on top of the dark background:
div.datetime .top p {
background:url(/img/caltop.gif) no-repeat 50% 0;
margin:-9px auto 0 auto; /* negative top margin, auto for centering */
padding-top:11px;
}
Now perhaps you see why I used the .top div and the paragraph element - the .top div has the darker background color while the .top div paragraph element has the metal rings background image. This approach allows the metal rings (transparent .gif image) to appear OVER the dark blue background color. Like anything, I’m sure there are plenty of ways to accomplish this. The approach I chose also works well across browsers and platforms. (IE6 cuts off the top metal rings due to the negative margin, though, which I explain further below.)
The result:
Calendar look layout with metal rings added
8.
Next, it was time to replace that black border to look more like the completed version that I’d done in Photoshop.
First, I created a background image that included the slight shading behind the bottom section text, the bottom right corner that slightly turns up, and the bottom and right side borders. I saved the image as a transparent .gif:
Calendar background image - bottom right corner and background shading, includes enlarged/close-up of corner detail
Then I added the corresponding CSS rule to the outer containing div:
div.datetime {
background:url(/img/corner.gif) no-repeat right bottom;
}
Then I was ready to add the left side lighter green border. First, I added a bottom section div to the markup to apply the green border only to that bottom section:
Sat
10
Feb
2007
Then I added the CSS rules for the left border and tweaks to allow space for the bottom and right side background:
div.datetime .btm {
color:#365174;
background:transparent;
border-left:1px solid #a1c6ac;
margin:0 10px 5px 0;
padding:0 0 1px 0;
}
9.
After adding other details and doing quite a bit of cross-browser, cross-platform testing, the final result:
Screenshot: Calendar look completed
10.
It was finally time to position it with with CSS using the outer div (div.datetime):
div.datetime {
float:left;
margin:12px 2px 2px 40px;
padding:0;
}
Screenshot: Poste entry date calendar look layout positioned on page - left-aligned, to left of entry post title
Note about Internet Explorer 6:
IE6 doesn’t like the top negative margin and instead just cuts off the top of the metal rings. So IE6 users won’t see the metal rings - the style sheet for IE6 intentionally excludes the metal rings background image.
In addition, IE6 didn’t render the CSS for this little 'Today is' calendar look layout the way other browsers do, so I created totally separate styles for IE6 that also excluded the metal rings. It looks almost the same otherwise:
Screenshot from IE6 of post entry date calendar look layout completed
Since I created this for my own experimental site, I felt freer to make that compromise for IE6, especially when IE6 users see the same look except for the top metal rings. I still might continue to experiment with the CSS for IE6, but for now this is how things stand.
Part of my IE6 decision was also based on this site’s browser stats. This site’s browser stats currently show about 35.8% of the visitors using IE6, which continues to drop as IE7 use and Firefox use continue to increase.
Clarification about the CSS and Images
The above isn’t all the CSS that I used for the final version, especially after all the cross-browser, cross-platform testing. Instead, it gives the basics for how I went about creating this.
When I mentioned “sharing” I was referring to sharing how I went about creating this mostly CSS calendar icon look. Feel free to play around with the CSS shown in this article if you wish. Just to be clear, though, the images and this site’s style sheets aren’t available for use. I’m hoping that my article will add a little spark for your own inspiration to consider using CSS whenever practical - even for an icon look that’s more flexible than a graphic icon.
08:24 am, pst22 February, 2007 Comment
You can see my Online work (Graphic/Multimedia/ WebDesigner):http://lifewithoutcolour.blogspot.com/
No comments:
Post a Comment