Faire son site en CSS3

de | 30 août 2011

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-css2

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-css3

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-css3

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é.

box-shadow-css3

-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).

gradient-css3

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.

transform-css3

-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.

3 réflexions au sujet de « Faire son site en CSS3 »

  1. Ping : Ressources pour développer en HTML5

  2. Ping : Baromètre des navigateurs septembre 2011

  3. Ping : Tutoriel : bouton CSS3

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.