Voici ce que ça donne :

jelixorg_css3.png

Sur cette page web (pas encore en ligne), il y a seulement deux images : le logo en haut à gauche, et le chevron blanc (que l'on ne voit pas..) dans la barre du haut. Le reste, c'est pure CSS[1] :

  • transform pour la rotation des trois boites en bas.
  • text-shadow pour les effets de blur sur les textes dans les boites inclinées.
  • box-shadow pour les ombrages sur ces mêmes boites, mais aussi sur la barre du haut.
  • border-radius pour tout les coins arrondis.

En quelques lignes de CSS j'ai pu réaliser des effets plutôt sympa, alors qu'il m'aurait fallu beaucoup de temps à manipuler un logiciel de dessin, à faire les découpes d'images, à rajouter des balises superflues dans la page, pour finalement faire pareil, voir moins bien (Les boites inclinées, c'est du pur HTML, donc le texte reste sélectionnable, accessible...)

Bien sûr, dans les navigateurs ne supportant aucun de ces styles, ça fera un peu "carré" :

jelixorg_nocss3.png

Mais à la limite quelle importance ? La page reste propre, lisible.

Voilà donc des styles que vous pouvez utiliser dés maintenant sans risque. Lancez vous !

PS: si vous trouvez vraiment ce design moche, envoyez vos maquettes à laurent at jelix point org :-p Je suis ouvert à toute proposition graphique ;-)

Notes

[1] la plupart des propriétés utilisées sont en fait préfixées par -moz- et -webkit- vu que leurs spécifications ne sont pas complètement validées au W3C