Les nouveautés de CSS3 en 20 exemples

Il faut tout d’abord commencer par les bases, le CSS c’est quoi, d’ou ça vient, etc …

Définition :

CSS en Anglais « Cascading Style Sheets » que nous traduisons en France par « feuille de style ». Ces feuilles de style nous permettent de gérer la présentation d’une page web. Le langage CSS, ainsi que le HTML et le XML sont la recommandation du World Wide Web Consortium, plus connu sous W3C.

Le but d’une feuille de style et donc du CSS est de permettre de séparer le contenu HTML de la présentation des éléments. C’est à dire que grace à l’HTML et au CSS on peut créer des pages web ou la structure du document se trouve dans le fichier HTML et la présentation se situe dans le fichier CSS. Il est également vrai que vous pouvez faire du CSS et de la présentation directement dans le HTML, mais pas dans tous les cas. Avec CSS on peut par exemple définir un ensemble de règles stylistiques communes à toutes les pages d’un site internet. Cela facilite ainsi la modification de la présentation d’un site entier. CSS permet aussi de définir des règles différentes pour chaque support d’affichage (une navigateur classique, une télévision, un support mobile, un lecteur braille…). CSS permet aussi d’améliorer l’accessibilité des documents web.

De plus, CSS ajoute des fonctionnalités nouvelles par rapport à HTML au point de vue du style. En effet, HTML permet une gestion assez sommaire du style des documents.

Au final CSS3 c’est l’évolution de CSS2, avec tout un tas de nouveautés, arrondir vos images dans CSS, faire des ombres sur les div, des ombres sur du texte, des polices de caractères plus fun, des colonnes, des bordures d’images, etc…

Nous allons maintenant voir quelques exemples assez surprenant de réalisation faites avec CSS3.