其实明眼的人一下就能看出来，就是把以前的日期显示变成了日历显示而已，不过这个效果全部由CSS3完成，没有任何的图片在里面。
So，如果你看不到的话，那你确实应该升级一下你的浏览器了。
源码在全文里面可以阅读，原作者的地址忘记了，这里只能对作者抱歉了，如果你发现了可以联系我。
CSS的部分
<style type="text/css">
.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 元素包含着月份的名称*/
.calendar em{
display: block;
font: normal bold 11px/30px Arial, Helvetica, sans-serif;
color: #FFF;
text-shadow: #00365a 0 -1px 0;
background: #DF3D82;
background: -webkit-gradient(linear, left top, left bottom, from(#DF3D82), to(#DF3D82));
background: -moz-linear-gradient(top, #DF3D82, #DF3D82);
-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;
}
/*创建两个圆孔*/
.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;}
/*创建两个吊环*/
.calendar em:before, .calendar em:after{
content:'';
float:left;
position:absolute;
top:-5px;
width:4px;
height:14px;
background:#DF3D82;
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;}
</style>
实际使用的部分
<p class="calendar">07日<em>2013年2月</em></p>
