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.
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.
That is it! Enjoy! :)
redsonic 7 Feb, 2011
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
redsonic 7 Feb, 2011
Michael Martin 7 Feb, 2011
cssglobe 7 Feb, 2011
Dave 7 Feb, 2011
Would like to use something like this on a site I am working on, but unclear how the browser coverage would be?
Ralph 8 Feb, 2011
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
san fransisco 8 Feb, 2011
dreamdezigns 8 Feb, 2011
Dan 8 Feb, 2011
cssglobe 8 Feb, 2011
SEO Ontario 9 Feb, 2011
Web design manchester 9 Feb, 2011
Great post
Barry La Vette 9 Feb, 2011
Video Gamer 13 Feb, 2011
Michael Clark 13 Feb, 2011
Any ideas of what could be done to get it to work in IE8?
Michael Clark 13 Feb, 2011
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.
droope 14 Feb, 2011
Lars Schmidt 16 Feb, 2011
Is there any way to bring the content in one vertical line ?
Please look at my second blogspot.
Thanks.
Lars Schmidt 17 Feb, 2011
New position.
http://ls76.jimdo.com/blog/2011/februar/
San francisco 17 Feb, 2011