<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>code · Under the Hood #6: Beautiful CSS Dates!</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/code/rss" title="Just code" />
<link rel="canonical" href="/code/uth6_beautiful_css_dates" />
<!-- =================================================================================================================== -->
<header>
	<h1><a href="/" rel="index">
		Camen Design
	</a></h1>
	<nav><ul>
		<li><a href="/">all</a></li>
		<li><a href="/projects">projects</a></li>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/" rel="tag">code</a></li>
		<li><a href="/art/">art</a></li>
		<li><a href="/link/">link</a></li>
		<li><a href="/poem/">poem</a></li>
		<li><a href="/audio/">audio</a></li>
	</ul><ul>
		<li><a href="/web-dev/">web-dev</a></li>
		<li><a href="/annoyances/">annoyances</a></li>
		<li><a href="/eve/">eve</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/inspiration/">inspiration</a></li>
		<li><a href="/windows/">windows</a></li>
		<li><a href="/gift/">gift</a></li>
		<li><a href="/gaming/">gaming</a></li>
		<li><a href="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul>
	<a rel="previous" href="/code/mod_rewrite-css-targeting">
		older article →
	</a><a rel="next" href="/code/uth7_floaty-abbrs">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2009-04-10T13:05:00+01:00">
		<sup>1:05<abbr>pm</abbr> • 2009</sup>
		<abbr title="April">Apr</abbr> 10
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/code/uth6_beautiful_css_dates" rel="bookmark tag">code</a></li>
		<li><a href="/code-is-art/uth6_beautiful_css_dates">code-is-art</a></li>
		<li><a href="/web-dev/uth6_beautiful_css_dates">web-dev</a></li>
	</ul>
	<!-- licence -->
	<small>
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
		share + remix
	</small>
	<!-- enclosure -->
	<a type="application/zip" href="/code/uth6_beautiful_css_dates/css-dates.zip">
		css-dates <em>4.1 KB</em>
	</a>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>Under the Hood #6: Beautiful CSS Dates!</h1>
<p>
	<strong>I don’t do enough CSS articles on this website,</strong> so time to break down one of my pet prides:<br />
	my little CSS-styled dates.
</p>
<img src="/code/uth6_beautiful_css_dates/example.png" alt="enlarged examples of date tiles" width="600" height="200" />


<h2 id="uth6_markup">Markup</h2>
<p>
	The backbone of any good CSS is good markup. The dates on this website are hyperlinks to the permalink page for each
	 article. <code>rel="bookmark"</code> is an
	<a href="http://www.w3.org/TR/html401/types.html#type-links" rel="external">HTML convention</a> to denote a
	permalink, this avoids having to use a class instead.
</p>

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

<p>
	Inside the hyperlink is just the date with some additional inline markup,
	<a href="/code/using-abbr">abbreviations</a> for the month and year, and <code>sub</code> 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.
</p><p>
	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.
</p>


<h2 id="uth6_css">CSS</h2>
<h3 id="uth6_day">Day</h3>
<p>
	We start by defining the outline shape of the permalink.
</p>

<pre><code>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;
}</code></pre>

<p>
	The attribute selector “<code>[rel~=bookmark]</code>” selects all hyperlinks that contain <q>bookmark</q> in
	their “<code>rel</code>” attribute. “<code>~=</code>” is used instead of just <code>=</code> as it allows
	for <code>rel</code> attributes that contain more than one word separated by spaces. E.g.
	“<code>rel="bookmark alternate"</code>”. Whilst highly unlikely, I’m just covering all bases.
</p><p>
	The hyperlink is converted to block layout. “<code>position: relative;</code>” 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.
	“<code>margin-bottom: 18px;</code>” adds room below the date as space for the time to appear on mouse over.
</p><p>
	The hyperlink itself forms the day of the date “10<sup>th</sup>” 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.
</p><p>
	The ordinal suffix “<sup>th</sup>” 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.
</p>

<pre><code>/* 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;
}</code></pre>

<p>
	Subtle, but so effective!
</p>


<h3 id="uth6_month">Month</h3>
<p>
	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).
</p>

<pre><code>/* 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;
}</code></pre>

<p>
	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.
</p>

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

<p>
	The <abbr title="first-child">“<code>:first-child</code>”</abbr> selector is used to choose the first
	<abbr title="abbreviation"><code>abbr</code></abbr> element (containing the month), without affecting the other
	<abbr title="abbreviation"><code>abbr</code></abbr> element (the year).
</p>


<h3 id="uth6_year">Year</h3>
<p>
	The year is absolutely positioned and moved to the top-right corner. Because we used
	“<code>position: relative;</code>” on the hyperlink, “<code>top: 0;</code>” moves the year to the top of
	the hyperlink, not the top of the page!
</p>

<pre><code>/* 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;
}</code></pre>

<p>
	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.
</p>


<h3 id="uth6_time">Time </h3>
<p>
	The <code>sub</code> element containing the time is hidden by default and not revealed until mouse-over
</p>

<pre><code>/* 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;
}</code></pre>

<p>
	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.
</p>


<h3 id="uth6_mouseover">Mouse-Over </h3>
<p>
	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.
</p><p>
	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.
</p>
<img src="/code/uth6_beautiful_css_dates/google-focus-ring.png" alt="Screenshot of google.com showing the blue focus-ring on the Google search text box" width="600" height="200" />
<p>
	In both Safari (and Chrome) and Firefox you can set this focus ring using the OS/browser-selected colour.<br />
	(Another selector for <q><code>:focus</code></q> is included to also allow for keyboard navigation)
</p>

<pre><code>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;
}</code></pre>

<p>
	<q><code>-webkit-focus-ring-color</code></q> caters to Webkit, and on the following line
	<q><code>-moz-mac-focusring</code></q> handles Firefox. The outline also has to be curved (with
	<q><code>-moz-outline-radius</code></q>), but this is unfortunately not supported in Safari yet.
</p><p>
	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!
</p><p>
	The second thing to do on mouse-over, of course, is to show the time by unhiding the <code>sub</code> element.
</p>

<pre><code>a[rel~=bookmark]:hover sub, a[rel~=bookmark]:focus sub {
	display: block;
}</code></pre>


<h2 id="uth6_compatibility">Compatibility </h2>
<ul>
	<li>Works in Firefox 2 &amp; 3 and above, Safari 4 (<abbr title="Windows">Win</abbr>/Mac), Chrome 2.0</li>
	<li>Works in Internet Explorer 8!</li>
	<li>A bug in Webkit for Safari 3 (and Chrome 1.0) means that the ordinal is misplaced.<br />
	I’m not sure what causes this, I can’t work out how to fix it either. <strong>Suggestions
	please!</strong></li>
	<li>Due to lack of <code>border-radius</code> in non- Gecko-based (such as Firefox) or Webkit-based (such as
	Safari) browsers, the rounded corners do not display on Opera, for example</li>
</ul>

<hr />

<p>
	<strong>This code</strong> is licenced under a Creative Commons Attribution 3.0 licence; please share and remix
	this, just include “Kroc Camen” and/or “camendesign.com” in your stylesheet comments, thanks.
	<br /><br />
	Please find attached a zip file containing the full code, better formatted, and the background-images used.
</p>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/code/uth6_beautiful_css_dates.rem">Rem</a> •
		<a href="/code/uth6_beautiful_css_dates.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->