couleur="..."

L'attribut couleur détermine la couleur de l'ombre. Il peut valoir "noir", une des couleurs de l'ULB, ou un code de couleur exprimé en hexadécimal au format habituel (exemple, #C8D8D8). La valeur par défaut est noir.

L'exemple ci-contre illustre la couleur par défaut, qui est le noir, associée à la transparence par défaut de 60% qui fait apparaître ce noir comme du gris.

...
<vignette>
   <ombre/>
</vignette>
...

En supprimant la transparence, on peut vérifier qu'il s'agit bien du noir par défaut.

...
<vignette>
   <ombre transparence="0"/>
</vignette>
...

Cet exemple utilise la couleur bleuULB et la transparence par défaut.

...
<vignette>
   <ombre couleur="bleuULB"/>
</vignette>
...

Cet exemple utilise une couleur donnée par le code #662211 et la transparence par défaut.

...
<vignette>
   <ombre couleur="#662211"/>
</vignette>
...

transparence="..."

L'attribut transparence donne le taux de transparence de l'ombre. Il s'agit d'un entier compris entre 0 et 100. transparence="0", qui est la valeur par défaut, indique qu'il n'y a pas de transparence. transparence="100" indique que la couleur sera totalement transparente (elle ne se verra pas et laissera entièrement apparaître le fond de l'écran derrière l'image).

Si un flou est utilisé sur les bords de l'ombre, il s'agit du taux de transparence initial (au plus proche de l'image) qui va augmenter petit à petit pour rendre le bord de plus en plus transparent jusqu'à la valeur donnée par l'attribut transparence-flou.

L'exemple ci-contre illustre la transparence par défaut qui est de 60%.

...
<vignette>
   <ombre/>
</vignette>
...

L'exemple ci-contre illustre une transparence de 20%.

...
<vignette>
   <ombre transparence="20"/>
</vignette>
...

L'exemple ci-contre illustre une transparence de 80%.

...
<vignette>
   <ombre transparence="80"/>
</vignette>
...

L'exemple ci-contre illustre une transparence de 0%.

...
<vignette>
   <ombre transparence="0"/>
</vignette>
...

L'exemple ci-contre illustre une transparence de 100%. L'ombre devient totalement invisible.

...
<vignette>
   <ombre transparence="100"/>
</vignette>
...

transparence-flou="..."

L'attribut transparence-flou donne le taux de transparence final à utiliser dans le dégradé de transparence qui donne son aspect flou à l'ombre de l'image. Il s'agit d'un entier compris entre 0 et 100 (généralement proche de 100) et qui doit être supérieur ou égal à la valeur de l'attribut transparence. transparence-flou="0" indique qu'il n'y a pas de transparence. transparence-flou="100" indique que la transparence est totale.

Dégradé de 0 à 100%.

...
<vignette>
   <ombre transparence="0" transparence-flou="100"/>
</vignette>
...

Dégradé de 40 à 100%.

...
<vignette>
   <ombre transparence="40" transparence-flou="100"/>
</vignette>
...

Dégradé de 40 à 80%.

...
<vignette>
   <ombre transparence="40" transparence-flou="80"/>
</vignette>
...

Si transparence-flou est égal à transparence, le dégradé ne se verra pas.

...
<vignette>
   <ombre transparence="80" transparence-flou="80"/>
</vignette>
...

taille="..."

L'attribut taille donne le nombre de pixels à ajouter à la taille de l'image pour obtenir la taille de l'ombre. La valeur de cet attribut doit être un nombre entier supérieur à 0. La valeur par défaut est de 5 pixels (l'ombre sera 5 pixels plus grande en largeur et en hauteur que l'image d'origine).

L'exemple ci-contre illustre la taille par défaut de 5 pixels.

Un flou apparaît sur le contour de l'ombre, la taille de ce flou est en effet égal à la taille de l'ombre (5 pixels). L'attribut taille-flou permet de choisir une autre taille pour ce flou.

L'ombre est également déplacée par rapport à l'image d'une distance égale par défaut à la taille de l'ombre. L'attribut distance permet de choisir une autre distance.

...
<vignette>
   <ombre/>
</vignette>
...

L'exemple ci-contre illustre une taille égale à 3 pixels.

Le flou est ici moins important et l'ombre se rapproche de l'image (la taille du flou et la distance de l'ombre sont en effet par défaut égales à la taille de l'ombre).

...
<vignette>
   <ombre taille="3"/>
</vignette>
...

L'exemple ci-contre illustre une taille égale à 8 pixels.

Le flou est nettement plus visible, et l'ombre se détache pleinement de l'image.

...
<vignette>
   <ombre taille="8"/>
</vignette>
...

Les attributs taille-flou et distance permettent de controller la taille du flou et la distance.

...
<vignette>
   <ombre taille="8" taille-flou="4" distance="4"/>
</vignette>
...

distance="..."

L'attribut distance donne la distance de l'ombre par rapport à l'image en nombre de pixels. La valeur par défaut est égale à la taille de l'ombre (attribut taille). La valeur de cet attribut doit être un nombre entier supérieur ou égal à 0.

Cette distance est calculée sur la droite donnée par la direction de l'ombre. Il faut donc, si on veut calculer de manière exacte le nombre de pixels dont l'ombre se déplace, tenir compte de l'angle donné par cette direction.

L'exemple ci-contre illustre la distance par défaut de 5 pixels.

...
<vignette>
   <ombre/>
</vignette>
...

L'exemple ci-contre illustre une distance de 2 pixels. L'ombre déborde encore un petit peu, car elle est plus grande que l'image (la taille par défaut est de 5 pixels).

...
<vignette>
   <ombre distance="2"/>
</vignette>
...

L'exemple ci-contre illustre une distance de 10 pixels.

...
<vignette>
   <ombre distance="10"/>
</vignette>
...

La distance peut être inférieure à la taille de l'ombre, ici elle est de 0 pixel.

Dans ce cas, l'ombre apparait tout autour de l'image (car elle est plus grande que celle-ci, grâce à la taille).

...
<vignette>
   <ombre distance="0"/>
</vignette>
...

On peut accentuer cet effet en agrandissant l'ombre.

...
<vignette>
   <ombre distance="0" taille="10"/>
</vignette>
...

taille-flou="..."

L'attribut taille-flou fixe la largeur, en nombre de pixels, du dégradé de transparence à créer en périphérie de l'ombre pour lui donner son aspect flou caractéristique. Cet attribut doit contenir un nombre entier supérieur ou égal à 0. La valeur par défaut est égale à la taille de l'ombre (attribut taille).

L'exemple ci-contre illustre le flou par défaut de 5 pixels. On a volontairement augmenté la distance à 10 pour mieux le visualiser.

...
<vignette>
   <ombre distance="10"/>
</vignette>
...

Dans cet exemple, le flou est fixé à 3 pixels.

...
<vignette>
   <ombre taille-flou="3" distance="10"/>
</vignette>
...

Dans cet exemple, le flou est fixé à 10 pixels.

...
<vignette>
   <ombre taille-flou="10" distance="10"/>
</vignette>
...

Si taille-flou est égal à 0, le flou disparaît totalement.

...
<vignette>
   <ombre taille-flou="0" distance="10"/>
</vignette>
...

position="..."

L'attribut position indique la position de l'ombre. Il peut contenir soit un nombre entier (>=0 et <=360) représentant un angle donné en degré, soit un mot-clé à choisir parmi:

• position="supérieur-droit" équivalent à 45 degrés

• position="supérieur-gauche" équivalent à 135 degrés

• position="inférieur-gauche" équivalent à 225 degrés

• position="inférieur-droit" équivalent à 315 degrés (qui est la valeur par défaut)

Si cet attribut contient une valeur entière, il indique la direction de l'ombre à l'aide d'un angle donné en degré. La valeur 0 est la direction horizontale partant vers la droite. Les angles sont exprimés dans le sens trigonométique classique (sens contraire des aiguilles d'une montre).

L'exemple ci-contre illustre la position par défaut "inférieur-droit" qui correspond à un angle de 315 degrés.

...
<vignette>
   <ombre/>
</vignette>
...

L'exemple ci-contre illustre la position "supérieur-gauche".

...
<vignette>
   <ombre position="supérieur-gauche"/>
</vignette>
...

L'exemple ci-contre illustre la position "supérieur-droit".

...
<vignette>
   <ombre position="supérieur-droit"/>
</vignette>
...

L'exemple ci-contre illustre la position "inférieur-gauche".

...
<vignette>
   <ombre position="inférieur-gauche"/>
</vignette>
...

L'exemple ci-contre illustre un angle de 65°.

...
<vignette>
   <ombre position="65"/>
</vignette>
...