My cool date display in pure CSS, no sprites necessary

I came across this tutorial online at CSS Tricks . I think my CSS trick is way easier. But much props to the designer, so here is my pure CSS attempt, mapping the attributes to locate the sprite on the image for 31 days, 12 months, etc was too much work and I wanted to use my own font instead of the having to create an image file for the sprite, so here is a similar design but in pure css and with significantly less lines of code to accomplish it.

Using the same DOM model:

My first attempt at it

With some minor alignment voila:

Here is the Final code

CSS:

.postdate {
width:75px;
margin:0 auto;
height:65px;
position:relative;

}
.month {
font-family: ‘Roboto’, sans-serif;
width:50px;
text-transform:uppercase;
height:25px;
color:#355368;
position:absolute;
font-weight:700;
left:5px;
top:4px;
font-size: 25px;
word-spacing: 0px;
letter-spacing: 0px;
}
.day {
font-family: ‘Roboto’, sans-serif;
width:50px;
font-weight:700;
word-spacing: 0px;
text-align:center;
position:absolute;
left: 7px;
color:#355368;
font-size: 35px;
bottom: 0px;
letter-spacing: 5px;
line-height: 1;
}
.year {
font-weight:700;
font-family: ‘Roboto’, sans-serif;
font-size: 20px;
position:absolute;
right:2px;
color:#355368;
word-spacing: 0px;
width:30px;
height:40px;
top:9px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

HTML:

<div class="postdate">
<div class="month">JAN</div>
<div class="day">02</div>
<div class="year">2017</div>
</div>

Pretty happy with how it turned out. What do you think?

Leave a Reply