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.0avec 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.
CSS3 Multiple Columns (EN)
Multi-column layout (EN)
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.
CSS3 box-shadow property (EN)
Les ombrages en CSS3
Des effets sur le texte
Les CSS3 concurrencent les styles Photoshop ?
Les ombrages en CSS3
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.
Using @font-face (EN)
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.
Transitions CSS3
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.
Pour aller plus loin (en anglais)
- 11 Classic CSS Techniques Made Simple with CSS3
- HTML 5 and CSS 3: The Techniques You'll Soon Be Using
- 5 CSS3 Techniques For Major Browsers using the Power of jQuery
- CSS3.info
- CSS 3, tout le monde est prêt, sauf IE8 ...
- CSS 3 Cheat Sheet (PDF)
- Most Interesting CSS3 Tutorials
- Fundamental CSS3 Resources for Designers
- Un livre sur HTML5 et CSS3
- Pushing Your Buttons With Practical CSS3
- Five Technologies That Will Keep Shaping the Web in 2010
- 33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles
- 22 Advanced CSS Text Effects And Web Typography Tips
Messages
Aucun commentaire:
Publier un commentaire