Sepia() - Fonction CSS

sepia()

Résumé des caractéristiques de la fonction sepia()

Description rapide
Applique un effet sépia à un élément (filtre graphique).
Statut
Standard
Pourcentages
100% correspond à une transformation complète en sépia.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

Description de la fonction sepia().

La fonction sepia() applique un effet sépia à un élément, le plus souvent à une image.

Exemple d'une image sepia

La valeur sepia() peut être utilisée avec les propriétés suivantes :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
  • filter : Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

Syntaxes de la fonction sepia().

  • filter: sepia(50%); n

    n indique le taux de sépia à ajouter à l'image.

    C'est un nombre entre 0 et 1, sans unité ou un pourcentage.
    0 laisse l'image inchangée.
    1 ou 100% produit une image totalement sépia.
    Les valeurs intermédiaires laissent apparaître un peu des couleurs originales.

    La valeur par défaut est 100% (lorsque les parenthèses sont laissées vides).

    Les valeurs négatives provoquent un refus de la règle .

Simulateur avec la fonction sepia()

filter :
Démonstration pour la fonction sepia()

Support de la fonction sepia().

Les navigateurs récents traitent très bien tous les effets de filtre sur les images, y compris la fonction sepia().

Colonne 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Support par les navigateurs de la fonction sepia() qui permet de désaturer partiellement une image (ou un autre type d'élément) tout en lui donnant une teinte orangée.
1
Filtres
graphiques
2
Fonction
sepia()
Estimation de la prise en charge globale.
96%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

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

Historique de la fonction sepia().

  • Module effets et filtres - Niveau 1

    Première version du module Filter effects décrivant les fonctions de filtre, entre autres la fonction sepia().
    WD
    25 Octobre 2012
    Document de travail.
    CR
    PR
    REC

Voir aussi : effets et filtres graphiques.

Les effets graphiques disponibles en CSS sont décrits dans la spécification du W3C Filter Effects Module. Pour faciliter vos recherches, voici la liste de ces filtres graphiques et des propriétés qui permettent de les mettre en œuvre.

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.
lighting-color
Définit la couleur de l'éclairage dans le contexte d'un filtre 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).