CSS
Funciones

Sintaxis

• <calc()> = calc( <calc-sum> )
• <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
• <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
• <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Observaciones

función calc ()

Acepta una expresión matemática y devuelve un valor numérico.

Es especialmente útil cuando se trabaja con diferentes tipos de unidades (por ejemplo, restar un valor de px de un porcentaje) para calcular el valor de un atributo.

Se pueden usar todos los operadores + , - , / , y * , y se pueden agregar paréntesis para especificar el orden de las operaciones si es necesario.

Usa calc() para calcular el ancho de un elemento div:

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 
}

Use calc() para determinar la posición de una imagen de fondo:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Usa calc() para determinar la altura de un elemento:

height: calc(100% - 20px);

función attr ()

Devuelve el valor de un atributo del elemento seleccionado.

A continuación se muestra un elemento blockquote que contiene un carácter dentro de un atributo data-* que CSS puede usar (por ejemplo, dentro de ::before y ::after pseudo-element ) utilizando esta función.

<blockquote data-mark='"'></blockquote>

En el siguiente bloque CSS, el carácter se añade antes y después del texto dentro del elemento:

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

función de gradiente lineal ()

Crea una imagen que representa un degradado lineal de colores.

linear-gradient( 0deg, red, yellow 50%, blue);

Esto crea un gradiente que va de abajo hacia arriba, con colores que comienzan en rojo, luego en amarillo al 50% y terminan en azul.

función de gradiente radial ()

Crea una imagen que representa un degradado de colores que se irradia desde el centro del degradado.

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

función var ()

La función var () permite acceder a las variables CSS.

/* set a variable */
:root {
    --primary-color: blue;
}

/* access variable */
selector {
    color: var(--primary-color);
}

Esta característica esta actualmente en desarrollo. Compruebe caniuse.com para la última compatibilidad del navegador.