Liste des fonctions utilisables en CSS.
Liste des fonctions.
Animations pilotées par un défilement
scroll()
Facilite la mise en œuvre des animations pilotées par un défilement (Scroll Driven Animation).
view()
Définit une animation pilotée par un défilement (Scroll Driver Animation).
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
rect()
Définit un rectangle utilisable pour découper un élément avec la propriété clip. Son usage est maintenant déconseillé au profit de inset().
Module CSS - Couleurs
color()
Définit une couleur dans un espace de couleurs autre que
sRGB.device-cmyk()
Définit une couleur en fonction d'un périphérique, en spécifiant les valeurs cyan, magenta, jaune et noir.
hsl()
Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
hsla()
Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
hwb()
Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
lab()
Définit une couleur dans le système
L*a*b*.lch()
Définit une couleur dans le système
L*C*H*.oklab()
Définit une couleur dans le système
L*a*b* avec une correction perceptive.oklch()
Définit une couleur dans le système
L*C*H* avec une correction perceptive.rgb()
Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
rgba()
Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.
Module CSS - Dimensionnement des blocs
fit-content()
Calcule une dimension en fonction du contenu et de limites.
Module CSS - Fonctions d'accélération
cubic-bezier()
Détermine une progression non linéaire pour les animations.
steps()
Il s'agit d'une fonction d'accélération, qui définit une progression saccadée, pas par pas.
Module CSS - Formes de base
circle()
Définit un cercle qui pourra étre utilisé pour découper un élément ou définir une marge de contournement.
ellipse()
Définit une ellipse.
inset()
Définit un rectangle, utilisable pour découper un élément.
path()
Définit un contour d'après la syntaxe SVG d'un chemin.
polygon()
Définit une forme.
Module CSS - Génération de contenu
leader()
Utilisée avec la propriété content, cette fonction permet d'insérer des points de suite.
target-counter()
Renvoie la valeur d'un compteur, qui peut être insérée dans le document avec la propriété content.
target-counters()
Renvoie la valeur hiérarchique d'un compteur, qui pourra être insérée dans le document avec la propriété content.
target-text()
Renvoie le texte d'un élément désigné par une URL.
Module CSS - Images
conic-gradient()
Définit un dégradé de couleurs conique.
cross-fade()
Réalise le mélange de plusieurs images.
element()
Récupère l'aspect d'un élément sous forme d'une image.
image()
Désigne une image en précisant, le cas échéant, son sens de lecture.
image-set()
Propose au navigateur un choix d'images afin que ce dernier puisse choisir celle qui est le plus adapté (résolution, format...).
linear-gradient()
Détermine un dégradé de couleur évoluant de façon linéaire d'un bout à l'autre de l'élément.
radial-gradient()
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
repeating-conic-gradient()
Définit un dégradé de couleurs conique, et le répète sur toute la surface de l'élément.
repeating-linear-gradient()
Détermine un dégradé de couleur linéaire et le répète sur toute la surface de l'élément.
repeating-radial-gradient()
Détermine un dégradé de couleur radial et le répète sur toute la surface de l'élément.
stripes()
Définit une image en bande de couleurs.
Module CSS - Listes et compteurs
counter()
Renvoie la valeur actuelle d'un compteur. Ce dernier est géré par les propriétés
counter-reset, counter-set et counter-increment.counters()
Renvoie la valeur d'un compteur hiérarchique.
Module CSS - Mise en page par grille
minmax()
Renvoie une valeur comprise dans une fourchette, pour dimensionner la hauteur des lignes ou la largeur des colonnes d'une grille.
repeat()
Facilite la définition des lignes ou des colonnes d'une grille lorsqu'elles sont nombreuses.
Module CSS - Propriétés personnalisées (variables) - Niveau 1
var()
Récupère la valeur d'une propriété personnalisée (variable).
Module CSS - Styles de compteurs
symbols()
Définit les symboles utilisés pour une numérotation personnalisé.
Module CSS - Transformations
matrix()
Applique une transformation composite à un élément (translations, rotations...).
matrix3d()
Applique une série de transformations 3D à un élément.
perspective()
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
rotate()
Définit une rotation à appliquer à l'élément en 2D (dans le plan de l'écran).
rotate3d()
Définit une rotation 3D à appliquer à un élément autour d'un axe quelconque en 3D.
rotateX()
Définit une rotation de l'élément autour de l'axe X (en 3D),
rotateY()
Définit une rotation 3D de l'élément autour de l'axe Y.
rotateZ()
Définit une rotation de l'élément autour de l'axe Z.
scale()
Définit un agrandissement ou une réduction de l'élément.
scale3d()
Définit une mise à l'échelle en 3D.
scaleX()
Définit une mise à l'échelle suivant l'axe X.
scaleY()
Définit une mise à l'échelle suivant l'axe Y.
scaleZ()
Définit une mise à l'échelle suivant l'axe Z.
skew()
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
skewX()
Définit une inclinaison de l'élément suivant l'axe X.
skewY()
Définit une inclinaison de l'élément suivant l'axe Y.
translate()
Définit une translation (un déplacement) à un élément.
translate3d()
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
translateX()
Définit une translation suivant l'axe X (horizontalement).
translateY()
Définit une translation suivant l'axe Y (verticalement).
translateZ()
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).
Module CSS - Valeurs et unités
abs()
Calcule la valeur absolue d'un nombre.
acos()
Calcule l'angle dont le cosinus vaut la valeur indiquée.
asin()
Calcule l'angle dont le sinus vaut la valeur indiquée.
atan()
Calcule l'angle dont la tangente vaut la valeur indiquée.
atan2()
Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.
attr()
Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.
calc()
Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.
clamp()
Calcule une valeur entre deux valeurs extrêmes.
cos()
Calcul le cosinus d'un angle.
exp()
Calcule l'exponentielle d'un nombre.
hypot()
Calcule la racine carrée d'une somme de carrés de nombres.
log()
Calcule le logarithme d'un nombre.
max()
Détermine la valeur la plus grande parmi une série de valeurs.
min()
Détermine la valeur la plus petite parmi une série de valeurs.
mod()
Calcule le reste de la division entière entre deux nombres.
pow()
Calcule une mise à l'exposant.
rem()
Calcule le reste de la division entière de deux nombres.
round()
Calcule l'arrondi d'un nombre.
sign()
Détermine le signe d'un nombre.
sin()
Calcule le sinus d'un angle.
sqrt()
Calcule la racine carrée d'un nombre.
src()
Spécifie l'adresse d'une ressource telle qu'une image par exemple. Synonyme de la fonction url().
tan()
Calcule la tangente d'un angle.
url()
Spécifie l'adresse d'une ressource telle qu'une image par exemple.
Module filtres et effets
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).