Loin d'être inactif, je consacre mes temps libres à l'élaboration de la refonte de ce site en réalisant un CMS maison.
La partie "backend" avance à grand pas et sera bientôt pleinement opérationnel.
A l'opposée, la partie "frontend" n'est même pas commencée mais je planche déjà sur certains éléments notamment leur rendu.
Je vais donc en profiter pour vous montrer comment seront affichées les dates des posts de la partie blog.
Une date très Zen
Pour coller au nom du site et à une ambiance que j'apprécie, la nouvelle version aura un thème plus zen.
Pour cela, je vais utiliser un set d'icône d'inspiration japonais provenant du site http://dezignus.com.
Dissection du rendu
Ce rendu est dynamique et peut afficher n'importe quelle date à partir d'une base de 48 images (pour 4 ans) et de CSS.
Pour une seule date, 4 images sont nécessaires :
Le code HTML est vraiment très simple :
03-
21-
2012
La date est décomposée en 3 éléments span contenant respectivement le jour, le mois et l'année.Les éléments span se voient attribués un attribut class contenant également les informations du jour, mois et année préfixées de d (day), m (month) et y (year).
Ce résultat peut très bien être généré par quelques lignes de PHP :
'.$d.'-'.$m.'-'.$y.'-';
?>
La magie des CSS
Le principe consiste à afficher les span en mode block et à les positionner en absolute.
Ce positionnement fait sortir les éléments span du flux de rendu et ils se superposent au sein du conteneur parent date.
Une dernière astuce pour masquer le texte consiste à jouer sur l'attribut padding-top pour pousser le texte en dehors de son conteneur.
Au final, à chaque class est associé une image représentant soit un jour, un mois ou une année.
/*==== DATE CONTAINER ====*/
.date {height: 128px;width:128px;overflow: hidden;background: url(date_bg.png) no-repeat; }
.date span {display:block;position:absolute;width:128px;padding-top:128;overflow: hidden;height: 0px !important;height /**/:128px;}
/*==== DAY ====*/
.d01 {background: url(d01.png) no-repeat;}
.d02 {background: url(d02.png) no-repeat;}
.d03 {background: url(d03.png) no-repeat;}
.d04 {background: url(d04.png) no-repeat;}
.d05 {background: url(d05.png) no-repeat;}
.d06 {background: url(d06.png) no-repeat;}
.d07 {background: url(d07.png) no-repeat;}
.d08 {background: url(d08.png) no-repeat;}
.d09 {background: url(d09.png) no-repeat;}
.d10 {background: url(d10.png) no-repeat;}
.d11 {background: url(d11.png) no-repeat;}
.d12 {background: url(d12.png) no-repeat;}
.d13 {background: url(d13.png) no-repeat;}
.d14 {background: url(d14.png) no-repeat;}
.d15 {background: url(d15.png) no-repeat;}
.d16 {background: url(d16.png) no-repeat;}
.d17 {background: url(d17.png) no-repeat;}
.d18 {background: url(d18.png) no-repeat;}
.d19 {background: url(d19.png) no-repeat;}
.d20 {background: url(d20.png) no-repeat;}
.d21 {background: url(d21.png) no-repeat;}
.d22 {background: url(d22.png) no-repeat;}
.d23 {background: url(d23.png) no-repeat;}
.d24 {background: url(d24.png) no-repeat;}
.d25 {background: url(d25.png) no-repeat;}
.d26 {background: url(d26.png) no-repeat;}
.d27 {background: url(d27.png) no-repeat;}
.d28 {background: url(d28.png) no-repeat;}
.d29 {background: url(d29.png) no-repeat;}
.d30 {background: url(d30.png) no-repeat;}
.d31 {background: url(d31.png) no-repeat;}
/*==== MONTH ====*/
.m01 {background: url(m01.png) no-repeat;}
.m02 {background: url(m02.png) no-repeat;}
.m03 {background: url(m03.png) no-repeat;}
.m04 {background: url(m04.png) no-repeat;}
.m05 {background: url(m05.png) no-repeat;}
.m06 {background: url(m06.png) no-repeat;}
.m07 {background: url(m07.png) no-repeat;}
.m08 {background: url(m08.png) no-repeat;}
.m09 {background: url(m09.png) no-repeat;}
.m10 {background: url(m10.png) no-repeat;}
.m11 {background: url(m11.png) no-repeat;}
.m12 {background: url(m12.png) no-repeat;}
/*==== YEAR ====*/
.y2010 {background: url(y2010.png) no-repeat;}
.y2011 {background: url(y2011.png) no-repeat;}
.y2012 {background: url(y2012.png) no-repeat;}
