Ça faisait vraiment longtemps que j’avais pas écrit d’article, j’essaye donc de rattraper mon retard pendant ces vacances.

Aujourd’hui, je vais vous présenter la CSS3 (ou 3° version de la CSS). Première question de la plupart d’entre-vous (du moins, je suppose) : qu’est-ce que c’est la CSS?
La CSS est un langage qui permet décrire la présentation d’un document HTML (le plus souvent une page web). Regardez le texte suivant :
Ceci est un test pour montrer la CSS!
Toutes ses caractéristiques (police d’écriture, couleur et italique) ont étés définit par une série de règle CSS. Sans la CSS, un site web sera en noir sur fond blanc avec des retours à la ligne partout, les liens en bleu et aucune structure (menu à gauche, contenu à droite, etc…) visible, donc très moche.
Vous vous demandez sûrement pourquoi il y a une nouvelle version (qui est encore en développement) alors que les sites actuelles peuvent déjà être bien jolis. Et bien, la réponse est assez simple : rien n’est parfait et améliorer la CSS permettra aux web-designers de faire des sites plus jolies plus facilement et notamment en utilisant moins d’images.

Avant de rentrer dans le vif du sujet, je tiens à préciser plusieurs choses : les exemples que je donnerais ici ne marcheront pas avec tous les navigateurs (Firefox est le seul à bien afficher tous les exemples). Étant donné qu’ils ne marchent pas avec Internet Explorer (toutes versions confondues), il est déconseillé de les utiliser sur un site si leur fonctionnement est nécessaire pour avec un site joli. Encore une dernière chose : toutes les propriétés présentées ici sont susceptibles de changer vu que la CSS3 n’est pas encore terminé, ne vous y fiez donc pas trop.

Pour ne pas interférer avec les standards, les navigateurs ont souvent ajouté un préfixe aux propriétés CSS3, quand je vous donnerais une propriété, je ne rajouterais pas de suffixe mais pour la faire marcher, il faudra écrire la propriété normal, puis pour chaque préfixe. Ça donne :
.box
{
-moz-border-radius : 5px; // préfixe pour firefox
-webkit-border-radius : 5px; // préfixe pour les navigateur utilisant webkit (safari et google chrome)
-o-border-radius : 5px; // préfixe pour Opera (des fois c'est aussi la propriété sans suffixe qui marche)
border-radius : 5px; // propriété normal
}

Je pense que le code se suffit à lui-même, mais si vous ne comprenez pas, hésitez pas à poster dans les commentaires.

Voici donc une liste non-exhaustive de ce que vous pourriez voir apparaitre sur les sites grâce à la CSS3.

Des coins arrondis

Arrondis simple :

Élément avec des coins arrondis : border-radius: 5px;

On peut aussi indiquer l’arrondis en %. Pour arrondir différemment les coins, on peut indiquer la valeur pour chaque coin. Malheureusement, c’est pas la même syntaxe pour gecko et pour webkit :

  • -moz-border-radius-topleft / -webkit-border-top-left-radius
  • -moz-border-radius-topright / -webkit-border-top-right-radius
  • -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
  • -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

On peut comme ça avoir des effets sympa :

Exemple de bords arrondis 1

Exemple de bords arrondis 2

Attention à ne pas trop en abuser quand même : trop d’arrondis tue l’arrondis.

Les ombres

Il y aura deux types d’ombres portés en CSS3, les ombres sur les blocs :

Ombre sur un bloc : box-shadow: 10px 10px 5px #888888;

Le deuxième type d’ombre est les ombres sur le texte :
Texte avec un ombre : text-shadow: 2px 2px 2px #000000;
On peut l’utiliser pour améliorer la lisibilité d’un texte si la couleur de fond et celle du texte sont « incompatibles » :

Texte illisible
Texte plus lisible

Là aussi on peut faire des effets très sympathiques (pompé de css3.info) :

Exemple d’ombres portés

Les transformations

Elles vous permettront d’appliquer des transformations assez intéressantes :

La rotation

Et de manière plus général, les transformations avec matrices

Transformation avec matrice

Un dernier exemple de CSS3 pour la route :

Les fonds avec dégradés linéaires
et radiales

Voilà, après ce petit aperçu, je vous propose d’aller regarder http://www.css3.info/ (en anglais) si vous êtes intéressé.

Et voici ce que l’on peut faire rien qu’avec la CSS3 sans images (pris sur http://girliemac.com/sandbox/button.html) :

Un petit bouton

A lire également :

    Aucun résultat

5 commentaires

  • Santinele (81 comments), le 11 mars 2010

    Wow, je comprends rien…mais c’est beauuuu….

  • Bloody Vengeance (33 comments), le 11 mars 2010

    Et encore, le dernier bouton ne marche pas encore (j’ai demandé à George de le modifier vu que je peut pas le faire moi-même)…

  • Shinji (1 comments), le 11 mars 2010

    Un truc plus difficile à représenter mais qui sera très utile pour les blogs et sites : pouvoir mettre son contenu sur plusieurs colonnes.

  • Patrice (1 comments), le 11 mars 2010

    Ca me donne du rêve!

  • Bloody Vengeance (33 comments), le 11 mars 2010

    @Shinji : Oui, il y a beaucoup de choses (à commencer par les sélecteurs) qui ne sont pas mises ici, mais j’ai essayé de mettre les choses qui sont susceptibles d’être très utile.

Poster un commentaire

Subscribe without commenting