How to Create a Calendar Icon in HTML5 and CSS3

Did you see Simone Sala’s recent article, How to Create a Calendar App Icon in Photoshop? It looks great, is ideal for a smart phone calendar app and is very topical as we move into 2014.

calendar icon

Would it be possible to create a similar icon in HTML5 for use and re-use in any web page? Of course it would … otherwise I wouldn’t have written this article!

View the HTML5 and CSS3 Calendar Icon demonstration (hover over the element for a nice effect!)

The Options

A few years ago we would have required a PNG or GIF image. You can still do that, but they’re not easy to change, cannot be indexed by search engines and are not scalable. A better option would be a Scalable Vector Graphic (SVG); it would permit more flexibility but we don’t necessarily need it.

Therefore, I’m going to use the little-known HTML5 time element. Its sole purpose is to represent a date and/or time — perhaps for an event or anniversary. The basic element uses the following syntax for 9.01pm on September 20, 2014:

<time>2014-09-20T21:01:00Z</time>

You could define just the day: 2014-09-20, the month: 2014-09 or the year: 2014. The final ‘Z’ represents Coordinated Universal Time (UTC). You can replace it with your own time zone, e.g. +01:00, -06:00, etc.

While the content is machine-readable, it’s not particularly easy for humans. Therefore, you can place the date/time definition in a datetime attribute and use something more friendly for the content which is specific to your language and locale, e.g.

<time datetime="2014-09-20T21:01:00+08:00">9:01pm, Saturday September 20<sup>th</sup>, 2014</time>

You should certainly consider the time element when using microdata and microformats.

The Calendar Icon HTML

Our calendar icon will use the following HTML code:

<time datetime="2014-09-20" class="icon">
  <em>Saturday</em>
  <strong>September</strong>
  <span>20</span>
</time>

The time element is given a class of “icon” to indicate it should be styled.

I’ve used em, strong and span for the day, month and date primarily as CSS selector hooks. They’re inline elements without strict semantic meaning so, even without styling, the date is readable. However, you can use different elements if necessary.

The Calendar Icon CSS

First, we’ll define the icon’s outer styling:

time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 7em;
  height: 7em;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
}

The icon height and width is set to 7em. We can therefore change the font to any size we like and the icon will scale accordingly. Try it!

The page effect at the bottom of the icon is applied using multiple box-shadow styles at different y-offsets. I initially considered using pseudo-elements, but they won’t work because we have defined overflow: hidden (which crops the month banner to the rounded edge).

Note we’ve set a relative position so the inner elements can be positioned. Let’s apply their basic styles:

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

The universal selector (*) applies the same styles to any element within the icon. That will probably be fine but, if you had different calendar layouts, you may want to be more explicit.

The month is styled using the following code:

time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}

This positions the banner at the top of the icon and creates perforations using a dashed border. Since the banner is larger than the perforated edge, I’ve used another box-shadow below it.

The day is positioned at the bottom edge:

time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}

The large date number is resized and has some basic positioning applied:

time.icon span
{
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}

Finally, I added a little animation when you hover or focus on the icon — but I’ve leave you to work that out for yourselves.

View the HTML5 and CSS3 Calendar Icon demonstration…

The icon works on all modern browsers including IE9 and above (animation works on IE10+). The effect degrades gracefully in IE8 and below although you should see a reasonable effect if you apply the HTML5 shim to your pages. However, I did discover an unusual Webkit/Blink animation bug while developing the demonstration — but I’ll save that for another article.

Have fun using the code for your own calendar icon effects.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://stephenmorley.org/ Stephen Morley

    Contrary to the statement in the article, the em and strong elements do have semantic meaning; indeed, they were originally created as semantic elements to replace the then presentational i and b elements (which have now been slightly re-purposed). Consult section 4.5 (Text-level semantics) of the HTML 5 specification for details.

    • Craig Buckler

      I stated they don’t have *strict* semantic meaning. Unlike, say, header elements, they have more general emphasis use. I used strong for the month because it has a higher precedence than the day.

      Alternatively, what elements would you have used? I could have used spans and classes, but that didn’t seem necessary here. (Incidentally, since we’re being a little picky, it’s in section 4.6 of the HTML5 spec!)

      • http://stephenmorley.org/ Stephen Morley

        I don’t regard my comment as picky; the suggested HTML is a fundamental abuse of the em and strong elements. The HTML 5 specification puts it best: “The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content.”

        • Craig Buckler

          OK, so turning this around, why do you think the day or month – which could be in a sentence – shouldn’t have any emphasis? They would be very important if you were describing an event.

          What would you prefer?

          • http://stephenmorley.org/ Stephen Morley

            There are limited circumstances where the day or month in a date should be emphasised; for example, you might say “Due to New Year’s Day falling on a Sunday, the bank holiday will occur on 2nd January this year” in order to emphasise the contrast to the expected date. The em element roughly corresponds to adding additional stress in spoken English.

            The code should use span elements. It’s more important to use HTML correctly than to save a few bytes in the CSS. It would also avoid the use of the universal selector in time.icon *, which is inefficient as browsers match selectors starting from the right-hand side.

          • Craig Buckler

            Hmm. OK, I concede that spans are probably less wrong — although I still think it’s a minor semantic point and developers can argue the finer details forever. Ultimately, you need to make a choice.

            Which ever way we look at it, we’re still adding elements solely for the purpose of CSS styling. That’s more wronger!

  • http://niteodesign.com/ Blake Petersen

    For those of us who don’t care about the “fundamental abuse of the em and strong elements”, or everyone except those who were the kids who reminded teacher to assign homework over the weekend, great article.

    Personally, I’d go with whatever results in less bytes because I’ve come to find you can save more money on bandwidth than what you make up taking the time to develop for the extremely low conversion rate of those entirely dependent on fully accessible markup. And that’s why the CFO loves me. ;]

    Regardless, to make everyone happy, I’d consider using i and b here. Both are much slimmer weight than em and strong and have what appears to be pretty arbitrary semantic connotation, i is “indicating a different quality of text” and b is “for utilitarian purposes without conveying any extra importance”. Sounds like perfect candidates to keep page weight to a minimum without the need for extra class hooks and mucking up the semantics.

    Even Stephen notes their presentational nature. This is an icon after all, a representation of the date, I think we made a breakthrough. *group hug*