Ce que nous réserve CSS3 en 2010
2
L’écriture des spécifications CSS progresse à grands pas, et la version 3 comporte déjà plusieurs modules implémentés dans les navigateurs récents. L’année 2010 verra certainement nos habitudes changées par les nouvelles possibilités offertes en CSS 3. D’ores et déjà de nombreuses utilisations concrètes voient le jour.
Vous pourrez constater l’état d’avancement des différents modules CSS sur la page récapitulative Cascading Style Sheets : Current Work.
Des coins arrondis
Du Web 2.0
avec style
La propriété border-radius arrondit les angles de n’importe quel élément HTML, sans avoir besoin d’images ni de JavaScript.
Using Rounded Corners with CSS3 (EN)
Créer des coins arrondis en CSS et sans images
CSS: border-radius and -moz-border-radius (EN)
La gestion de l’opacité
La transparence enfin maîtrisée !
L’interprétation des images transparentes en PNG (24 bits) est une première délivrance pour les web-designers qui pourront mettre en Å“uvre plus de créativité. La nouvelle notation des couleurs et de la gestion intégrée de leur transparence (RGBa) va être une seconde avancée significative.
CSS3 : la transparence de couleur avec RGBa
CSS3 opacity : transparency of an element in css (EN)
Les arrière plans multiples
Elle n’est pas (plus) belle la vie ?
Grâce aux nouvelles valeurs multiples utilisables dans la propriété CSS background, il sera désormais possible d’appliquer plusieurs images d’arrière-plan sur le même élément, sans devoir en imbriquer plusieurs.
Arrière-plans avec CSS 3 Backgrounds
Le multi colonage
De la P.A.O. sur le Web ?
Les propriétés column-width et column-gap vont générer une mise en page sous forme de colonnes multiples, où le texte va s’écouler automatiquement d’une colonne à la suivante.
Les ombrages
Nul besoin d’un surcroît d’images
La propriété box-shadow crée un ombrage solide ou dégradé sur tous les éléments HTML.
Des effets sur le texte
Les CSS3 concurrencent les styles Photoshop ?
Text-shadow, Photoshop like effects using CSS (EN)
Des boutons esthétiques
Arrondis, dégradés, animés.
L’association de plusieurs propriétés CSS3 permet de concevoir des boutons de lien d’une esthétique irréprochable sans utiliser d’images.
Super Awesome Buttons with CSS3 and RGBA (EN)
Les polices exotiques
Les polices web-safe ne sont plus seules.
@font-face permet d’incorporer des polices externes et variées.
21 Awesome @font-face Embeddable Typefaces (EN)
Les dégradés
Un peu de douceur dans ce monde uni.
De nouvelles propriétés gradient permettent de réaliser et gérer des arrière-plans de teintes dégradées.
Arrière-plans avec CSS3 Backgrounds
Des animations
E pur si muove !
Grâce aux dernières évolutions du langage et au module Transitions, il est désormais possible de réaliser des transitions basiques.
Les sélecteurs
La fin de la Divite et de la Classite chronique ?
Les nouveaux sélecteurs CSS3 vont faciliter le nommage des éléments particuliers (le second de la liste, les lignes impaires d’un tableau, …).
CSS 3 selectors explained (EN)
Conclusion
CSS3, couplé à HTML5 (ou pas), va permettre de réaliser des effets réservés jusque-là à JavaScript ou aux découpes d’images contraignantes (ombrage, survol, arrondis…). Si on ajoute que jQuery et les autres frameworks commencent à s’imposer dans de nombreuses applications web (diaporama, interface cliente riche…), l’année 2010 sera mouvementée ! Bien entendu, il est important de rappeler que certains navigateurs n’ont pas encore implémenté l’ensemble de ces fonctionnalités.
très intéressant
waw c’est génial