01 Feb 2010

CSS3 : introduction

Posted at 14:05

0 comment(s) so far

Introduction aux css3

J'aborde ici un sujet qui commence à faire un peu de bruit parmis les webdesigners amateurs de nouveauté : CSS3.
Je vais tenter de faire le point sur cette nouvelle norme, les possibilités offertes, mais aussi les limites et les contraintes...

CSS3, pour quel navigateur ?

Concrètement, cette évolution des feuilles de style n'est pas encore supportée par tous les navigateurs.

Firefox, Safari et Chrome s'en sortent le mieux, à l'exception de quelques propriétés non interprétées la majeur-partie de votre design css3 sera correctement interprété sur ces trois navigateurs.

Du côté d'Opera l'implémentation est en cours, et on peut penser qu'elle sera effective au fil des mise-à-jour.
A l'inverse, les navigateurs Microsoft sont à la traine, avec pour seul lot de consolation le support de la propriété @font-face... C'est très important de tenir compte de ces paramètres. Il est à l'heure actuelle presque impensable de baser le design d'un site institutionnel sur cette norme...
En effet, Internet Explorer est encore très présent et vous risqueriez de fortement dégrader l'expérience utilisateur

Ce que vous pourrez faire avec CSS3

Au delà de l'attrait de la nouveauté, CSS3 apporte un réel bon en avant en matière de webdesign. Il vous sera par exemple possible de :

  • faire des divs avec des coins arrondis
  • appliquer des ombres portées sur les div et le textes
  • gérer la transparence
  • appliquer des dégradés sur des divs
  • gérer plusieurs arrières-plan pour une seule div
  • gérer les colonnes de texte

Ceci n'est qu'un aperçu, il existe plus de propriétés que vous pourrez découvrir ici css3.info [en]

Bien débuter

Maintenant que vous connaissez le potentiel de cette nouvelle norme, il est temps de passer à la pratique.

1 - Div aux coins arrondis

Voici le css qui permet d'arrondir les angles (ici exprimé en pixels pour les habitués de Photoshop).
Il est possible de définir chaque angle séparément, les valeurs sont déclarées comme à l'accoutumée dans le sens des aiguilles d'une montre.

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

2 - Ombres

CSS3 fait la distinction en les ombres pour le texte (text-shadow) et les ombres des "boîtes" (box-shadow). La première valeur correspond à la position horizontale de l'ombre ; une valeur négative la fait partir à gauche du texte. La seconde valeur correspond à la postion verticale; une valeur négative déplace l'ombre vers le haut. La troisième valeur correspond au flou . On termine avec la teinte de l'ombre, qu'il est possible d'exprimer soit en valeur hexadécimale, soit avec le système rgba...

Pour le texte

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

Pour une div, un span etc...

box-shadow:2px 2px 2px #333333;

3 - Transparence

Attention, les éléments contenus dans une div transparente vont hériter de la transparence.
La transparence va de 1 (opaque) à 0 (transparent).

opacity:0.5;

Conclusion

A l'heure actuelle, l'utilisation des propriétés de CSS3 est délicate en partie à cause des parts de marchés d'internet explorer qui ne supporte pas CSS3, toutes versions confondues...
CSS3 est donc à réserver à des sites dont la cible utilise les navigateurs basés sur Gecko ou webKit.
Ce n'est qu'une question de temps, car à IE9 prévoit la gestion des propriétés CSS3...enfin!

css3.info [en]
alsacreations.com [fr]
css3gallery.net [en]

Add your comment, now !




What's the last letter of the word koolme ? : 

Got to top