Aller au contenu | Aller au menu | Aller à la recherche

Petits plaisirs avec CSS3

Par Laurentj le jeudi, décembre 4 2008, 22:57 - Projets - Lien permanent

Pour la sortie de la version 1.1 de Jelix, je suis en train de faire quelques retouches sur le design du site web jelix.org. Je suis loin d'être un as du web design, de maitriser Gimp ou autre comme un pro, alors j'essaye de m'amuser avec les dernières propriétés CSS implémentées dans Firefox 3.1 qui arrive.

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

Commentaires

1. Le jeudi, décembre 4 2008, 23:42 par Daniel Glazman

Ah ouais, c'est chouette les CSS, faudrait que je m'y mette ;-)

2. Le vendredi, décembre 5 2008, 00:00 par Vincent

Ouah, super classe la transformation par CSS3. J'espère juste qu'ils corrigeront le décalage des lettres avant la sortie officielle de Firefox 3.1.

3. Le vendredi, décembre 5 2008, 00:08 par lrbabe

J'aime la philosophie "Tous les visiteurs ne verront pas exactement la même chose, et alors ?".
Si on n'arrive pas à la propager, le Web restera tiré vers le bas par IE6

4. Le vendredi, décembre 5 2008, 00:13 par lrbabe

Edit: ce qui ne veut pas dire que l'on doit laisser derrière tous les navigateurs un peu vieux. Je suis en train d'implémenter la propriété CSS3 border-image sous forme de plugin jQuery.
Ça marche plutôt bien sous IE7, opera, safari, chrome, FF3.1, mais il y a un petit souci avec FF3
Je m'en sers pour dessiner les bords de mon blog (voir signature).

5. Le vendredi, décembre 5 2008, 00:36 par Laurentj

@Daniel : il n'est jamais trop tard pour s'y mettre. Tu verras c'est sympa :-)

@irbabe : sous FF3.1, ton plugin est un peu inutile : http://ljouanneau.com/blog/post/200... ;-)

6. Le vendredi, décembre 5 2008, 01:11 par Rik

Tu vas me trouver super chiant mais comme c'est toi qui mentionne -webkit, ce serait bien que tu l'utilises sur le site :)

Sinon, évidemment c'est du bonheur en barre d'avoir toutes ces nouvelles propriétés. Et plus sexy que le support d'autres propriétés toutes aussi cruciales (max-width and co par exemple).

7. Le vendredi, décembre 5 2008, 02:34 par lrbabe

@Laurentj : Sous les dernières versions de Webkit et Gecko, le plugin utilise l'implémentation native de border-image, bien entendu : )

8. Le vendredi, décembre 5 2008, 10:10 par gl3am

Va falloir que je m'y mette aussi à CSS3 il y a vraiment des trucs super qui facilitent la vie.

9. Le vendredi, décembre 5 2008, 10:12 par Sylvain

Dommage qu'il y ait de l'aliasing lors de la rotation des box :/
Y'a pas une option FSAA dans CSS3 ? :D

10. Le vendredi, décembre 5 2008, 11:04 par Fabrice

Un vrai scandale de ne pas faire le logo en SVG ! ;-)

11. Le vendredi, décembre 5 2008, 11:13 par Laurentj

@rik : sur la version actuelle du site (qui n'utilise pas toutes ces propriétés), il y a effectivement quelques -moz-border-radius, mais pas de -webkit-.. Toutefois, sur la version que je prépare, tout ces styles sont dupliqués dans leurs version -moz-, -webkit- et native (sans prefixe, comme ça, dans le futur...). Je me demande même si je vais pas dupliquer en -o- aussi pour opera (je ne sais pas encore ce qui est vraiment implémenté chez opera).

@fabrice : le logo original est en SVG bien sûr :-) Mais le problème là, c'est que ce serait un peu trop "light" comme page si le logo ne s'affichait pas dans certains navigateurs, donc j'ai mis la version PNG. :-)

12. Le vendredi, décembre 5 2008, 15:00 par lrbabe

le border-radius est implémenté dans Opéra, le border-Image pas encore, text-shadow je crois que oui, transform et box-shadow je crois que non.

13. Le vendredi, décembre 5 2008, 19:34 par EmmanuelC

> J'aime la philosophie "Tous les visiteurs ne verront pas exactement la même chose, et alors ?".
Si on n'arrive pas à la propager, le Web restera tiré vers le bas par IE6

Les 2 problèmes restants sont :

- lorsqu'on en aura terminé avec ie6, il restera... ie7 :-)

- la grosse difficulté à argumenter en sens inverse auprès de clients et parfois des utilisateurs (via les clients en fait) à la question "pourquoi la majorité de devrait-elle pas avoir accès à la meilleure qualité, d'autant qu'avec un peu de bricol...pardon, travail, transformation en images, commentaires conditionnels etc. on peut avoir le même look sur les différents navigateurs ?"

Mais je suis complètement d'accord néanmoins... pousser au maximum pour adopter le meilleur de CSS et avoir des "dégradations agréables" sur les vieux navigateurs.