CSS - Value Functions

Previous
Next

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.
Print Page
Previous
Next
Advertisements