En el caso de que necesitemos funciones CSS para jugar con valores exponenciales, también podemos utilizar la siguiente familia de funciones, que nos permiten realizar cálculos de potenciación, raíces cuadradas, hipotenusa, logaritmos, etc.
Funciones exponenciales
Las funciones exponenciales en CSS (y relacionadas) son las siguientes:
| Función CSS | Descripción | Ejemplo | Equivalencia |
|---|---|---|---|
pow() | Devuelve la base A elevada al exponente B. | pow(A, B) | |
sqrt() | Devuelve la raíz cuadrada de A. | sqrt(A) | pow(A, 0.5) |
hypot() | Devuelve la raíz cuadrada de A²+B² + … | hypot(A, B, …) | sqrt(pow(A, 2) + pow(B, 2) + …) |
log() | Devuelve el logaritmo de A en base B (si se omite, es e) | log(A, B) | |
exp() | Devuelve el valor exponencial de A. | exp(A) | pow(e, A) |
Ten en cuenta, que la función hypot(), al contrario que el resto de funciones anteriores, permite indicar valores con unidades como px o em.
Veamos un ejemplo para ver elementos donde utilizamos la función CSS pow(), que la utilizaremos para usar potencias de 2:
.element {
width: calc(pow(2, var(--size)) * 1px);
height: 25px;
background: indigo;
margin: 5px;
}
.a { --size: 1; } /* 2px */
.b { --size: 2; } /* 4px */
.c { --size: 4; } /* 16px */
.d { --size: 8; } /* 256px */<div class="element a"></div>
<div class="element b"></div>
<div class="element c"></div>
<div class="element d"></div>
