Creating A More Stylized Date System Using Only Text

To begin, I was looking for something more stylized for my date system in wordpress. I thought it would be nice to have it in a block but I didn’t want to cheat and simply make an image. So I came up with a nice solution.

To begin, I needed to decide how I wanted it to look. I chose a block format with the month across the top, the day large and under the month, and the year rotated 90 degrees next to the day.

So let’s begin building the code. First, we need to build the container for the date.

.the-date {
background-color:#0066cc;
color:#FFFFFF;
float:right;
width: 60px;
height: 25px;
position:relative;
padding:45px 5px 0px;
margin-left:10px;
}

Then we start to build how the date will look starting with the month. We set the month font size to 25 pixels and 5 pixels from the top. You can make the font smaller but for this tutorial we will leave it.

.the-date .month {
text-transform: uppercase;
font-size:25px;
line-height:25px;
position: absolute;
left:5px;
top:0px;
}

Next, we build the day which is just below the month, so we set the top position to 25 pixels and 5 pixels to the left. We add the 5 pixels to the left so the day is not touching the edge.

.the-date .day {
font-size:45px;
line-height:45px;
position: absolute;
left:5px;
top:25px;
}

Lastly, we create the year. Here is where the code gets a little tricky. We set the display to a box so it is easier to configure. Since we don’t want it touching the edge, we add a -5 pixel right padding. Then we position the year 35 pixels below the top which will align it with the day. Lastly, we add a -90 degree rotation using the Firefox 3.5 and webkit coding.

.the-date .year {
display:block;
position:absolute;
right:-5px;
top:35px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}

Then we build the html to utilize our CSS.

<div class="the-date">
<span class="month">July</span>
<span class="day">31</span>
<span class="year">2009</span>
</div>

Topics: CSS, Design, Web Development