CSS value functions allow you to generate values for CSS properties dynamically. These functions take parameters and return a value that can be used in place of a static value.
Syntax
selector {
property: function([argument]? [, argument]!);
}
- The function name appears first in the value syntax, followed by a opening parenthesis (. The argument(s) come next, and a closing parenthesis ) completes the function.
- Multiple parameters are accepted by functions, and their formatting is the same as that of CSS property values.
- Though optional, whitespace is permitted inside parenthesis. Multiple arguments are separated by commas in certain functional notations and by spaces in others.
Transform Functions
The CSS data type called <transform-function> represents visual transformations and is employed as a value within the transform property.
Translate Functions
Following table lists translate functions:
| Functions | Description |
|---|---|
| translateX() | Translates an element horizontally. |
| translateY() | Translates an element veritcally. |
| translateZ() | Translates an element along the z-axis. |
| translate() | Translates an element on the 2D plane. |
| translate3d() | Translates an element in 3D space. |
Rotation Functions
Following table lists rotation functions:
| Functions | Description |
|---|---|
| rotateX() | Rotates an element around the horizontal axis. |
| rotateY() | Rotates an element around the vertical axis. |
| rotateZ() | Rotates an element around the z-axis. |
| rotate() | Rotates an element around a fixed point on the 2D plane. |
| rotate3d() | Rotates an element around a fixed axis in 3D space. |
Scaling Functions
Following table lists scaling functions:
| Functions | Description |
|---|---|
| scaleX() | Scales an element up or down horizontally. |
| scaleY() | Scales an element up or down vertically. |
| scaleZ() | Scales an element up or down along the z-axis. |
| scale() | Scales an element up or down on the 2D plane. |
| scale3d() | Scales an element up or down in 3D space. |
Skew Functions
Following table lists skew functions:
| Functions | Description |
|---|---|
| skewX() | Skews an element in the horizontal direction. |
| skewY() | Skews an element in the vertical direction. |
| skew() | Skews an element on the 2D plane. |
Matrix Functions
Following table lists matrix functions:
| Functions | Description |
|---|---|
| matrix() | Describes a homogeneous 2D transformation matrix. |
| matrix3d() | Describes a 3D transformation as a 4×4 homogeneous matrix. |
Perspective Functions
Following table lists perspective functions:
| Functions | Description |
|---|---|
| perspective() | Sets the distance between the user and the z=0 plane. |
Math Functions
Mathematical expressions can be used in CSS to represent numeric values using math functions.
Basic Arithmetic Functions
Following table lists basic arithmetic functions:
| Function | Description |
|---|---|
| calc() | Performs basic arithmetic calculations on numerical values. |
Comparision Functions
Following table lists comparision functions:
| Function | Description |
|---|---|
| min() | Determines the minimum value from a given set of values. |
| max() | Determines the maximum value from a given list of values. |
| clamp() | Calculates the central of a minimum, central, and maximum values. |
Stepped Value Functions
Following table lists stepped value functions:
| Function | Description |
|---|---|
| round() | Calculates a rounded number based on a rounding strategy. |
Trignometric Functions
Following table lists trignometric functions:
| Function | Description |
|---|---|
| sin() | Calculates the trigonometric sine of a number. |
| cos() | Calculates the trigonometric cosine of a number |
| tan() | Calculates the trigonometric tangent of a number. |
| asin() | Calculates the trigonometric inverse sine of a number. |
| acos() | Calculates the trigonometric inverse cosine of a number. |
| atan() | Calculates the trigonometric inverse tangent of a number. |
| atan2() | Calculates the trigonometric inverse tangent of two-numbers in a plane. |
Filter Functions
The CSS data type <filter-function> denotes a graphical effect capable of changing the look of an input image. It’s used within the filter and backdrop-filter properties.
| Function | Description |
|---|---|
| blur() | Increases the image gaussian blur. |
| brightness() | Brightens or darkens an image.. |
| contrast() | Increases or decreases the image contrast. |
| drop-shadow() | Applies a drop shadow behind an image. |
| grayscale() | Converts an image to grayscale. |
| hue-rotate() | Changes the overall hue of an image. |
| invert() | Inverts the colors of an image. |
| opacity() | Adds transparency to an image. |
| saturate() | Changes the overall saturation of an image. |
| sepia() | Increases the sepia of an image. |
Color Functions
The CSS data type <color> defines various ways to represent colors.
| Function | Description |
|---|---|
| rgb() | Specifies a given color according to its red, green, blue and alpha (transparency) components. |
| hsl() | Specifies a given color according to its hue, saturation, lightness and alpha (transparency) components. |
| hwb() | Specifies a given color according to its hue, whiteness and blackness components. |
| lch() | Specifies a given color according to its lightness, chroma and hue components. |
| oklch() | Specifies a given color according to its lightness, chroma, hue and alpha (transparency) components. |
| lab() | Specifies a given color according to its lightness, a-axis distance and b-axis distance in the lab colorspace. |
| oklab() | Specifies a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace and alpha (transparency). |
| color() | Specifies a particular, specified colorspace rather than the implicit sRGB colorspace |
| color-mix() | Mixes two color values in a given colorspace by a given amount. |
Image Functions
The CSS data type <image> offers graphical representations of images or gradients.
Gradient Functions
Following table lists gradient functions:
| Function | Description |
|---|---|
| linear-gradient() | Linear gradients transition colors progressively along an imaginary line. |
| radial-gradient() | Radial gradients transition colors progressively from a center point (origin). |
| conic-gradient() | Conic gradients transition colors progressively around a circle. |
| repeating-linear-gradient() | Is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. |
| repeating-radial-gradient() | Is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. |
| repeating-conic-gradient() | Is similar to conic-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. |
Image Functions
Following table lists image functions:
| Function | Description |
|---|---|
| image-set() | Picks the most appropriate CSS image from a given set, primarily for high pixel density screens. |
| cross-fade() | Blends two or more images at a defined transparency. |
| paint() | Defines an <image> value generated with a PaintWorklet. |
Counter Functions
CSS counter functions can theoretically be used anywhere a <string> is available, however they are typically used in conjunction with the content property.
| Function | Description |
|---|---|
| counter() | Returns a string representing the current value of the named counter if there is one. |
| counters() | Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. |
Shape Functions
The CSS data type <basic-shape> signifies a visual shape and is employed in properties such as clip-path, offset-path, and shape-outside.
| Function | Description |
|---|---|
| circle() | Defines a circle shape. |
| ellipse() | Defines an ellipse shape. |
| inset() | Defines an inset rectangle shape. |
| polygon() | Defines a polygon shape. |
| path() | Accepts an SVG path string to enable a shape to be drawn. |
Reference Functions
In order to reference a value defined elsewhere, the following functions are used as a value of properties.
| Function | Description |
|---|---|
| attr() | Uses the attributes defined on HTML element. |
| env() | Uses the user-agent defined as environment variable. |
| url() | Uses a file from the specified URL. |
| var() | Uses the custom property value instead of any part of a value of another property. |
Grid Functions
The following functions are used to define a CSS Grid.
| Function | Description |
|---|---|
| fit-content() | Clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)). |
| minmax() | Defines a size range greater-than or equal-to min and less-than or equal-to max. |
| repeat() | Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern. |
Font Functions
Alternate glyph usage is managed through the use of CSS font functions in combination with the font-variant-alternates property.
| Function | Description |
|---|---|
| stylistic() | This function activates stylistic alternates for certain characters using a font-specific name associated with a number. |
| styleset() | This function activates stylistic alternatives for groups of characters. The parameter is a font-specific name associated with a number, such as ss02. |
| character-variant() | This function allows distinct stylistic variations for individual characters, unlike styleset(), which creates coherent glyphs for a character set. |
| swash() | This function activates swash glyphs with a font-specific name associated with a number, e.g. swsh 2 and cswh 2. |
| ornaments() | This function activates ornaments such as fleurons and dingbat glyphs using a font-specific name associated with a number, such as ornm 2. |
| annotation() | This function allows annotations such as circled digits or inverted characters using a font-specific name associated with a number, for example, nalt 2 |
Easing Functions
The values for transition and animation properties come from the following functions.
| Function | Description |
|---|---|
| linear() | Easing function that interpolates linearly between its points.. |
| cubic-bezier() | Easing function that defines a cubic Bézier curve. |
| steps() | Iteration along a specified number of stops along the transition, displaying each stop for equal lengths of time. |
Leave a Reply