Aperçu des nouveautés CSS 3
Avec le CSS 3, une multitude de nouvelles possibilités s'ouvrent aux développeurs web. Sans dresser un inventaire exhaustif (les spécifications officielles sont là pour ça), je vous propose de découvrir brièvement quelques une de ces nouveautés, du moins les plus visuelles.
Attention, pour pouvoir profiter de ces effets il est malheureusement nécessaire d'avoir un navigateur récent qui supporte ces nouvelles normes comme Firefox, Konqueror, Opera ou Safari/Webkit.
box-shadow
Cet attribut CSS permet de rajouter un effet d'ombre à vos boîtes. Plus besoin d'utiliser d'images en fond, le navigateur calcule dynamiquement les ombres à afficher selon vos paramètres :
Ce champ est entouré d'une ombre.
Code CSS :
box-shadow: 2px 2px 2px #444;
Les paramètres sont le décalage en largeur, le décalage en hauteur, la largeur de l'ombre et la couleur de cette dernière.
Note : pour l'instant seul firefox/opera/safari supportent cette option. Utilisez la commande "-moz-box-shadow" pour voir l'effet appliqué.
border-radius
L'attribut border-radius permet d'arrondir les angles de votre boîte.
Ce cadre a les bords arrondis.
Code CSS :
border-radius:5px 5px 5px 5px;
Les paramètres sont les rayons de courbure des 4 angles : supérieur gauche, supérieur droite, inférieur droite, inférieur gauche.
Note : pour l'instant seul firefox/opera/safari supportent cette option. Utilisez la commande "-moz-border-radius" pour voir l'effet appliqué.
text-shadow
Cet attribut permet d'ajouter un effet d'ombre sous un texte de votre page.
Je suis un texte ombragé.
Code CSS
text-shadow:2px 2px 3px #444;
Note : pour l'instant seul firefox/opera/safari supportent cette option. Utilisez la commande "-moz-text-shadow" pour voir l'effet appliqué.
Passez au CSS 3
Après ce très rapide aperçu, j'espère avoir mis en avant la capacités de la nouvelle révision du CSS et les importants atouts qu'elle peut apporter pour un rendu plus complexe sans alourdir vos pages. Mais les spécifications ne s'arrêtent pas là il y a de très nombreuses autres nouveautés comme border-image qui permet de charger des portions d'image pour remplacer les bordures de boîte standarts, ou les selecteurs d'attributs qui permet de jouer avec les expressions rationelles sur vos noms de classes, surpuissant !
Pour aller plus loin :
ps : la plupart des attributs n'étant pas encore finalisés, s'ils ne fonctionnent pas essayez avec le préfixe -moz- (ex : -moz-border-radius).
Article précédant :
Un objet qui se dirige vers un pointArticle suivant :
Media Player Classic : pixel shaders pour les débutants!
Billets similaires | Tagscss3 attributs visuels ombre text-shadow box-shadow border-radius |
Commentaires 8 commentaires
dante le 27 Juillet 2009 à 9:24
J'ai vu ça il y a quelques semaines y a beaucoup de petits trucs pratiques mais ça reste du gadget. Enfin, à part 2 nouveautés tout juste énorme :- multi background (!) Ca va éviter de faire plusieurs DIV pour faire tes jolis cadres
- selector, comme tu le dis, surpuissant de pouvoir enfin simplifier les gros sites avec les gros CSS
Yep le 27 Juillet 2009 à 17:48
- J'avoue ne pas encore avoir testé, mais les petits exemples de css3.info semble bien attrayant :D(un peu hors sujet mais...)
- Pour les fanatiques de design il y a la bibliothèque JQuery (en javascript)
+ elle facilite la vie de tout développeur javascript
+ et permet aussi de faire des jolies animations
+ de faire des pop-up javascript qui en jette :D
+ et plein d'autres choses
- un petit exemple de menu avec jQuery : (je suis totalement fan de l'exemple A)
http://snook.ca/technical/jquery-bg
Seb le 27 Juillet 2009 à 17:56
Yep > Il est carrément dément niveau effets. Mais dans l'immédiat je garde ma ligne de conduite pour Kookyoo : la recette "fait maison". C'est moins classe mais ça permet de mieux se dépatouiller quand on est seul à coder. Sinon c'est certain, je pensais même pas pouvoir faire un truc aussi fluide et propre en javascript :)
Bonmarch le 27 Juillet 2009 à 18:57
A un moment, je croyais que tu parlais de Counter Strike Source 3 ;pdante le 28 Juillet 2009 à 9:11
J'ai pas mal utilisé jquery, et il s'avère que c'est le genre de lib tout juste indispensable = )Impossible de faire du JS sans selector comme ceux là ... Un gain de temps énorme, et voilà comment c'est important quand tu fais du WEB :)
anonym le 31 Juillet 2009 à 17:37
css3 animations une autre partie de ce que css3 nous réserve...Ce qu'il faut noter c'est qu'avec HTML5 qui apportera aussi son lot de nouveautés intéressantes et CSS3 qui fait passer de 120 à plus de 250 les propriétés CSS c'est le métier d'intégrateur qui va vite devenir indispensable...
Seb le 31 Juillet 2009 à 19:03
anonym > C'est toujours un plaisir que de voir que tu nous rend visite sur Kookyoo. 250 propriétés ! Je ne pensais pas autant. Et concernant HTML 5 j'ai hâte de pouvoir l'implémenter, pour l'instant je me limite au CSS 3, perdre quelques détails visuels pour les visiteurs sous IE ce n'est pas trop grave, mais le support des vidéos sans utiliser flash, c'est quelque chose que j'ai vraiment envie de mettre en place.Mathieu le 28 Octobre 2009 à 17:50
C'est vraiment une belle manière de mettre en valeur ses textes.Attention cependant a prévoir un contraste assez fort entre le texte et le fond, au cas où le navigateur n'interpreterait pas la propriété text-shadow...