Les ombres

Parent Previous Next


Les ombres


Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page !

Nous allons ici découvrir deux types d'ombres :

box-shadow : les ombres des boîtes


La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant :

  1. le décalage horizontal de l'ombre ;
  2. le décalage vertical de l'ombre ;
  3. l'adoucissement du dégradé ;
  4. la couleur de l'ombre.

Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira :

p

{

    box-shadow: 6px 6px 0px black;

}

Cela donne le résultat illustré à la figure suivante (j'ai ajouté une bordure au paragraphe pour qu'on voie mieux l'effet).

Une ombre sous le paragraphe


Ajoutons un adoucissement grâce au troisième paramètre (figure suivante). L'adoucissement peut être faible (inférieur au décalage), normal (égal au décalage) ou élevé (supérieur au décalage). Essayons un décalage normal :

p

{

    box-shadow: 6px 6px 6px black;

}

Une ombre adoucie sous le paragraphe


On peut aussi rajouter une cinquième valeur facultative : inset. Dans ce cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé :

p

{

    box-shadow: 6px 6px 6px black inset;

}

Je vous laisse essayer de voir le résultat.

La propriété box-shadow fonctionne sur tous les navigateurs récents, IE9 inclus. Pour certains navigateurs, en particulier les navigateurs mobiles, il faut encore rajouter un préfixe. Ainsi, il faudra écrire une version -webkit-box-shadow pour que cela fonctionne sur les navigateurs Android et iOS.


text-shadow : l'ombre du texte

Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de votre texte ! Les valeurs fonctionnent exactement de la même façon que box-shadow : décalage, adoucissement et couleur.

p

{

    text-shadow: 2px 2px 4px black;

}

Le résultat est illustré à la figure suivante.

Texte ombré


Cette propriété est reconnue par tous les navigateurs récents, sauf Internet Explorer, qui ne la reconnaît qu'à partir de la version IE10.

En résumé


Créé avec HelpNDoc Personal Edition: Créer des livres électroniques EPub facilement