Lighting-color - Propriété CSS

lighting-color

Résumé des caractéristiques de la propriété `lighting-color`

Description rapide

Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Statut

Standard

Utilisable sur

SVG

Pourcentages

Ne s'appliquent pas.

Valeur initiale

white

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété lighting-color passe progressivement d'une valeur à une autre.

Module W3C

Module filtres et effets

Références (W3C)

Filter Effects Module Level 1

Statut du document: WD (document de travail)

Description de la propriété `lighting-color`.

La propriété lighting-color définit la couleur des effets de lumière (en SVG). Ces effets de lumière permettent de suggérer du relief sur une forme en 2D.
La propriété s'applique uniquement aux balises feDiffuseLighting (éclairage diffus) et feSpecularLighting (éclairage spéculaire).

Pas d'effet de lumière

Éclairage diffus

Éclairage spéculaire

Valeurs pour `lighting-color`.

lighting-color: #add8e6;

La couleur de l'éclairage peut être exprimée dans n'importe laquelle des syntaxes reconnues par CSS. Voir Les couleurs.

Valeurs communes à toutes les propriétés :


lighting-color: initial  (white)
lighting-color: inherit
lighting-color: revert
lighting-color: revertLayer
lighting-color: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété `lighting-color`.

Le simulateur vous permet de manipuler la couleur de l'éclairage sur un filtre feDiffuseLighting (éclairage diffus).

lighting-color :

white

Compatibilité des navigateurs.

Aucun problème de compatibilité n'est à signaler entre la propriété lighting-color et les navigateurs actuels.

Propriété
lighting-color

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Safari

Safari sur IOS

Opéra Mobile

QQ Browser

Baidu Browser

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `lighting-color`.

Module effets et filtres - Niveau 1

Première standardisation des filtres graphiques en CSS et introduction de la propriété lighting-color.

25 Octobre 2012
Document de travail.

Voir aussi, au sujet des filtres graphiques.

Les filtres et effets graphiques standardisés par le W3C sont décrits dans la spécification nommée "Module filtres et effets" en français, ou "Filter Effects Module" en anglais. Pour faciliter vos recherches, voici les termes relatifs aux filtres graphiques :

Propriétés :

backdrop-filter

Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.

color-interpolation

Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.

color-interpolation-filters

Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB

filter

Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

flood-color

Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.

flood-opacity

Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.

Fonctions :

blur()

blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.

brightness()

Ajuste la luminosité d'un élément (filtre graphique).

contrast()

Ajuste le contraste d'un élément (filtre graphique).

drop-shadow()

Définit l'ombre d'un élément : dimensions, flou, couleur (filtre graphique).

grayscale()

Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.

hue-rotate()

Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).

invert()

Inverse les couleurs d'un élément (filtre graphique).

opacity()

Détermine le degré de transparence d'un élément (filtre graphique).

saturate()

Définit la saturation des couleurs d'un élément (filtre graphique).

sepia()

Applique un effet sépia à un élément (filtre graphique).