J'ai changé des trucs au niveau du design de ce blog, c'est pas forcément beau, faut dire que je suis pas très doué en design...

Mais quand même, ça pète! J'ai utilisé pour ce blog trois des nouvelles propriétés CSS 3 qui vient juste de sortir ou qui n'est pas encore sorti ou ...

En fait c'est compliqué... On va dire que c'est des trucs qui existent et qui marchent avec firefox, safari nouvelle version, et pas avec internet explorer!!!

Et ça fait quoi? Ça fait des ombres sur les titres, les images, les cadres, des cadres arrondis...

On peut même faire de la vidéo et des trucs en 3D qui bougent partout, mais pour l'instant je me contente des quelques ombres et des coins arrondis...

Concrètement, ceux qui utilisent les dernières version de firefox ou de safari voient mon blog différemment... Les autres ne voient rien, tant pis pour eux.

Ce titre a une ombre!!!

Et moi je trouve ça génial!

Comment on fait? On utilise trois des nouvelles propriétés CSS vachement bien.

Text-shadow pour les ombres du texte

text-shadow: 5px 5px 2px;

permet d'avoir une ombre à 5 px à droite, 5px en bas et 2px de flou...

Box-shadow pour les ombres des boites!!!

box-shadow: 10px 10px 20px;
-webkit-box-shadow: 10px 10px 20px;
-moz-box-shadow: 10px 10px 20px;

Permet d'avoir comme pour le texte, des ombres sur mes boites, 10 px à droite, 10 px en bas et 20 px de flou...

Border-radius pour les coins arrondis

border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;

Permet d'avoir des coins arrondis dans les boites (regardez les commentaires, le menu à droite!!!).

Pourquoi -moz et -webkit?

Parce que, comme dit plus haut, c'est pas encore bien fini, du coup c'est en phase de test et on utilise -moz pour tester sur mozilla et -webkit pour safari... Je trouve ça un peu débile, mais c'est comme ça. Certainement qu'un jour on pourra les enlever.

J'adore tester les trucs nouveaux, ces nouvelles propriétés CSS c'est plein de nouveaux joujoux pour les geeks un peu nuls comme moi... Les vrais webdesigner faisaient des coins arrondis depuis longtemps, sauf que maintenant c'est facile!

Tout ça en image!!!

Avec firefox et du CSS3!!!


Avec Internet Explorer et pas de CSS3!!!

On vous le répètera jamais assez, larguez Internet Explorer, mettez vous à firefox, sinon vous ne profiterez pas des dernières évolutions en matière de web!!!