Camen Design

c share + remix css-dates 4.1 KB

Under the Hood #6: Beautiful CSS Dates!

I don’t do enough CSS articles on this website, so time to break down one of my pet prides:
my little CSS-styled dates.

enlarged examples of date tiles


The backbone of any good CSS is good markup. The dates on this website are hyperlinks to the permalink page for each article. rel="bookmark" is an HTML convention to denote a permalink, this avoids having to use a class instead.

<a rel="bookmark" href="/code/uth6_beautiful_css_dates">
	<abbr title="April">Apr</abbr> 10<sup>th</sup> <abbr>’09</abbr>
	<sub>1:05 pm</sub>

Inside the hyperlink is just the date with some additional inline markup, abbreviations for the month and year, and sub around the time to try to reflect the visual nature of the time, whereby it’s displayed underneath, and is hidden (lesser importance) until moused-over.

This is a surprisingly little amount of HTML for those visuals, eh? I’ve seen sites that would use five or six DIVs to achieve the same effect. This is where the power of CSS comes in, to let us wrangle the most out of this small bit of markup.



We start by defining the outline shape of the permalink.

a[rel~=bookmark] {
	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: 2px; text-decoration: none; color: #666;
	background: #fcfcfc url("images/date-day-bg.png") repeat-x left 18px;

The attribute selector “[rel~=bookmark]” selects all hyperlinks that contain bookmark in their “rel” attribute. “~=” is used instead of just = as it allows for rel attributes that contain more than one word separated by spaces. E.g. “rel="bookmark alternate"”. Whilst highly unlikely, I’m just covering all bases.

The hyperlink is converted to block layout. “position: relative;” is applied so that the year can be absolutely positioned inside the date into the top-right corner, as in the markup the year appears last. “margin-bottom: 18px;” adds room below the date as space for the time to appear on mouse over.

The hyperlink itself forms the day of the date “10th” and the month ‘abbr-1’, and year ‘abbr-2’ are repositioned to the top. Therefore we set the font and background according to the day. The background-image is moved down so that it sits one pixel away from the red bar, leaving a white line, improving the overall look and feel.

The ordinal suffix “th” is not centred along with the number, but instead sits aside it. This is done by making its position absolute so that it gets lifted off of the text and no-longer affects the width of the text being centred.

/* lift the suffix, so that the number is fully centered */
a[rel~=bookmark] sup {
	position: absolute; padding-top: 4px;
	font-size: 10px; line-height: 10px; letter-spacing: normal;

Subtle, but so effective!


The month and year, both being abbreviations share some styles in common. We set the font style and return the letter-spacing to normal (as it was set to 2 in the hyperlink for the day number).

/* year + month */
a[rel~=bookmark] abbr {
	display: block; font: 10px Verdana, sans-serif; letter-spacing: normal; color: white;
	-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;

The month, already in the top-left corner of the date is stretched across the top, and uses a negative margin on the top and left edges so that it’s red border covers over the grey border of the hyperlink base.

/* month */
a[rel~=bookmark]>: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;

The :first-child selector is used to choose the first abbr element (containing the month), without affecting the other abbr element (the year).


The year is absolutely positioned and moved to the top-right corner. Because we used “position: relative;” on the hyperlink, “top: 0;” moves the year to the top of the hyperlink, not the top of the page!

/* year */
a[rel~=bookmark] 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;

A border is given so that the background-image gradient is covered on the left and right pixels giving a minute bevelled look to the top part of the date.


The sub element containing the time is hidden by default and not revealed until mouse-over

/* time */
a[rel~=bookmark] sub {
	display: none; height: 17px; border-top: 1px solid #bbd; margin: 0 3px;
	font: 9px/16px Verdana, sans-serif; letter-spacing: normal; text-align: center; color: #aac;

The time is given a top border that will act as a divider between the day and time when the hyperlink is expanded by showing the time.


On mouse over, two things are done. As a permalink, the date should have some kind of hover-state. You could change colours, background-images, anything. In my instance I decided to place a focus rectangle around it.

The focus rectangle is used by the OS to show focus on an element, typically a text box. Take this image of Google for example. On the Mac a blue outline is used, this varies from OS to OS, and browser to browser.

Screenshot of showing the blue focus-ring on the Google search text box

In both Safari (and Chrome) and Firefox you can set this focus ring using the OS/browser-selected colour.
(Another selector for :focus is included to also allow for keyboard navigation)

a[rel~=bookmark]:hover,	a[rel~=bookmark]:focus {
	margin-bottom: 0; text-decoration: none;
	/* Webkit */
	outline: auto 5px -webkit-focus-ring-color; outline-offset: -2px;
	/* Gecko */
	-moz-outline: -moz-mac-focusring solid 2px; -moz-outline-radius: 0 7px 7px;
	-moz-outline-offset: 0;

-webkit-focus-ring-color caters to Webkit, and on the following line -moz-mac-focusring handles Firefox. The outline also has to be curved (with -moz-outline-radius), but this is unfortunately not supported in Safari yet.

Despite being primarily for the Mac, this CSS works on other OSes, having different results. On Windows, the outline is shown white, on Linux it’s shown black, and on Google’s Chrome browser it’s even orange!

The second thing to do on mouse-over, of course, is to show the time by unhiding the sub element.

a[rel~=bookmark]:hover sub, a[rel~=bookmark]:focus sub {
	display: block;


This code is licenced under a Creative Commons Attribution 3.0 licence; please share and remix this, just include “Kroc Camen” and/or “” in your stylesheet comments, thanks.

Please find attached a zip file containing the full code, better formatted, and the background-images used.