Faire son site en CSS3

Le CSS3 apporte son lot de nouveautés qui facilitent la vie du développeur tout en rendant les sites web plus agréables. Malgré sa très grande utilité, son utilisation est pour le moment assez timide, toujours pour les mêmes raisons : Internet Explorer.

Cependant, à l’heure où les parts de marché du navigateur fondent comme neige au soleil, nombres de développeurs commencent à se poser des questions sur l’utilisation des propriétés CSS3. Pour ma part, j’y suis déjà passé pour mes sites personnels.

Quelques exemples CSS  (note : -webkit- concerne Chrome et Safari, pour Firefox vous devez remplacer le préfixe par : -moz- ) :

1) Le fameux border-radius, qui date déjà du css2. Sa non prise en charge par IE7 et même IE8 a longtemps exaspéré les développeurs web. Avec IE9 le cauchemar est enfin terminé puisque celui ci le prend en compte parfaitement.

border-radius: 1em;

2) Avec l’arrivée du css3, la propriété border-radius s’est retrouvée enrichie grâce à l’apparition des angles horizontaux et verticaux.  Cela permet d’obtenir des formes plus variées.

border-radius: 1em 1em 1em 1em/ 5em 5em 2em 2em;

-webkit-border-top-right-radius: 50px 30px; -webkit-border-bottom-right-radius: 50px 30px;

3) CSS3 permet d’appliquer un effet d’ombre à vos textes grâce à text-shadow. Choisissez le décalage de pixel vertical et horizontal, la largeur de l’ombre, la couleur, et vous obtenez un texte du plus bel effet. Internet Explorer(y compris le 9), éternel retardataire dans le domaine du css, ne prend pas la propriété en compte. Il existe des palliatifs mais le résultat est moins beau. Il faut noter que IE10 devrait combler les retards de IE dans ce domaine.

text-shadow: 2px 2px 2px #666666;

4) Autre propriété CSS3 très pratique : box-shadow. Appliquez un effet d’ombre sur vos éléments. Le fonctionnement est très semblable à text-shadow. Bien entendu IE ne prend pas en compte cette propriété.

-webkit-box-shadow: 3px 5px 20px #666666;

5) Si vous utilisiez un dégradé sur les blocs de votre site, fait à partir d’une image d’un pixel de large, vous allez surement être intéressé par cette propriété qui permet de réaliser un dégradé directement en CSS. A noter que cette propriété (ne marchant pas sur IE), a une sytaxe différente entre Firefox et Chrome/safari (webkit).

background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff))
background: -moz-linear-gradient(top, #00abeb, #fff);

background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));">background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

6) Une autre propriété intéressante, même si le résultat n’est pas toujours très beau, concerne la rotation d’élément.

-webkit-transform: skew(5deg,5deg);

7) Enfin, si vous êtes un grand utilisateur d’animation de transition. Vous allez pouvoir lâcher un peu JQuery ou Mootools. Il est en effet maintenant possible de réaliser des animations directement en CSS. Cette propriété très intéressante fera l’objet d’un prochain article.