In this article I am going to use some of the CSS tricks to create a calendar icon you can use for your blog posts or something similar. It is important to notify that there are no images used here and the markup couldn’t be simpler than it is.

The final result looks like the image below.

Take a look at the demo

HTML

As mentioned the HTML I am using for making this calendar icon to work is very simple:

<p class="calendar">7 <em>February</em></p>

We have a wrapping paragraph, although you may go with the DIV (or HTML5’s new element – TIME). Inside the wrapping element you need one extra element that contains a month’s name.

The principle

Now, I have 2 elements to work with, plus I will create 2 pseudo element for each of the real elements which will give me total of 6 elements I can use to draw shapes and position them properly. Pseudo elements will be used for the calendar’s spiral (actually those are some kind of rings, not sure what is the correct English word for it… sorry about that).

If you take a look at the image below the idea behind this will be more clear.

First we style the container element. You will notice that I used box-shadow, border-radius and CSS gradients. Not all browsers will render all of these properties, but at least it will degrade nicely.
Note that the fixed height is not defined, you control the overall height with line-height properties in both container and nested em element.

.calendar{
	margin:.25em 10px 10px 0;
	padding-top:5px;
	float:left;
	width:80px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	position:relative;
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}

Em element is also styled, it contains the month’s name.

.calendar em{
	display:block;
	font:normal bold 11px/30px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}

Now I am styling the pseudo elements. Container’s pseudo elements (:before and :after) are used to create thos circles, "holes in te paper".

.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;	
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:11px;}	
.calendar:after{right:11px;}

…and em’s pseudo elements are used to create the rings:

.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;	
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calendar em:before{left:13px;}	
.calendar em:after{right:13px;}	

There are 2 demos you can check out:

• Large CSS Calendar Icon
• Small CSS Calendar Icon

It is important to say that if you’re going to customize the width there will be some tweaking needed, mainly for the placement of the pseudo elements.

That is it! Enjoy! 🙂

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (20 Comments)

1. redsonic
   February 7, 2011

   Hi, Thanks, These colors make me happy :) However the em element (Blue) is not as larger as the day container element (Grey) I added theses rule to the .calendar em class to get the same width : margin-left: -1px; width: 82px; May you have a better choice? Thanks

2. redsonic
   February 7, 2011

   may be*

3. Michael Martin
   February 7, 2011

   The icon looks great, awesome to see such a good demo of CSS3!

4. cssglobe
   February 7, 2011

   @redsonic: They're both the same width. The blue appears to be more narrow, but it's not.

5. Dave
   February 7, 2011

   Is there an official list of what browsers support CSS3? Would like to use something like this on a site I am working on, but unclear how the browser coverage would be?

6. Ralph
   February 8, 2011

   Nice one, Allen! It's so cool what you can do with the before and after pseudo classes to keep the mark-up clean and lean. I got inspired too by Nicolas Gallagher who does crazy things with them, so I'm experimenting quite a lot with these two selectors. @Dave Pretty much all the latest browsers (including IE8) support the :before and :after pseudo classes. They're actually part of the CSS2.1 selectors. For a complete list of browser support re CSS selectors, I found this site very useful. http://dev.l-c-n.com/CSS3-selectors/browser-support.php

7. san fransisco
   February 8, 2011

   Loved the article.

8. dreamdezigns
   February 8, 2011

   hi its nice to look and your explanation is nice easy to understand by all

9. Dan
   February 8, 2011

   Your example page gives an error in IE8.

10. cssglobe
    February 8, 2011

    @Dan: Actually it is a third party banner ad script I have no control of... I didn't use nay JS in this particular case. I will have to see if that can be fixed.

11. SEO Ontario
    February 9, 2011

    This is actually pretty clever. Most CSS3 icons require a huge amount of ugly markup, but this uses almost no extra HTML.

12. Web design manchester
    February 9, 2011

    Nice work Great post

13. Barry La Vette
    February 9, 2011

    Wow, code giving the illusion of an image. Fantastic!

14. Video Gamer
    February 13, 2011

    thats kinda cool, ive been wanting to learn CSS, anyways thanks for the tutorial :D

15. Michael Clark
    February 13, 2011

    Nice article. Great example of CSS. Runs beautifully for me in Chrome and FireFox, but it doesn't work in IE8. All I get in IE is the number and a single line below that. Any ideas of what could be done to get it to work in IE8?

16. Michael Clark
    February 13, 2011

    Oops! I've been playing around with the DOCTYPE tag in HTML and I've found that the settings used can make a huge difference in the various browsers and how they react to CSS. For example, when I use the HTML 5 DOCTYPE tag, your CSS Calendar example does actually work in IE8. Still nowhere near as attractive as in Chrome or FireFox, though. Since I answered the question I asked earlier, I thought I'd drop back and comment on what I had found. Thanks again for the article.

17. droope
    February 14, 2011

    cool!

18. Lars Schmidt
    February 16, 2011

    Sorry for my english. Is there any way to bring the content in one vertical line ? Please look at my second blogspot. Thanks.

19. Lars Schmidt
    February 17, 2011

    Sorry. New position. http://ls76.jimdo.com/blog/2011/februar/

20. San francisco
    February 17, 2011

    thats kinda cool..

Sorry, the comment form is closed at this time.