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.
| 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) |
1. Funciones matemáticas CSS
Veamos detalladamente las funciones más destacadas de CSS.
2. calc()
La función matemática calc() en CSS se utiliza para realizar cálculos aritméticos y combinar diferentes unidades de medida. Veamos 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. A continuación 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.
3. 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. En este ejemplo 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 */
4. 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 */
5. round()
La función matemática round() en CSS se utiliza para redondear un número al entero más cercano. Veamos 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. En este ejemplo, 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 */
6. attr()
La función matemática attr() en CSS se utiliza para obtener el valor de un atributo HTML y utilizarlo en propiedades CSS. Veamos 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