Thu

28

Jan

2010

Snippet : Avant goût de Zen In Progress V2.0

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 :

  1.   <div class="date">
  2.     <span class="d03">03-</span>
  3.     <span class="m01">21-</span>
  4.     <span class="y2012">2012</span>
  5.   </div>

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 :

  1. < ?php
  2. $d = date("d");
  3. $m = date("m");
  4. $y = date("y");
  5.  
  6. $echo '<div class="date"><span class="d'.$d.'">'.$d.'-</span><span class="m'.$m.'">'.$m.'-</span><span class="y'.$y.'">'.$y.'-</span>';
  7. ?>

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.

  1. /*==== DATE CONTAINER ====*/
  2. .date {height: 128px;width:128px;overflow: hidden;background: url(date_bg.png) no-repeat; }
  3. .date span {display:block;position:absolute;width:128px;padding-top:128;overflow: hidden;height: 0px !important;height /**/:128px;}
  4. /*==== DAY ====*/
  5. .d01 {background: url(d01.png) no-repeat;}
  6. .d02 {background: url(d02.png) no-repeat;}
  7. .d03 {background: url(d03.png) no-repeat;}
  8. .d04 {background: url(d04.png) no-repeat;}
  9. .d05 {background: url(d05.png) no-repeat;}
  10. .d06 {background: url(d06.png) no-repeat;}
  11. .d07 {background: url(d07.png) no-repeat;}
  12. .d08 {background: url(d08.png) no-repeat;}
  13. .d09 {background: url(d09.png) no-repeat;}
  14. .d10 {background: url(d10.png) no-repeat;}
  15. .d11 {background: url(d11.png) no-repeat;}
  16. .d12 {background: url(d12.png) no-repeat;}
  17. .d13 {background: url(d13.png) no-repeat;}
  18. .d14 {background: url(d14.png) no-repeat;}
  19. .d15 {background: url(d15.png) no-repeat;}
  20. .d16 {background: url(d16.png) no-repeat;}
  21. .d17 {background: url(d17.png) no-repeat;}
  22. .d18 {background: url(d18.png) no-repeat;}
  23. .d19 {background: url(d19.png) no-repeat;}
  24. .d20 {background: url(d20.png) no-repeat;}
  25. .d21 {background: url(d21.png) no-repeat;}
  26. .d22 {background: url(d22.png) no-repeat;}
  27. .d23 {background: url(d23.png) no-repeat;}
  28. .d24 {background: url(d24.png) no-repeat;}
  29. .d25 {background: url(d25.png) no-repeat;}
  30. .d26 {background: url(d26.png) no-repeat;}
  31. .d27 {background: url(d27.png) no-repeat;}
  32. .d28 {background: url(d28.png) no-repeat;}
  33. .d29 {background: url(d29.png) no-repeat;}
  34. .d30 {background: url(d30.png) no-repeat;}
  35. .d31 {background: url(d31.png) no-repeat;}
  36. /*==== MONTH ====*/
  37. .m01 {background: url(m01.png) no-repeat;}
  38. .m02 {background: url(m02.png) no-repeat;}
  39. .m03 {background: url(m03.png) no-repeat;}
  40. .m04 {background: url(m04.png) no-repeat;}
  41. .m05 {background: url(m05.png) no-repeat;}
  42. .m06 {background: url(m06.png) no-repeat;}
  43. .m07 {background: url(m07.png) no-repeat;}
  44. .m08 {background: url(m08.png) no-repeat;}
  45. .m09 {background: url(m09.png) no-repeat;}
  46. .m10 {background: url(m10.png) no-repeat;}
  47. .m11 {background: url(m11.png) no-repeat;}
  48. .m12 {background: url(m12.png) no-repeat;}
  49. /*==== YEAR ====*/
  50. .y2010 {background: url(y2010.png) no-repeat;}
  51. .y2011 {background: url(y2011.png) no-repeat;}
  52. .y2012 {background: url(y2012.png) no-repeat;}
Author: barst    Category: snippet
2 commentaires    Tags:
Vous pouvez suivre tous les commentaires de ce billet via le flux RSS 2.0.
Vous pouvez aller à la fin et laisser un commentaire. Pinging n'est pas autorisé.

2 Commentaires

  1. 1
    Mercredi, 3. février 2010 : Plume 

    Pourquoi ne pas utiliser les sprites ?

  2. 2
    Lundi, 8. février 2010 : barst 

    Les sprites seront utilisés dans la version finale et optimisée, ici ce n’est qu’une présentation de la méthode.

    Je compte faire 3 sprites : les jours, les mois et les années.
    Il est possible de tout fusionner en un seul sprite mais je ne suis pas friant des sprites énormes….

    Ceux des jours et des mois ne bougeront plus mais celui des années est destiné à évoluer (j’espère que ce site aura une vie longue….)

Laisser un commentaire

« Les liens de la semaine - Semaine #03 2010
Les liens de la semaine - Semaine #04 2010 »