Accepts a mathematical expression and returns a numerical value.
It is especially useful when working with different types of units (e.g. subtracting a px value from a percentage) to calculate the value of an attribute.
+, -, /, and * operators can all be used, and parentheses can be added to spec...
Returns the value of an attribute of the selected element.
Below is a blockquote element which contains a character inside a data-* attribute which CSS can use (e.g. inside the ::before and ::after pseudo-element) using this function.
<blockquote data-mark='"'></blockquote>
I...
Creates a image representing a linear gradient of colors.
linear-gradient( 0deg, red, yellow 50%, blue);
This creates a gradient going from bottom to top, with colors starting at red, then yellow at 50%, and finishing in blue.
Creates an image representing a gradient of colors radiating from the center of the gradient
radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/
The var() function allows CSS variables to be accessed.
/* set a variable */
:root {
--primary-color: blue;
}
/* access variable */
selector {
color: var(--primary-color);
}
This feature is currently under development. Check caniuse.com for the latest browser support.
