Funciones exponenciales CSS

Las funciones pow(), sqrt(), hypot()


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) AB
sqrt() Devuelve la raíz cuadrada de A. sqrt(A) pow(A, 0.5)
hypot() Devuelve la raíz cuadrada de +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>

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev