LearningjQuery.com tiene una presentación bastante interesante de las fechas de las publicaciones de su blog. Revisalo:
El tipo de letra y el año en vertical deberían indicarle de inmediato que se están utilizando imágenes para lograr esto. Pero también tenga en cuenta que la información de la fecha se presenta como texto, como debería ser, en el marcado:
¡Un pico rápido en Firebug revela la hermosa simplicidad!
Sprites en su mejor momento
Con suerte, es bastante obvio que cada fecha no tiene su propio gráfico único. Las fechas se juntan a partir de un solo gráfico (¡sprites css!), Donde se muestran diferentes partes más pequeñas del gráfico en las tres regiones diferentes: día, mes y año. Quizás reconozca esto por una técnica similar que Joost de Valk publicó hace casi un año.
Echa un vistazo a esta belleza:
El HTML:
El HTML del resultado final será así:
<div class="postdate">
<div class="month m-06">Jun</div>
<div class="day d-30">30</div>
<div class="year y-2009">2009</div>
</div>Tenemos una envoltura y tres regiones. Esto nos da lo que necesitamos para hacer coincidir estos esquemas:
En un CMS como WordPress, el código de backend a producir sería así:
<div class="postdate">
<div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>El CSS
El CSS es donde realmente ocurre la acción del sprite. Con esos nombres de clases especiales que hemos configurado en el HTML, podemos establecer qué partes de la imagen usar.
Primero, establecemos el posicionamiento relativo en el padre. Luego posicionamos absolutamente cada una de las tres regiones dentro. Configuramos los tres para que usen la misma imagen de fondo (nuestro objeto), configuramos sus respectivos anchos y alturas y sacamos el texto de la página.
Luego, configuramos cada uno de los meses (12 posibilidades), días (31 posibilidades) y años (va a 10 años) con el posicionamiento de fondo específico necesario para mostrar la región específica que necesitamos.
.postdate {
position: relative;
width: 50px;
height: 50px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(/wp-content/themes/ljq/images/dates.png);
background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}
.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
... more like this ...
.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
... more like this ...
.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
... more like this ...
¡Disfrutar!