Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Thu

22

FEB

2007

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

  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.

    <div class="datetime">
    <p>Sat</p>
    <p>10</p>
    <p>Feb</p>
    <p>2007</p>
    </div>

  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:

    <div class="datetime">
    <div class="top"><p>Sat</p></div>
    <p>10</p>
    <p>Feb</p>
    <p>2007</p>
    </div>

    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:

    <p class="day">10</p>
    <p class="mon">Feb</p>
    <p class="yr">2007</p>

  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:

    <div class="datetime">
    <div class="top"><p>Sat</p></div>
    <!-- close top div -->
    <div class="btm">
    <p class="day">10</p>
    <p class="mon">Feb</p>
    <p class="yr">2007</p>

    </div> <!-- close btm div -->
    </div> <!-- close datetime div -->

    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.

Comments

Comments, Trackbacks: 4 so far. Add yours!

  1. Cool tutorial, thanks.
    I usually read your site in google reader, but I saw this and I decided to actually look at your website, sweet design.

    07:26 am, pst23 February, 2007Comment by Shayne

    comment #1 permalink ·

  2. Really nice tutorial and a great affect too. I also came from Google Reader. I’m assuming you don’t mind if people take the idea and the code you’ve presented to create their own - not sure if I’d ever get round to it myself though.....

    04:30 pm, pst23 February, 2007Comment by Andy

    comment #2 permalink ·

  3. Nicely done Shirley, thanks for the insights on how you achieved this effect.

    06:46 pm, pst25 February, 2007Comment by Douglas Clifton

    comment #3 permalink ·

  4. One new subscriber from Anothr Alerts:

    03 Apr, 2007Trackback from anothr user

    trackback #4 permalink ·

This discussion has been closed. Thanks to all who participated.

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - CSS Mastery: Advanced Web Standards Solutions, by Andy Budd, with Simon Collison, Cameron Moll. Published February 13, 2006.

Cover: Dont Make Me Think, Second Edition (2005), by Steve Krug. 

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2007/02/22/csscalendar/
Page last modified 5 April, 2008 - 7:47pm PDT Page load time: 0.010817 seconds.