La liste des articles du blog LearningjQuery.com comporte une date intéressante sur la gauche, comme celle-ci :
Nous pouvons voir sur la photo que "2009" est disposé verticalement sur le côté droit. Utilisez Firebug pour afficher l'élément. Le texte "2009" apparaît dans la structure HTML. Cet article présente deux méthodes pour obtenir cet effet.
1. Utilisez la technologie Sprite pour réaliser
Le processus d'implémentation a été présenté en détail par Chris Coyier dans l'article " Date Display Technique with Sprites ". Voici une brève description du processus d'implémentation. Évidemment, nous ne voulons pas utiliser une image distincte pour chaque date, nous l'intégrons donc dans une seule image et organisons l'année, le mois et le jour dans différentes zones de l'image, comme le montre la figure :
1.Html
La structure HTML de la page est la suivante :
<div class="postdate">
<div class="mois m-06">juin</div>
<div class="jour j-30">30</div>
<div class="année y-2009">2009</div>
</div>
Le conteneur .postdate contient trois zones, correspondant à l'année, au mois et au jour, ce qui garantit l'intégrité sémantique.
Dans un système CMS comme WordPress, le code backend ressemble à ceci :
<div class="postdate">
<div class="mois m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="jour j-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="année y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>
2. CSS
C'est dans CSS que les sprites entrent réellement en jeu, utilisant les attributs de classe définis en HTML pour permettre l'affichage des images correspondantes.
Tout d'abord, laissez le conteneur avec l'attribut de classe .postdate être positionné de manière relative, de sorte que les trois zones qu'il contient soient positionnées de manière absolue et utilisent la même image d'arrière-plan. Définissez leur largeur et leur hauteur respectives et déplacez le texte vers l'extérieur pour révéler l'image d'arrière-plan.
Ensuite, définissez des positions d'arrière-plan spécifiques pour chaque mois (12), chaque jour (31) et chaque année (sur la base de 10 ans) pour afficher les images correspondantes.
.postdate {
position : relative ;
largeur : 50 px ;
hauteur : 50px ;
flotteur : gauche ;
}
.mois, .jour, .année {
position : absolue ;
retrait du texte : -1000em ;
image d'arrière-plan : url(/wp-content/themes/ljq/images/dates.png) ;
répétition d'arrière-plan : pas de répétition ;
}
.mois { haut : 2px gauche : 0 ; largeur : 32px hauteur : 24px ;}
.jour { haut : 25 px ; gauche : 0 ; largeur : 32 px ; hauteur : 25 px ;}
.année { bas : 0 ; droite : 0 ; largeur : 17px hauteur : 48px ;}
.m-01 {position d'arrière-plan : 0 4px ;}
.m-02 {position d'arrière-plan : 0 -28px ;}
.m-03 {position d'arrière-plan : 0 -57px ;}
... plus comme ça ...
.d-01 {position d'arrière-plan : -50px 0 ;}
.d-02 {position d'arrière-plan : -50px -31px ;}
.d-03 {position d'arrière-plan : -50px -62px ;}
... plus comme ça ...
.y-2006 {position d'arrière-plan : -150px 0 ;}
.y-2007 {position d'arrière-plan : -150px -50px ;}
.y-2008 {position d'arrière-plan : -150px -100px ;}
... plus comme ça ...