Page 183 - CSS

height: calc(100% - 20px);

attr() function

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>

In the following CSS block, the character is appended before and after the text inside the element:

blockquote[data-mark]::before,
blockquote[data-mark]::after {
content: attr(data-mark);
}

linear-gradient() function

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.

radial-gradient() function

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*/

var() function

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.

https://riptutorial.com/ 161