Voici la liste des différentes fonctions proposé par les CSS :
| Fonction | Description |
|---|---|
| acos() | Cette fonction permet de retourner le cosinus inverse d'un nombre, ce qui signifie qu'elle calcule l'angle dont le cosinus est égal à ce nombre. Le nombre doit être compris entre -1 et 1. |
| asin() | Cette fonction permet de retourner l'inverse du sinus d'un nombre. Le nombre doit être entre -1 et 1, et la fonction retourne l'angle dont le sinus est égal à ce nombre. |
| atan() | Cette fonction permet de retourner l'inverse de la tangente d'un nombre, ce qui correspond à l'angle dont la tangente est égale à ce nombre. Le paramètre peut être un nombre réel, et la fonction renvoie un angle en radians. |
| atan2() | Cette fonction permet de prendre deux valeurs (x et y) et de retourner l'inverse de la tangente du rapport y/x. Elle permet de gérer des cas où x ou y peut être nul, offrant ainsi une meilleure précision dans le calcul de l'angle. |
| attr() | Cette fonction permet de retourner la valeur d'un attribut spécifié d'un élément sélectionné. Elle est couramment utilisée pour extraire des informations comme les données d'un attribut data-* dans un contexte de styles dynamiques. |
| blur() | Cette fonction permet d'appliquer un effet de flou à un élément. La valeur passée à cette fonction détermine l'intensité du flou. Utilisée fréquemment dans les effets visuels et les arrière-plans flous. |
| brightness() | Cette fonction permet d'ajuster la luminosité d'un élément, ce qui le rend plus lumineux ou plus sombre en fonction de la valeur passée. Une valeur supérieure à 1 augmente la luminosité, tandis qu'une valeur inférieure à 1 la diminue. |
| calc() | Cette fonction permet de réaliser des calculs pour déterminer des valeurs de propriétés CSS. Elle prend en charge les opérateurs mathématiques (addition, soustraction, multiplication, division) pour combiner différentes unités, comme les pixels et les pourcentages. |
| circle() | Cette fonction permet de définir un cercle dans un contexte comme celui d'un masque ou d'une forme géométrique. Elle est utilisée pour créer des zones circulaires dans des images ou des arrière-plans. |
| clamp() | Cette fonction permet de définir une valeur s'ajustant de manière responsive entre une valeur minimale et maximale, en fonction de la taille du viewport. Elle est très utile pour les mises en page flexibles. |
| color() | Cette fonction permet de spécifier une couleur dans un espace colorimétrique donné (par exemple, RGB, HSL,...). Elle peut être utilisée pour définir des couleurs en fonction de divers modèles de couleurs. |
| color-mix() | Cette fonction permet de mélanger deux valeurs de couleur dans un espace colorimétrique donné (comme RGB ou HSL) en fonction d'un pourcentage spécifié. Cela permet de créer des transitions de couleurs fluides. |
| conic-gradient() | Cette fonction permet de créer un dégradé conique, où les couleurs sont disposées autour d'un centre, similaire à un graphique circulaire. Cette fonction permet des effets visuels intéressants pour les fonds ou les graphiques. |
| contrast() | Cette fonction permet d'ajuster le contraste d'un élément. Elle est souvent utilisée pour manipuler des images, en augmentant ou réduisant la différence entre les zones claires et sombres. |
| cos() | Cette fonction permet de retourner le cosinus d'un angle donné, en radians. Cela peut être utilisé dans des calculs de transformations géométriques ou d'animations. |
| counter() | Cette fonction permet de retourner la valeur actuelle d'un compteur nommé. Elle est souvent utilisée dans les styles de listes ou de numéros d'éléments qui utilisent des compteurs CSS. |
| counters() | Cette fonction permet de retourner la valeur des compteurs imbriqués (dans les cas où des compteurs sont utilisés dans des éléments parents et enfants). |
| cubic-bezier() | Cette fonction permet de définir une courbe de Bézier cubique pour spécifier des transitions ou des animations. Elle permet de contrôler la vitesse d'accélération et de décélération dans des animations CSS. |
| drop-shadow() | Cette fonction permet d'appliquer un effet d'ombre portée à une image ou à un élément, créant ainsi une ombre décalée en arrière-plan. |
| ellipse() | Cette fonction permet de définir une forme elliptique, utilisée notamment dans des contextes comme les masques ou les zones de forme personnalisée. |
| exp() | Cette fonction permet de retourner la valeur de la constante mathématique E élevée à la puissance d'un nombre donné (Ex), ce qui permet de réaliser des calculs exponentiels en CSS. |
| fit-content() | Cette fonction permet de redimensionner un élément en fonction de son contenu, en s'adaptant à la largeur ou hauteur du contenu qu'il contient. |
| grayscale() | Cette fonction permet de convertir une image en niveaux de gris. Utilisé dans le traitement d'images pour rendre les éléments monochromes. |
| hsl() | Cette fonction permet de définir une couleur en utilisant le modèle de couleur Hue-Saturation-Lightness (Teinte-Saturation-Luminosité). |
| hsla() | Cette fonction permet de définir la transparence de la couleur en utilisant une composante alpha. Elle suit le modèle de couleur Hue-Saturation-Lightness-Alpha (Teinte-Saturation-Luminosité-Alpha), où le quatrième paramètre, l'alpha, spécifie l'opacité de la couleur. |
| hue-rotate() | Cette fonction permet d'appliquer une rotation de la teinte sur une couleur, ce qui permet de modifier sa teinte tout en gardant la saturation et la luminosité constantes. |
| hwb() | Cette fonction permet de définir une couleur en utilisant le modèle Hue-Whiteness-Blackness (HWB). Ce modèle est une variation du modèle HSL, où la couleur est définie par sa teinte, sa clarté (blanche) et son obscurité (noire). |
| hypot() | Cette fonction permet de retourner la racine carrée de la somme des carrés de ses paramètres. Utilisée pour des calculs géométriques, comme le calcul de la distance entre deux points. |
| inset() | Cette fonction permet de définir un rectangle avec des distances spécifiées par rapport à chaque côté d'une boîte de référence. Utilisée pour créer des zones de contenu décalées. |
| invert() | Cette fonction permet d'inverser les couleurs d'une image, en retournant les couleurs de chaque pixel (par exemple, les noirs deviennent blancs et vice versa). Utilisée pour des effets visuels ou de transformation d'images. |
| lab() | Cette fonction permet d'indiquer une couleur dans l'espace colorimétrique CIE Lab*. Ce modèle représente les couleurs en termes de luminosité (L), de chroma (a, b) et permet une représentation plus perceptuelle de la couleur par rapport à d'autres modèles comme RGB. |
| lch() | Cette fonction permet d'indiquer une couleur dans l'espace colorimétrique LCH (Lightness-Chroma-Hue). Ce modèle est basé sur la Lab* et représente les couleurs avec trois valeurs : la luminosité (L), la chroma (C) et la teinte (H), ce qui permet de définir des couleurs de manière intuitive. |
| light-dark() | Cette fonction permet de définir deux valeurs de couleur, une pour le thème clair et une autre pour le thème sombre de l'utilisateur. Elle retourne la première valeur si l'utilisateur utilise un thème clair, et la seconde valeur pour un thème sombre, facilitant ainsi l'adaptation du design en fonction du thème du système. |
| linear-gradient() | Cette fonction permet de créer un dégradé linéaire, où les couleurs changent de manière linéaire d'une couleur de départ à une couleur de fin. Ce dégradé peut inclure plusieurs couleurs et des positions intermédiaires pour créer des transitions douces entre les teintes. |
| log() | Cette fonction permet de retourner le logarithme naturel (base E) d'un nombre spécifié, ou le logarithme d'un nombre avec une base spécifiée. Utilisée pour des calculs mathématiques dans les styles, elle peut être utile pour des effets dynamiques de mise en page. |
| matrix() | Cette fonction permet de définir une transformation 2D en utilisant une matrice de six valeurs. Cela permet de réaliser des transformations comme la rotation, la mise à l'échelle, la translation, etc., en une seule fonction pour des effets visuels complexes. |
| matrix3d() | Cette fonction permet de définir une transformation 3D en utilisant une matrice 4x4 de 16 valeurs. Cela permet de créer des transformations complexes en trois dimensions, comme des rotations ou des changements d'échelle, donnant un effet de profondeur dans le design. |
| max() | Cette fonction permet d'utiliser la valeur la plus grande parmi une liste de valeurs séparées par des virgules pour définir la valeur de la propriété. Cela permet d'assurer que l'élément prendra la valeur la plus appropriée pour certaines propriétés, comme la largeur ou la hauteur. |
| min() | Cette fonction permet d'utiliser la valeur la plus petite parmi une liste de valeurs séparées par des virgules. Cela est utile pour garantir que l'élément ne dépasse pas certaines limites dans des mises en page flexibles. |
| minmax() | Cette fonction permet de définir un intervalle de taille, supérieure ou égale à une valeur minimale et inférieure ou égale à une valeur maximale. Cette fonction est couramment utilisée avec les grilles CSS pour définir des plages de tailles pour les colonnes ou lignes dans une grille flexible. |
| mod() | Cette fonction permet de retourner le reste d'une division, c'est-à-dire la valeur restante lorsque l'on divise un nombre par un autre. Utile pour des calculs liés aux tailles ou positions d'éléments dans un design dynamique. |
| oklab() | Cette fonction permet d'indiquer une couleur dans l'espace colorimétrique OKLAB, étant une autre approche perceptuelle pour définir des couleurs. OKLAB est basé sur la perception humaine des couleurs, offrant une alternative aux modèles comme RGB et HSL. |
| oklch() | Cette fonction permet d'indiquer une couleur dans l'espace OKLCH (OKLAB basé sur la luminance, chroma et teinte), une variante du modèle OKLAB permettant de mieux représenter les couleurs tout en offrant une plus grande cohérence avec la vision humaine. |
| opacity() | Cette fonction permet d'appliquer un effet de transparence (opacité) à un élément. La fonction ajuste la transparence en fonction de la valeur passée, où 1 est complètement opaque et 0 est complètement transparent. |
| perspective() | Cette fonction permet de définir la perspective d'un élément transformé en 3D. Cela donne un effet de profondeur, créant l'illusion que les éléments sont projetés dans un espace tridimensionnel, ce qui est souvent utilisé pour des animations en 3D. |
| polygon() | Cette fonction permet de définir une forme polygonale, avec des points spécifiés dans un système de coordonnées. Elle est souvent utilisée pour des masques ou des zones interactives où les éléments doivent suivre une forme géométrique non rectangulaire. |
| pow() | Cette fonction permet de retourner la valeur d'un nombre (x) élevé à la puissance d'un autre nombre (y). Cela permet de faire des calculs exponentiels dans les propriétés CSS, utiles pour des transformations ou des effets complexes. |
| radial-gradient() | Cette fonction permet de créer un dégradé radial, où les couleurs changent en forme de cercle, partant d'un centre vers l'extérieur. Cette fonction est souvent utilisée pour créer des arrière-plans ou des effets de lumière. |
| ray() | Cette fonction permet de définir le segment de ligne d'un chemin de décalage (offset-path) qu'un élément animé doit suivre. Utilisée dans des animations où l'élément suit un chemin particulier. |
| rem() | Cette fonction permet de demander le reste d'une division dans le cadre de mises en page flexibles ou de calculs de tailles d'éléments en fonction d'autres unités. |
| repeat() | Cette fonction permet de répéter un ensemble de colonnes ou de lignes dans une grille CSS. Cela permet de répéter une unité de taille ou de mise en page pour remplir une grille ou un espace de manière répétitive. |
| repeating-conic-gradient() | Cette fonction permet de créer un dégradé conique qui se répète sur plusieurs tours. Il permet de créer des motifs circulaires ou radiaux pour des arrière-plans ou des effets visuels intéressants. |
| repeating-linear-gradient() | Cette fonction permet de répéter un dégradé linéaire pour créer un motif continu sur l'élément. Il est souvent utilisé pour des fonds d'écran, des textures ou des effets visuels. |
| repeating-radial-gradient() | Cette fonction permet de créer un dégradé radial répétitif, où les couleurs changent en cercles concentriques et sont répétées pour créer des motifs intéressants. |
| rgb() | Cette fonction permet de définir une couleur en utilisant le modèle de couleur RGB (Red, Green, Blue). Ce modèle spécifie une couleur par la combinaison de niveaux de rouge, de vert et de bleu, chaque composante variant de 0 à 255. |
| rgba() | Cette fonction permet de définir une couleur en utilisant le modèle de couleur RGB (Rouge, Vert, Bleu), avec un composant alpha (transparence) en option. Cela permet de spécifier une couleur avec une transparence, où les valeurs de rouge, vert et bleu varient de 0 à 255, et l'alpha varie de 0 (transparent) à 1 (opaque). |
| rotate() | Cette fonction permet de définir une rotation 2D d'un élément autour de son centre. Cette fonction prend un angle (en degrés, radians,...) et applique une rotation à l'élément, modifiant ainsi son orientation dans l'espace 2D. |
| rotate3d() | Cette fonction permet de définir une rotation 3D d'un élément en spécifiant les axes (x, y, z) et un angle de rotation. Cela permet de faire tourner l'élément dans un espace tridimensionnel, offrant un effet de profondeur et de mouvement plus réaliste. |
| rotateX() | Cette fonction permet de définir une rotation 3D autour de l'axe horizontal (x) d'un élément. Cela provoque une rotation qui affecte la perspective de l'élément en fonction de l'axe horizontal, donnant un effet de rotation dans l'espace 3D. |
| rotateY() | Cette fonction permet de définir une rotation 3D autour de l'axe vertical (y) d'un élément. Cette fonction fait pivoter l'élément autour de l'axe vertical, créant un effet de profondeur dans l'espace tridimensionnel. |
| rotateZ() | Cette fonction permet de définir une rotation 3D autour de l'axe z (perpendiculaire à l'écran) d'un élément. Cela produit une rotation dans le plan 2D mais avec une illusion de profondeur 3D. |
| round() | Cette fonction permet d'arrondir un nombre en fonction de la stratégie d'arrondi spécifiée. Cette fonction peut être utilisée pour arrondir des valeurs, par exemple, des valeurs numériques comme des tailles ou des positions, selon les besoins de précision du design. |
| saturate() | Cette fonction permet d'ajuster la saturation (intensité des couleurs) d'un élément. Augmenter la saturation rend les couleurs plus vives, tandis que la diminuer les rend plus ternes. C'est utile pour les effets visuels dynamiques. |
| scale() | Cette fonction permet de définir un redimensionnement 2D d'un élément. Cette fonction permet de modifier la taille de l'élément sur les axes x et y (largeur et hauteur), soit pour l'agrandir, soit pour le réduire. |
| scale3d() | Cette fonction permet de définir un redimensionnement 3D d'un élément. Cette fonction permet de modifier la taille de l'élément sur les trois axes (x, y, z), offrant un contrôle complet sur la mise à l'échelle dans un espace tridimensionnel. |
| scaleX() | Cette fonction permet d'effectuer un redimensionnement horizontal (largeur) d'un élément. Cela change la taille de l'élément uniquement sur l'axe x, permettant de l'élargir ou de le rétrécir horizontalement. |
| scaleY() | Cette fonction permet d'effectuer un redimensionnement vertical (hauteur) d'un élément. Cela permet de modifier la taille de l'élément uniquement sur l'axe y, soit en l'agrandissant soit en le réduisant verticalement. |
| sepia() | Cette fonction permet de convertir une image en sépia, une teinte de couleur brune/jaunâtre imitant les photographies anciennes. Ce filtre est souvent utilisé pour donner un effet rétro ou vintage aux images. |
| sin() | Cette fonction permet de retourner le sinus d'un nombre (en radians). Cette fonction est utilisée dans des calculs trigonométriques et peut être utile pour des animations, des effets dynamiques ou des transformations basées sur des fonctions mathématiques. |
| skew() | Cette fonction permet d'appliquer une distorsion (shear) à un élément le long des axes x et y. Cette fonction fait pivoter un élément, créant un effet de biais ou de déformation de l'élément dans un espace 2D. |
| skewX() | Cette fonction permet d'appliquer une distorsion à un élément uniquement le long de l'axe x. Cela crée un effet où l'élément est incliné horizontalement sans changer la position verticale. |
| skewY() | Cette fonction permet d'appliquer une distorsion à un élément uniquement le long de l'axe y. L'élément est incliné verticalement, modifiant son apparence sans affecter sa largeur horizontale. |
| sqrt() | Cette fonction permet de retourner la racine carrée d'un nombre spécifié. Cela peut être utilisé pour des calculs mathématiques dans le design, par exemple, pour créer des effets dynamiques qui reposent sur des valeurs carrées. |
| steps() | Cette fonction permet de créer une fonction de minuterie à "pas" pour les animations. Elle définit des étapes distinctes pour l'animation, comme une séquence de transitions discrètes au lieu d'un mouvement fluide, utile pour des effets tels que les animations de cases ou de boutons. |
| tan() | Cette fonction permet de retourner la tangente d'un nombre (en radians). Comme pour sin(), cette fonction est utilisée dans des calculs trigonométriques et peut être appliquée dans des animations ou des transformations avancées. |
| translate() | Cette fonction permet de déplacer un élément le long des axes x et y. Cela déplace l'élément de manière absolue dans l'espace sans modifier ses dimensions, utile pour positionner un élément sans affecter le flux du document. |
| translateX() | Cette fonction permet de déplacer un élément uniquement sur l'axe x (horizontal). Cela ajuste la position de l'élément à gauche ou à droite. |
| translateY() | Cette fonction permet de déplacer un élément uniquement sur l'axe y (vertical). Cela ajuste la position de l'élément en haut ou en bas. |
| url() | Cette fonction permet d'inclure un fichier (comme une image ou une police) dans la feuille de style en spécifiant l'URL du fichier. Cela permet de référencer des ressources externes pour les utiliser dans le style. |
| var() | Cette fonction permet d'insérer la valeur d'une propriété personnalisée (variable CSS). Cela permet d'utiliser des variables CSS définies au préalable dans les règles de style, facilitant la réutilisation et la gestion des styles dynamiques. |
Dernière mise à jour : Lundi, le 13 janvier 2025