Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

CSS 3 : Créer des ombres sur des boites et du texte

Sommaire

• Ombrer des boites
• Ombrer du texte
• Lectures complémentaires

Ombrer des boites

La propriété box-shadow doit recevoir plusieurs valeurs (les deux premières étant obligatoires) :

1. Une valeur de décalage horizontal
2. Une valeur de décalage vertical
3. Une valeur pour l'effet flou
4. Une valeur l'étendue de l'ombre
5. La couleur de l'ombre.

Code (x)html

<div id="ombreout">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Mauris vulputate laoreet urna. Integer magna. 
  Donec facilisis lectus sed quam. 
  Curabitur sit amet lacus id lacus facilisis venenatis.
  </p>
</div>

Codes CSS

Bien qu'inutiles avec les toutes dernières versions des navigateurs gecko et webkit, il vaut mieux cumuler les déclarations avec des préfixes propriétaires pour assurer la retro-compatibilité.

.ombreout {
background-color:#C0C0C0;
border:1px solid gray;
padding:5px;
box-shadow:2px 2px 10px gray; 
-moz-box-shadow:2px 2px 10px gray;
-webkit-box-shadow:2px 2px 10px gray;
}

On peut aussi rajouter la valeur inset qui va ombrer l'intérieur en donnant un effet de relief en creux.

.ombrein {
background-color:#C0C0C0;
border:1px solid gray;
padding:5px;
box-shadow:2px 2px 10px gray inset;
-moz-box-shadow:2px 2px 10px gray inset;
-webkit-box-shadow:2px 2px 10px gray inset;
}

Comme les background multiples, on peut déclarer plusieurs ombres à un élément.

.ombremultiple {
background-color:#C0C0C0;
padding:5px;
box-shadow:2px 2px 2px gray,
-1px -1px 2px white;
}

(Les préfixes propriétaires ont été omis pour ne pas surcharger le code)

Haut

Ombrer du texte

Contrairement à box-shadow, text-shadow n'est pas implémenté dans Internet Explorer...

Sinon, aucun besoin de préfixes propriétaires et, hormis pour l'étendue qui n'existe pas, même principe que box-shadow pour les valeurs à lui attribuer.

Code (x)html

<h5>Titre ombré</h5> 

Code CSS

h5 {
text-shadow:1px 1px 2px gray;
}

Quant à l'effet "gravure" que l'on rencontre de plus en plus, il utilise le même procédé mais avec une couleur plus claire que la couleur de fond.

h5 {
text-shadow:1px 1px 1px 1px white;
}

Lectures complémentaires

• Ombres avancées en CSS3 (Creative Juice)
• Spécification W3C box-shadow
• Spécification W3C text-shadow

Haut