Drawing Calendar Icon With CSS3

Home > Designing, Others > Drawing Calendar Icon With CSS3

February 7th, 2011 admin Leave a comment Go to comments

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:

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.

Webmasters Gallery