Tutoriels >> Quoi de neuf en CSS3 ?

Quoi de neuf en CSS3 ?


Le CSS3, à l’instar du HTML5, apporte un véritable vent de nouveauté sur la sphère Web. Multiplicité des possibilités, effets variés permettant de se passer des images, bienvenue dans le monde de la décoration web à moindre poids.

Juste que là le CSS permettait surtout à ses utilisateurs de mettre en forme ses pages et d’égayer un peu l’ensemble, le tout de manière tout à fait sommaire. Mais il est désormais possible de réaliser des ombrages, des courbes, des dégradés et même des effets qui demandaient par le passé l’utilisation de JavaScript !

Voici donc les principales nouveautés que vous trouverez grâce au CSS3 :

 

Les coins arrondis


Grâce à la propriété border-radius, vous pourrez désormais arrondir les angles de vos créations. Cette propriété est très modulable puisqu’il vous sera possible d’arrondir seulement un seul coin ou plusieurs selon vos désirs.

 

La gestion de l’opacité


Vous pourrez désormais très facilement gérer les opacités de vos images directement via CSS sans passer forcement par le format PNG. Ceci permet par exemple de faire des effets de rollover sur des images en toute simplicité.

 

Les arrières plans multiples


Désormais il vous sera possible d’appliquer plusieurs images à une div, permettant ainsi d’effectuer des micro-montages directement en CSS. Ceci permet une meilleure flexibilité et une plus grande facilité dans la mise en page.

 

Les colonnes multiples


Column-width et column-gap permettent de découper facilement du texte pour l’afficher sur plusieurs colonnes à la manière d’un journal papie. Inutile d’imbriquer des div, le tout est désormais géré avec simplicité.

 

Les ombres


Box-shadow permet d’afficher des ombres ou des dégradés sur des éléments HTML.

 

Les effets sur le texte


Le texte était le point faible de CSS jusqu’à aujourd’hui, les possibilités de personnalisations étant particulièrement faibles. Désormais, il est possible de récupérer des polices externes, mais aussi d’ombrer ou d’afficher des contours. Mais ce n’est pas tout puisque vous pourrez totalement styliser votre texte pratiquement comme si vous étiez sous Photoshop. De quoi alléger encore les pages en supprimant  davantage d’images, mais surtout d’égayer les titres bien souvent  trop sobres.

 

Les polices plus exotiques


Grâce aux font-face, vous pourrez désormais utiliser les polices que vous souhaitez pour vos titres ou votre texte. Le joug de l’Arial est terminé et l’exotisme sera de rigueur dans les années à venir avec une remise en avant de la typographie pour notre plus grand plaisirs.

 

Les dégradés


Vous pourrez réaliser très simplement  des dégradés grâce à la seule propriété gradient. Idéal pour se passer des images de fond qui peuvent parfois se montrer un peu trop lourde par rapport à la réelle plus-value qu’elles apportent.

 

Les boutons esthétiques sans image


En utilisant plusieurs propriétés CSS3 dont certaines exhibées plus haut, vous pourrez réaliser très simplement des boutons esthétiques sans avoir besoin d’une image. Ombres, dégradés, bords arrondis et effets de texte, le monde de la légèreté fait encore une fois démonstration de ses possibilités.