CSS: Funciones (lista)

Las funciones CSS son declaraciones que permiten realizar operaciones o procesar datos y se pueden usar como valor en distintas propiedades CSS. Se pueden usar para realizar cálculos matemáticos, aplicar efectos visuales, transformar elementos o indicar colores a través de varios modelos.

Algunas de las funciones más comunes son las que permiten definir colores, como es el caso de rgb() y hsl(); las que permiten realizar cálculos matemáticos, como calc() y abs(); o las que permiten definir degradados de color, como es el caso de linear-gradient(), aunque hay muchas más. Al tratarse de funciones, admiten uno o varios argumentos para calcular el valor de retorno.

Funciones de uso general

Hay algunas funciones que son de uso general, por lo que se pueden utilizar en varias propiedades CSS. Se trata de las funciones url(), attr() y var(). Vamos a verlas con más detalle.

La función ‘url()’

La función url() permite incluir recursos externos para utilizarlos en la hoja de estilos CSS. Estos recursos pueden ser imágenes de todo tipo, archivos de fuente, o cualquier otro archivo que queramos utilizar como parte del diseño del sitio web. Esta función tiene una sintaxis bastante simple; es fácil de usar.

Como parámetro admite una URL, ya sea relativa o absoluta, del recurso externo que se desea incluir. La URL es una cadena de texto que se puede introducir dentro de comillas, que son opcionales pero recomendables.

Ejemplo de uso de la función url():

.ejemplo {
  content: url("/favicon.svg");
}

Referente a la ubicación de los recursos externos, se recomienda crear una carpeta en el mismo directorio que los archivos CSS, indicando de esta forma una URL relativa. Esta práctica ofrece la ventaja de separar los archivos del diseño del contenido, lo que hace el mantenimiento más fácil.

La función ‘attr()’

La función attr() permite extraer el valor de un atributo de un elemento HTML, para utilizarlo en la hoja de estilos CSS. Es una función muy útil cuando se utiliza con la propiedad content y los pseudoelementos ::before y ::after, así se puede generar contenido a partir del valor del atributo HTML.

Como parámetro admite el nombre del atributo deseado, como sería el caso de href, title o data-*, por nombrar algunos. Un ejemplo práctico puede ser el de mostrar la definición de un acrónimo HTML (elemento <abbr>) utilizando como valor el atributo title, tal y como se muestra en el código CSS siguiente.

.ejemplo::after {
  content: attr(title);
}

La función ‘var()’

La función var() permite insertar el valor de una variable CSS personalizada en un lugar concreto de la hoja de estilos CSS. Esta función también es útil para organizar el código y hacer más fácil su mantenimiento en proyectos grandes. De esta forma es posible reutilizar valores a lo largo del archivo CSS.

Como parámetro de esta función se indica el nombre de la variable incluyendo el prefijo --. Es necesario que de forma previa se haya definido la variable dentro de un selector, para después poder utilizarla. En el siguiente ejemplo creamos una variable de color y luego insertamos su valor.

Código CSS:

:root {
  --mi-variable: red;
}

.clase {
  color: var(--mi-variable);
}

A continuación se muestra una tabla con las funciones clasificadas según la temática, y se acompañan con una descripción resumida y un enlace hacia el artículo que las describe.

Color

Función	Descripción
`rgb()`	Combinación de rojo, verde y azul.
`hsl()`	Combinación de matiz, saturación y luminosidad.
`hwb()`	Combinación de matiz, blancura y negrura.

Filtros

Función	Descripción
`blur()`	Desenfoca la imagen.
`brightness()`	Ajusta el brillo.
`contrast()`	Ajusta el contraste.
`drop-shadow()`	Añade una sombra.
`grayscale()`	Convierte a escala de grises.
`hue-rotate()`	Aplica una rotación de tono.
`invert()`	Invierte los colores.
`opacity()`	Añade transparencia.
`saturate()`	Ajusta la saturación.
`sepia()`	Convierte a color sepia.

Degradados

Función	Descripción
`linear-gradient()`	Degradado lineal.
`radial-gradient()`	Degradado radial.
`conic-gradient()`	Degradado cónico.
`repeating-linear-gradient()`	Patrón de degradado lineal.
`repeating-radial-gradient()`	Patrón de degradado radial.
`repeating-conic-gradient()`	Patrón de degradado cónico.

Contenido

Función	Descripción
`url()`	Indica la URL válida de una imagen.
`attr()`	Indica el valor de un atributo.

Contadores

Función	Descripción
`counter()`	Muestra el valor de un contador.
`counters()`	Trabaja con contadores anidados.

Cuadrículas

Función	Descripción
`repeat()`	Define varias filas o columnas con el mismo tamaño.
`minmax()`	Define un rango para el tamaño de un elemento.

Traslación

Función	Descripción
`translateX()`	Traslada el elemento a través del eje horizontal (X).
`translateY()`	Traslada el elemento a través del eje vertical (Y).
`translate()`	Abreviatura para la traslación en 2D (X, Y).
`translateZ()`	Traslada el elemento a través de la profundidad (Z).
`translate3d()`	Abreviatura para la traslación en 3D (X, Y, Z).

Rotación

Función	Descripción
`rotateX()`	Rota el elemento a través del eje horizontal (X).
`rotateY()`	Rota el elemento a través del eje vertical (Y).
`rotateZ()`	Rota el elemento a través de la profundidad (Z).
`rotate()`	Rota el elemento sobre sí mismo.
`rotate3d()`	Abreviatura para rotar en los tres ejes (X, Y, Z).

Escalado

Función	Descripción
`scaleX()`	Escala el elemento a través del eje horizontal (X).
`scaleY()`	Escala el elemento a través del eje vertical (Y).
`scale()`	Abreviatura para el escalado en 2D (X, Y).
`scaleZ()`	Escala el elemento a través de la profundidad (Z).
`scale3d()`	Abreviatura para el escalado en 3D (X, Y, Z).

Deformación

Función	Descripción
`skewX()`	Deforma el elemento a través del eje horizontal (X).
`skewY()`	Deforma el elemento a través del eje vertical (Y).

Perspectiva

Función	Descripción
`perspective()`	Indica el punto de fuga.

Matrices

Función	Descripción
`matrix()`	Establece una matriz de transformación 2D.
`matrix3d()`	Establece una matriz de transformación 3D.

Transiciones

Función	Descripción
`cubic-bezier()`	Personaliza una curva de tiempo para transiciones.
`steps()`	Crea una transición que da saltos bruscos.

Animaciones

Función	Descripción
`cubic-bezier()`	Personaliza una curva de tiempo para animaciones.
`steps()`	Crea una animación que da saltos bruscos.

Trayectos

Función	Descripción
`ray()`	Define un segmento de línea con un ángulo.
`url()`	Define un trayecto con el `id` de un elemento.

Cálculo matemático

Función	Descripción
`calc()`	Realiza operaciones aritméticas.
`max()`	Obtén el valor más grande.
`min()`	Obtén el valor más pequeño.
`clamp()`	Ajusta un valor entre dos valores.
`round()`	Redondea un valor.
`mod()`	Obtén el módulo entre dos valores.
`rem()`	Obtén el residuo entre dos valores.
`sin()`	Calcula el seno.
`cos()`	Calcula el coseno.
`tan()`	Calcula la tangente.
`asin()`	Calcula la inversa del seno.
`acos()`	Calcula la inversa del coseno.
`atan()`	Calcula la inversa de al tangente.
`atan2()`	Calcula la arcotangente con 2 parámetros.
`pow()`	Calcula la potencia de un número.
`sqrt()`	Calcula la raíz cuadrada.
`hypot()`	Calcula la hipotenusa.
`log()`	Calcula el logaritmo de un número.
`exp()`	Calcula el valor exponencial de un número.
`abs()`	Obtén el valor absoluto de un número.
`sign()`	Determina el signo de un número.

Figuras geométricas

Función	Descripción
`inset()`	Define un rectángulo interior.
`circle()`	Define una figura circular.
`ellipse()`	Define una figura elíptica.
`polygon()`	Define una figura poligonal.
`path()`	Define una figura a partir de un trayecto SVG.
`rect()`	Define un rectángulo con distancias desde los bordes.
`xywh()`	Define un rectángulo con desplazamiento y tamaño.

Compatibilidad

Función	Descripción
`selector()`	Evalúa selectores.
`font-tech()`	Evalúa la tecnología de la fuente.
`font-format()`	Evalúa el formato de la fuente.