Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Laurent Carcone

Feuilles de style pour le Web Trucs & astuces CSS

Voir également l'index de tous les trucs et astuces.

Ombres portées

CSS2 ne possède pas de propriété pour ajouter une ombre à une boîte. Vous pouvez ajouter une bordure à droite et en dessous mais cela ne donnera pas le même résultat. Cependant, si vous avez deux éléments imbriqués, vous pouve utiliser l'élément externe comme ombre pour l'élément interne. Par exemple, si vous avez un texte comme celui-ci (HTML): 

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

Vous pouvez utiliser le DIV externe comme ombre pour le DIV interne. Le résultat devrait ressember à cette page. Premièrement, associez une couleur de fond à l'élément BODY (vert-clair dans l'exemple), une couleur un peu plus foncée au DIV externe (vert-gris) et une autre couleur au DIV interne (jaune par exemple): 

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Puis, en utilisant des règles margin et padding, décalez un peu le DIV interne en haut et à gauche par rapport au DIV externe: 

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Vous devez également déplacer légèrement le DIV externe sur la droite. Et si vous avez plusieurs sections, vous voudrez probablement laisser un peu d'espace entre chacune d'elles: 

div.back {margin: 3em 0 3em 5em}

C'est à peu près tout. Vous pouvez ajouter une bordure autour du DIV interne si vous le désirez. Vous pouvez également y ajouter une marge interne (padding): 

div.section {border: thin solid #999; padding: 1.5em}

Evidemment, vous pouvez adapter la taille de l'ombre à votre convenance.

Ombres pour les textes

CSS possède par contre une propriété pour ajouter une ombre à un texte. Elle comprend quatre arguments: la couleur de l'ombre, le décalage horizontal (une valeur positive indique un décalage à droite), le décalage vertical (une valeur positive indique un décalage vers le bas), et la netteté (0 indique une ombre très nette). Par exemple: 

h3 { text-shadow: red 0.2em 0.3em 0.2em }

Ce texte a-t-il une ombre ?

Bert Bos, coordinateur de l'activité style
Copyright © 1994–2021 W3C® Privacy policy

Created 4 April 2002;
Last updated mer. 06 janv. 2021 05:40:49 UTC

Langues

À propos des traductions