Funciones

bookmark_border Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

The CSS Podcast - 020: Functions

Hasta ahora en este curso, aprendiste varias funciones de CSS. En el módulo de cuadrícula, se te presentaron minmax() y fit-content(), que te ayudan a ajustar el tamaño de los elementos. En el módulo color, se te presentaron rgb() y hsl(), que te ayudan a definir colores.

Al igual que muchos otros lenguajes de programación, CSS tiene muchas funciones integradas a las que puedes acceder cuando las necesites.

Cada función de CSS tiene un propósito específico. En esta lección, obtendrás una descripción general de alto nivel, que te permitirá comprender mejor dónde y cómo usarlas.

¿Qué es una función?

Una función es un fragmento de código nombrado y autónomo que completa una tarea específica. Las funciones se nombran para que puedas llamarlas dentro de tu código y pasar datos a ellas. Esto se conoce como pasar argumentos.

Muchas funciones de CSS son funciones puras, lo que significa que, si les pasas los mismos argumentos, siempre te devolverán el mismo resultado, independientemente de lo que suceda en el resto del código. Estas funciones suelen volver a calcularse a medida que cambian los valores en tu CSS, similar a otros elementos del lenguaje, como los valores en cascada calculados, como currentColor.

En CSS, solo puedes usar las funciones proporcionadas, en lugar de escribir las tuyas propias, pero las funciones se pueden anidar entre sí en algunos contextos, lo que les brinda más flexibilidad. Lo veremos con más detalle más adelante en este módulo.

Selectores funcionales

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Aprendiste sobre los selectores funcionales en el módulo de pseudoclases, que detalla funciones como :is() y :not(). Los argumentos que se pasan a estas funciones son selectores CSS, que luego se evalúan. Si hay una coincidencia con los elementos, se les aplicará el resto de la regla CSS.

Propiedades personalizadas y var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Una propiedad personalizada es una variable que te permite tokenizar valores en tu código CSS. Las propiedades personalizadas también se ven afectadas por la cascada, lo que significa que se pueden manipular o redefinir de forma contextual. Una propiedad personalizada debe tener el prefijo de dos guiones (--) y distingue mayúsculas de minúsculas.

La función var() toma un argumento obligatorio: la propiedad personalizada que intentas mostrar como valor.

En el fragmento anterior, la función var() tiene --base-color como argumento. Si se define --base-color, var() mostrará el valor.

.my-element {
    background: var(--base-color, hotpink);
}

También puedes pasar un valor de declaración de resguardo a la función var(). Esto significa que, si no se puede encontrar --base-color, se usará la declaración pasada, que en el caso de este ejemplo es el color hotpink.

Funciones que muestran un valor

La función var() es solo una de las funciones de CSS que muestran un valor. Las funciones como attr() y url() siguen una estructura similar a var(): pasas uno o más argumentos y los usas en el lado derecho de tu declaración de CSS.

a::after {
  content: attr(href);
}

Aquí, la función attr() toma el contenido del atributo href del elemento <a> y lo establece como el content del pseudoelemento ::after. Si cambiara el valor del atributo href del elemento <a>, esto se reflejaría automáticamente en este atributo content.

.my-element {
    background-image: url('/path/to/image.jpg');
}

La función url() toma una URL de cadena y se usa para cargar imágenes, fuentes y contenido. Si no se pasa una URL válida o no se puede encontrar el recurso al que apunta la URL, la función url() no mostrará nada.

Funciones de color

Aprendiste todo sobre las funciones de color en el módulo color. Si aún no lo hiciste, te recomendamos que lo hagas.

Algunas funciones de color disponibles en CSS son rgb(), hsl(), lab(), lch(), oklab(), oklch() y color(). Todos tienen una forma similar en la que se pasan argumentos de configuración y se muestra un color.

Expresiones matemáticas

Al igual que muchos otros lenguajes de programación, CSS proporciona funciones matemáticas útiles para ayudar con varios tipos de cálculos.

Funciones aritméticas

calc()

La función calc() toma una sola expresión matemática como parámetro. Esta expresión matemática puede ser una combinación de tipos, como longitud, número, ángulo y frecuencia. Las unidades también se pueden mezclar.

.my-element {
    width: calc(100% - 2rem);
}

En este ejemplo, se usa la función calc() para ajustar el ancho de un elemento al 100% de su elemento superior contenedor y, luego, quitar 2rem de ese valor calculado.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

La función calc() se puede anidar dentro de otra función calc(). También puedes pasar propiedades personalizadas en una función var() como parte de una expresión.

min() y max()

La función min() muestra el valor calculado más pequeño de uno o más argumentos pasados. La función max() hace lo contrario: obtiene el valor más alto de uno o más argumentos pasados.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

En este ejemplo, width debe ser el valor más pequeño entre 20vw, que es el 20% del ancho del viewport, y 30rem. La altura debe ser el valor más alto entre 20vh, que es el 20% de la altura del viewport, y 20rem.

clamp()

La función clamp() toma tres argumentos: el tamaño mínimo, el tamaño ideal y el máximo.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

En este ejemplo, font-size será fluido según el ancho del viewport. La unidad vw se agrega a una unidad rem para ayudar con el zoom de la pantalla, ya que, independientemente del nivel de zoom, una unidad vw tendrá el mismo tamaño. Multiplicar por una unidad rem (según el tamaño de la fuente raíz) le proporciona a la función clamp() un punto de cálculo relativo.

Puedes obtener más información sobre las funciones min(), max() y clamp() en este artículo sobre estas funciones.

Funciones trigonométricas

Las funciones trigonométricas te permiten encontrar cualquier punto en un círculo en función de un ángulo, modelar fenómenos cíclicos, como las ondas sonoras, describir órbitas y mucho más. En CSS, puedes usar funciones trigonométricas para establecer propiedades basadas en la rotación, las animaciones de tiempo, la rotación de elementos en función de un punto y otros usos.

Para obtener más información y ejemplos, consulta nuestro artículo sobre funciones trigonométricas.

sin(), cos() y tan()

Las funciones sin(), cos() y tan() toman un argumento de ángulo y muestran el seno, el coseno y la tangente, respectivamente. Las funciones sin() y cos() muestran un número entre -1 y 1. La función tan() muestra un número entre -Infinity y +Infinity. El argumento de ángulo puede ser cualquier unidad de ángulo compatible.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

En el ejemplo anterior, --sine-degrees y --sine-radians tienen el mismo valor (en este caso, 0.7071).

En el ejemplo anterior, las funciones sin() y cos() se usan para crear animaciones oscilantes en los ejes x y y multiplicando el resultado por el radio especificado. El uso de ambas funciones a la vez permite una animación orbital. Usamos una propiedad personalizada, --angle, para animar el ángulo de todas las llamadas a función de forma fluida.

asin(), acos() y atan()

asin(), acos() y atan() son la inversa de las funciones sin(), cos() y tan(), que toman un número como argumento y muestran un valor de ángulo entre -90deg y 90deg. Las funciones asin() y acos() aceptan un número entre -1 y 1, mientras que la función atan() acepta un número entre -Infinity y +Infinity.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

La función atan2() toma dos argumentos que representan un punto en relación con el origen y muestra el ángulo que representa la dirección a ese punto. Puedes usar esto para rotar elementos para que apunten a un punto específico. Los argumentos pueden ser números, unidades de tamaño o un porcentaje, pero ambos deben ser del mismo tipo.

En el ejemplo anterior, se usa la función atan2() para determinar el ángulo entre el centro del viewport y la posición actual del mouse. Ten en cuenta que el valor y es el primer argumento y el valor x es el segundo. Luego, se usa el ángulo para posicionar las "pupilas" en relación con el centro de los "ojos", de modo que sigan al mouse.

hypot()

La función hypot() toma dos argumentos de longitud que representan los lados de un triángulo rectángulo y muestra la longitud de la hipotenusa. Puedes usar esto como un atajo para calcularlo con funciones exponenciales. Ambos argumentos deben ser del mismo tipo de unidad y hypot() mostrará el mismo tipo.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Funciones exponenciales

pow() y exp()

La función pow() toma dos argumentos numéricos, la base y el exponente, y eleva la base a la potencia del exponente. Ambos argumentos deben ser números sin unidades. La función exp() toma un solo argumento y equivale a llamar a la función pow() con una base de e.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

La función sqrt() toma un argumento numérico y muestra su raíz cuadrada. El argumento no puede incluir unidades.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

La función log() muestra el logaritmo de un valor numérico. Si se pasa un argumento, se mostrará el logaritmo natural. Si se pasa un segundo argumento, la función log() usará el segundo argumento como base para el logaritmo.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

Funciones relacionadas con la firma

abs()

La función abs() toma un argumento numérico y muestra el valor absoluto (positivo) del valor del argumento.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

En el ejemplo anterior, un valor alpha de -1 generaría texto transparente, pero la función abs() muestra el valor absoluto de 1, lo que genera texto completamente opaco.

sign()

La función sign() toma un argumento numérico y muestra el signo del argumento. Los valores positivos muestran 1 y los valores negativos muestran -1. Los valores cero muestran 0.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

En los ejemplos anteriores, si --value es positivo, el valor superior será 75vh. Si es negativo, el valor superior será 25vh. Si es cero, el valor superior será 50vh.

Formas

Las propiedades de CSS clip-path, offset-path y shape-outside usan formas para recortar visualmente el cuadro o proporcionar una forma para que el contenido fluya.

Existen funciones de forma que se pueden usar con ambas propiedades. Las formas simples, como circle(), ellipse() y inset(), toman argumentos de configuración para cambiar su tamaño. Las formas más complejas, como polygon(), toman pares de valores de ejes X e Y separados por comas para crear formas personalizadas.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Al igual que polygon(), también hay una función path() que toma una regla de relleno SVG como argumento. Esto permite crear formas muy complejas que se pueden dibujar en una herramienta de gráficos, como Illustrator o Inkscape, y, luego, copiarlas en tu CSS.

Transformaciones

Por último, en esta descripción general de las funciones de CSS, se encuentran las funciones de transformación, que sesgan, cambian de tamaño y hasta cambian la profundidad de un elemento. Todas las siguientes funciones se usan con la propiedad transform.

Rotación

Puedes rotar un elemento con la función rotate(), que rotará un elemento en su eje central. También puedes usar las funciones rotateX(), rotateY() y rotateZ() para rotar un elemento en un eje específico. Puedes pasar unidades de grado, giro y radianes para determinar el nivel de rotación.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

La función rotate3d() toma cuatro argumentos.

Los primeros 3 argumentos son números que definen las coordenadas X, Y y Z. El cuarto argumento es la rotación que, como las otras funciones de rotación, acepta grados, ángulos y giros.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Puedes usar la propiedad individual rotate para rotar un elemento. Cuando se usa fuera de la propiedad transform, puedes realizar la transición de forma independiente de otras transformaciones. Acepta valores similares a las funciones de rotación.

Escala

Puedes cambiar el escalamiento de un elemento con transform y la función scale(). La función acepta uno o dos números como valor que determinan una escala positiva o negativa. Si solo defines un argumento numérico, tanto el eje X como el Y se escalarán de la misma manera, y definir ambos es una forma abreviada de X y Y. Al igual que rotate(), existen las funciones scaleX(), scaleY() y scaleZ() para escalar un elemento en un eje específico.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Al igual que la función rotate, hay una función scale3d(). Esto es similar a scale(), pero toma tres argumentos: los factores de escala X, Y y Z.

Puedes usar la propiedad individual scale para escalar un elemento. Cuando se usa fuera de la propiedad transform, puedes hacer la transición por separado de otras transformaciones.

Traducir

Las funciones translate() mueven un elemento mientras mantiene su posición en el flujo del documento. Aceptan valores de longitud y porcentaje como argumentos. La función translate() traduce un elemento a lo largo del eje X si se define un argumento y traduce un elemento a lo largo de los ejes X e Y si se definen ambos argumentos.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Al igual que con otras funciones de transformación, puedes usar funciones específicas para un eje específico con translateX, translateY y translateZ. También puedes usar translate3d, que te permite definir la traducción de X, Y y Z en una función.

Al igual que scale y rotate, también puedes usar la propiedad translate fuera de la propiedad transform para mover un elemento.

.my-element{
  translate: 20px 30px;
}

Sesgo

Puedes sesgar un elemento con las funciones skew() que aceptan ángulos como argumentos. La función skew() funciona de manera muy similar a translate(). Si solo defines un argumento, solo afectará al eje X y, si defines ambos, afectará al eje X y al eje Y. También puedes usar skewX y skewY para afectar cada eje de forma independiente.

.my-element {
  transform: skew(10deg);
}

Perspectiva

Por último, puedes usar la propiedad perspective, que forma parte de la familia de propiedades de transformación, para alterar la distancia entre el usuario y el plano Z. Esto da la sensación de distancia y se puede usar para crear una profundidad de campo en tus diseños.

En este ejemplo de David Desandro, de su artículo muy útil, se muestra cómo se puede usar, junto con las propiedades perspective-origin-x y perspective-origin-y, para crear experiencias verdaderamente 3D.

Funciones de animación, gradientes y filtros

CSS también proporciona funciones que te ayudan a animar elementos, aplicarles gradientes y usar filtros gráficos para manipular su apariencia. Para que este módulo sea lo más conciso posible, se abordan en los módulos vinculados. Todas siguen una estructura similar a las funciones que se muestran en este módulo.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre las funciones