Blog style post dates, using CSS


span.postDate          {display: block; position: relative; width: 60px; margin-bottom: 18px;
                    border: 1px solid #888885; -moz-border-radius: 5px; -webkit-border-radius: 5px;
/* day */               font: 24px/35px "Helvetica Neue", Arial, sans-serif; text-align: center;
                    letter-spacing: 0px; text-decoration: none; color: #666;
                    background: #fcfcfc url("images/date-day-bg.png") repeat-x left 17px;}

span.postDate sup          /* lift the suffix, so that the number is fully centered */
                    {position: absolute; padding-top: 4px;
                    font-size: 10px; line-height: 10px; letter-spacing: normal;}

/* year + month */
span.postDate abbr          {display: block; font: 10px Verdana, sans-serif; letter-spacing: normal; color: white;
                    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;}
/* month */
span.postDate>:first-child     {width: 50px; margin: -1px 0 0 -1px; padding: 0 5px; border: 1px solid #832a28;
                    line-height: 16px; text-align: left; text-transform: uppercase;
                    background: #a33537 url("images/date-month-bg.png") repeat-x bottom left;}
/* year */
span.postDate sup+abbr     {position: absolute; top: 0; left: 0; width: 52px; padding: 0 3px;
                    border: 1px solid #a33537; border-bottom: 1px solid #832a28;
                    line-height: 14px; color: #eaa; text-align: right;}