カレンダーをCSSだけで表現 / Calender icon by CSS3

HTML:

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

CSS:

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

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

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

.calendar:before { left: 7px; }
.calendar:after{ right: 7px; }

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

.calendar em:before { left: 9px; }
.calendar em:after { right: 9px; }

元ネタ： Drawing Calendar Icon With CSS3