Propriété "text-shadow"

 

Cette propriété permet de créer un effet d'ombre sur le texte, mais pas toujours facile à réaliser. Chaque effet spécifie un décalage de l'ombrage, et peut en option, spécifier une zone de flou et la couleur de l'ombrage. Cette propriété ne bénéficie pas des règles d'héritage. (quoique !)

Cette propriété pour l'instant n'est qu'un simple gadget qui ne fonctionne pas, et bien que prévue dans la recommandation CSS2, il n'est pas reconnue par les navigateurs. Mais son principe qui n'a rien de révolutionnaire en termes de définitions, est certainement intéressant à découvrir, ne serait-ce que pour découvrir une approche plus sélective du CSS.

Si par hasard vous souhaitez réaliser un effet "semblable", sans utiliser par exemple une image à sa place, consultez un modèle à : page 70a2

Le décalage de l'ombrage est défini à l'aide de deux valeurs de "longueur" qui en précisent la distance par rapport au texte.La première valeur spécifie la distance horizontale à la droite du texte, (une valeur négative place l'ombrage à la gauche de celui-ci). La seconde valeur spécifie la distance verticale en-dessous du texte,( une valeur négative place l'ombrage au-dessus de celui-ci).

En option, on peut définir après les deux précédentes valeurs, celle du rayon du flou. C'est encore avec une longueur qu'on indique les limites de cet effet de flou.

En option, on peut aussi définir, avant ou après les valeurs de décalage de l'ombrage, celle de la couleur de l'ombrage. Cette valeur de couleur servira de fond pour l'effet d'ombrage. Si aucune couleur n'est indiquée, c'est la valeur de la propriété "color" qui est placée.

Par défaut l'ajout d'un ombrage sur du texte se produit en bas à droite.

Vous pouvez utiliser cette propriété avec les pseudo-éléments ":first-letter" et ":first-line". (pages 60 et 61)

Code dans HEAD (pour info)

<STYLE type="text/css">

body { font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ; background-color: #FFFFFF ; }

H1 { text-shadow:1.em, 1.5em ; }

H2 { text-shadow:4px,4px,4px,blue ; }

</STYLE>

Cette propriété accepte une liste de valeurs, séparés par une virgule. Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ceux-ci ne recouvriront jamais le texte lui-même. Les effets d'ombrage ne modifient pas la taille d'une boîte, mais peuvent s'étendre au-delà des limites de celle-ci. Les effets d'ombrages se situent au même niveau dans l'empilement que l'élément en question.

Il est aussi très bizarre, que d'une part le W3C précise de séparer les valeurs par une virgule, et que pour obtenir son accord du "Validator" il faut au contraire les supprimer ?

 

Les valeurs applicables sont : en px ou em

- none

- couleur

- longueur,longueur,longueur