La decoration
- 'text-decoration'
-
Valeur : none | [ underline || overline || line-through || blink ] | inherit Initiale : none S'applique à : tous les éléments Héritée : non (voir les explications) Pourcentage : sans objet Médias : visuel
Cette propriété décrit les décorations qui sont ajoutées au texte d'un élément. Quand la propriété est appliquée à un élément de type bloc, elle agit sur tous les descendants de type en-ligne de celui-ci. Quand elle est appliquée à un élément de type en-ligne, ou agit sur celui-ci, cette propriété influence toutes les boîtes générées par cet élément. Quand les éléments sont vides ou sans contenu textuel (ex. l'élément IMG en ), les agents utilisateurs doivent cette propriété. ), les agents utilisateurs doivent cette propriété.
Les significations des valeurs sont :
- none
- Aucune décoration ;
- underline
- Chaque ligne de texte est soulignée ;
- overline
- Chaque ligne de texte reçoit un trait au-dessus ;
- line-through
- Chaque ligne de texte est rayée en son milieu ;
- blink
- Le texte clignote (une alternance entre visible et invisible). Les agents utilisateurs conformes ne sont pas tenus de reconnaître cette valeur.
La couleur, ou les couleurs, requises pour la décoration de texte devraient être déterminées par la valeur de la propriété 'color'.
Cette propriété n'est pas héritée, cependant les boîtes qui descendent d'une boîte de bloc donnée devraient recevoir la même décoration que celle-ci (ex. toutes devraient être soulignées). La couleur de la décoration devrait être conservée, même si la valeur de la propriété 'color' des éléments descendants était différente.
Exemple(s) :
Dans cet exemple en , le contenu de texte de chacun des éléments A, ceux-ci étant des liens, seront soulignés : , le contenu de texte de chacun des éléments A, ceux-ci étant des liens, seront soulignés :
A[href] { text-decoration: underline } - 'text-shadow'
-
Valeur : none | [<couleur> || <longueur> <longueur> <longueur>? ,]* [<couleur> || <longueur> <longueur> <longueur>?] | inherit Initiale : none S'applique à : tous les éléments Héritée : non (voir les explications) Pourcentage : sans objet Médias : visuel
Cette propriété accepte une liste de valeurs, séparés par une virgule, représentant des effets d'ombrage à appliquer au texte d'un élément. 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.
Chaque effet doit spécifier un décalage de l'ombrage, et peut, en option, spécifier une zone de flou et la couleur de l'ombrage.
Le décalage de l'ombrage est donné par deux valeurs de <longueur> qui en précisent la distance par rapport au texte. La première spécifie la distance horizontale à la droite du texte, une valeur négative place l'ombrage à la gauche de celui-ci. La seconde 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 spécifier, après les valeurs de décalage de l'ombrage, celle du rayon du flou. C'est une longueur qui indique les limites de cet effet de flou. L'algorithme exact pour le calcul de cet effet n'est pas spécifié.
En option également, on peut spécifier, 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 fondement pour l'effet d'ombrage. Si aucune couleur n'est indiquée, c'est la valeur de la propriété 'color' qui est considérée à sa place.
On peut employer les ombrages de texte avec les pseudo-éléments :first-letter et :first-line.
Exemple(s) :
L'exemple ci-dessous produira un ombrage à droite et en dessous du texte de l'élément. Aucune couleur ni rayon de flou ayant été spécifiés, l'ombrage prendra la couleur de l'élément en question et n'aura pas d'effet de flou :
H1 { text-shadow: 0.2em 0.2em } Celui-ci produira un ombrage à droite et en-dessous du texte de l'élément. Cet ombrage aura un rayon de flou de 5px et de couleur rouge :
H2 { text-shadow: 3px 3px 5px red } Dans l'exemple suivant, on spécifie une liste d'effets d'ombrage. Le premier ombrage apparaîtra à droite et en-dessous du texte, avec une couleur rouge et sans effet de flou. Le deuxième va recouvrir le premier effet d'ombrage et apparaîtra à gauche et en-dessous du texte, avec une couleur jaune et un effet de flou. Le troisième sera placé à droite et au-dessus du texte. Aucune couleur n'étant spécifiée pour celui-ci, c'est la valeur de la propriété 'color' de l'élément en question qui sera utilisée :
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } Exemple(s) :
Considérons cette règle :
SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px; } Ici, on a utilisé les propriétés 'background' et 'color' avec la même valeur, ainsi que la propriété 'text-shadow' pour créer un effet "éclipse solaire" :
Remarque : Cette propriété n'est pas définie en . Certains effets d'ombrage (tel que celui du dernier exemple) peuvent rendre le texte invisible pour les agents utilisateurs ne reconnaissant que .. Certains effets d'ombrage (tel que celui du dernier exemple) peuvent rendre le texte invisible pour les agents utilisateurs ne reconnaissant que .