CSS3 Date Display

Display a fancy date using css3.

by jcubed111

HTML

<div class='box'>
    <div class='boxInner'></div>
    <div class='day'>22</div>
    <div class='year'>2011</div>
    <div class='month'>March</div>
</div>

CSS

html{
    height:100%;
}

body{
    height:100%;
    background-image:-webkit-radial-gradient(50% 50%, farthest-corner, rgba(32,32,32,1), rgba(16,16,16,1));
    background-image:   -moz-radial-gradient(50% 50%, farthest-corner, rgba(32,32,32,1), rgba(16,16,16,1));
    background-image:     -o-radial-gradient(50% 50%, farthest-corner, rgba(32,32,32,1), rgba(16,16,16,1));
    background-image:        radial-gradient(50% 50%, farthest-corner, rgba(32,32,32,1), rgba(16,16,16,1));
    background-color:#181818;
    padding:0;
    margin:0;
    font-family:"Times New Roman", serif;
}

.box{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-45px;
    width:100px;
    height:76px;
}

.boxInner{
    position:absolute;
    top:0;
    left:7px;
    width:84px;
    height:70px;
    background:#dcd1ae;
    border:1px solid #876a3d;
    border-radius:7px;
    background-image:-webkit-radial-gradient(50% 30%, farthest-corner, #dcd1ae, #d6c693);
    background-image:   -moz-radial-gradient(50% 50%, farthest-corner, #dcd1ae, #d6c693);
    background-image:     -o-radial-gradient(50% 50%, farthest-corner, #dcd1ae, #d6c693);
    background-image:        radial-gradient(50% 50%, farthest-corner, #dcd1ae, #d6c693);
}

.day{
    position:absolute;
    top:-1px;
    left:8px;
    width:66px;
    font-size:50px;
    text-align:center;
    color:#36301d;
    text-shadow:1px 1px 0 #e4dcc4;
}

.year{
    position:absolute;
    -webkit-transform:rotate(90deg);
       -moz-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
         -o-transform:rotate(90deg);
            transform:rotate(90deg);
    width:70px;
    top:38px;
    left:43px;
    font-size:16px;
    color:#7b704f;
    text-shadow:1px -1px 0 #e4dcc4;
}

.month{
    position:absolute;
    bottom:0;
    width:100px;
    height:18px;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    background:#b00;
    border-top:1px solid #f00;
    border-bottom:1px solid #f00;
 ...

JavaScript

/* date display */