Funciones matemáticas en CSS

CSS proporciona varias funciones matemáticas que se pueden utilizar para realizar cálculos y manipular valores numéricos en propiedades CSS. Algunas de las funciones matemáticas más comunes en CSS son las que se muestran en la siguiente tabla.

Contenidos del artículo

Propiedad	Descripción	Valores Ejemplo
`abs()`	Devuelve el valor absoluto de un número	`abs(-10)` = 10
`sin()`	Devuelve el seno de un ángulo	`sin(45deg)` ≈ 0.71
`cos()`	Devuelve el coseno de un ángulo	`cos(60deg)` = 0.5
`tan()`	Devuelve la tangente de un ángulo	`tan(30deg)` ≈ 0.58
`sqrt()`	Devuelve la raíz cuadrada de un número	`sqrt(16)` = 4
`pow()`	Eleva un número a una potencia	`pow(2, 3)` = 8
`min()`	Devuelve el valor mínimo entre dos números	`min(10, 5)` = 5
`max()`	Devuelve el valor máximo entre dos números	`max(10, 5)` = 10
`random()`	Devuelve un número aleatorio entre 0 y 1	`random()` ≈ 0.35
`floor()`	Devuelve el valor entero menor o igual	`floor(3.8)` = 3
`ceil()`	Devuelve el valor entero mayor o igual	`ceil(3.2)` = 4
`round()`	Devuelve el valor redondeado al entero más cercano	`round(3.7)` = 4
`clamp()`	Limita un valor dentro de un rango	`clamp(10, 5, 8)` = 8
`calc()`	Realiza cálculos matemáticos en propiedades CSS	`width: calc(100% - 20px)`
`attr()`	Obtiene el valor de un atributo HTML y lo utiliza en CSS	`content: attr(data-text)`

Tabla 1. Funciones matemáticas en CSS

2. Funciones matemáticas CSS

Veamos detalladamente las funciones más destacadas de CSS.

2.1. calc()

La función matemática calc() en CSS se utiliza para realizar cálculos aritméticos y combinar diferentes unidades de medida. Aquí tienes algunos ejemplos de cómo se puede utilizar:

Ejemplo 1: Suma de valores. En este ejemplo, se realiza la suma de 100px y 20px, lo que da como resultado un ancho de 120px.

width: calc(100px + 20px); /* Resultado: 120px */

Ejemplo 2: Resta de valores. En este caso, se resta 10px al 80% del ancho disponible, lo que dará como resultado un ancho relativo.

width: calc(80% - 10px); /* Resultado: El 80% del ancho disponible menos 10px */

Ejemplo 3: Multiplicación de valores. Aquí se realiza la multiplicación de 2 por el 50% del ancho disponible, obteniendo un ancho relativo igual al doble del 50%.

width: calc(2 * 50%); /* Resultado: El doble del 50% del ancho disponible */

Ejemplo 4: Combinación de operaciones. En este ejemplo, se realiza una combinación de operaciones donde se suma 100px con el 10% del ancho disponible y luego se divide el resultado por 3.

width: calc((100px + 10%) / 3); /* Resultado: El resultado de la operación combinada */

Veamos un ejemplo práctico:

Ejemplo

Realización de cálculos con calc() de CSS para conseguir un contenedor fijo y otro variable.

2.2. min()

La función matemática min() en CSS se utiliza para obtener el valor mínimo entre varios valores o dimensiones. A continuación se pueden ver algunos ejemplos de cómo se puede utilizar:

Ejemplo 1: Obtener el valor mínimo entre dos anchos. En este ejemplo, se obtiene el valor mínimo entre 200px y el 50% del ancho disponible, lo que dará como resultado el valor más pequeño entre ambos.

width: min(200px, 50%); /* Resultado: El valor mínimo entre 200px y el 50% del ancho disponible */

Ejemplo 2: Obtener el valor mínimo entre tres alturas. Aquí se obtiene el valor mínimo entre 100px, 150px y el 50% del alto disponible, resultando en la altura más pequeña entre los tres valores.

height: min(100px, 150px, 50%); /* Resultado: El valor mínimo entre 100px, 150px y el 50% del alto disponible */

Ejemplo 3: Combinar valores absolutos y relativos. En este caso, se obtiene el valor mínimo entre 16px y 1.2 veces el tamaño de fuente actual, lo que dará como resultado el tamaño de fuente más pequeño entre ambos.

font-size: min(16px, 1.2em); /* Resultado: El valor mínimo entre 16px y 1.2 veces el tamaño de fuente actual */

2.3. max()

La función matemática max() en CSS se utiliza para obtener el valor máximo entre varios valores o dimensiones. A continuación se muestran algunos ejemplos de cómo se puede utilizar:

Ejemplo 1: Obtener el valor máximo entre dos anchos. En este ejemplo, se obtiene el valor máximo entre 200px y el 50% del ancho disponible, lo que dará como resultado el valor más grande entre ambos.

width: max(200px, 50%); /* Resultado: El valor máximo entre 200px y el 50% del ancho disponible */

Ejemplo 2: Obtener el valor máximo entre tres alturas. Aquí se obtiene el valor máximo entre 100px, 150px y el 50% del alto disponible, resultando en la altura más grande entre los tres valores.

height: max(100px, 150px, 50%); /* Resultado: El valor máximo entre 100px, 150px y el 50% del alto disponible */

Ejemplo 3: Combinar valores absolutos y relativos. En este caso, se obtiene el valor máximo entre 16px y 1.2 veces el tamaño de fuente actual, lo que dará como resultado el tamaño de fuente más grande entre ambos.

font-size: max(16px, 1.2em); /* Resultado: El valor máximo entre 16px y 1.2 veces el tamaño de fuente actual */

2.4. round()

La función matemática round() en CSS se utiliza para redondear un número al entero más cercano. Aquí tienes algunos ejemplos de cómo se puede utilizar:

Ejemplo 1: Redondear un número decimal. En este ejemplo el número decimal 3.7rem se redondea al entero más cercano, que es 4rem.

width: round(3.7rem); /* Resultado: 4rem */

Ejemplo 2: Redondear un número negativo. Aquí, el número negativo -2.3em se redondea al entero más cercano, que es -2em.

padding: round(-2.3em); /* Resultado: -2em */

Ejemplo 3: Redondear un número con decimales a un número específico de lugares decimales. En este caso, el número 1.2345 se redondea a 2 lugares decimales, resultando en 1.23.

font-size: round(1.2345, 2); /* Resultado: 1.23 */

2.5. attr()

La función matemática attr() en CSS se utiliza para obtener el valor de un atributo HTML y utilizarlo en propiedades CSS. Aquí tienes algunos ejemplos de cómo se puede utilizar:

Ejemplo 1: Obtener el valor de un atributo y utilizarlo como ancho. En este ejemplo, se obtiene el valor del atributo data-width y se utiliza como valor para la propiedad width. Esto puede ser útil cuando se necesita establecer dinámicamente el ancho de un elemento basado en un atributo específico.

width: attr(data-width);

Ejemplo 2: Obtener el valor de un atributo y utilizarlo en una operación matemática. Aquí, se obtiene el valor del atributo data-height y se utiliza en una operación matemática dentro de la función calc(). Esto permite realizar cálculos con el valor del atributo y aplicar el resultado como valor para la propiedad height.

height: calc(attr(data-height) * 2);

Ejemplo 3: Obtener el valor de un atributo y utilizarlo como contenido de un pseudo-elemento. En este caso, se obtiene el valor del atributo data-content y se utiliza como contenido para un pseudo-elemento. Esto permite mostrar dinámicamente el contenido de un atributo HTML en el estilo de un elemento.

content: attr(data-content);

En el siguiente ejemplo utilizamos el atributo data-author para mostrarlo como contenido en el documento HTML.

Test