Funciones

Podcast de CSS - 020: Funciones

Hasta ahora, en este curso aprendiste a conocer varias funciones de CSS. En el módulo grid, te presentamos minmax() y fit-content(), que te ayudan a ajustar el tamaño de los elementos. En el módulo color, te presentamos 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, veremos una descripción general de alto nivel, lo que te permite entender mejor dónde y cómo usarlas.

¿Qué es una función?

Una función es un fragmento de código independiente y con nombre que completa una tarea específica. La función recibe un nombre para que la puedas llamar dentro de tu código y puedas pasar datos a la función. Esto se conoce como pasar argumentos.

Muchas funciones de CSS son funciones puras, lo que significa que, si pasas los mismos argumentos a ellas, siempre te devolverán el mismo resultado. sin importar lo que suceda en el resto del código. A menudo, estas funciones se vuelven a calcular a medida que los valores cambian en el CSS similares a otros elementos en el lenguaje, como valores en cascada calculados como currentColor.

En CSS, solo puedes usar las funciones proporcionadas, en lugar de escribir el tuyo propio, pero las funciones pueden anidarse unas dentro de otra en algunos contextos, lo que les da 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 selectores funcionales en el módulo de seudoclases qué funciones detalladas, 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 de CSS.

Propiedades personalizadas y var()

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

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

Una propiedad personalizada es una variable que le permite asignar tokens a los valores en su código CSS. Las propiedades personalizadas también se ven afectadas por la cascada lo que significa que se pueden manipular o redefinir según el contexto. Las propiedades personalizadas deben tener un prefijo con dos guiones (--) y distinguen mayúsculas de minúsculas.

La var() toma un argumento requerido: la propiedad personalizada que intentas mostrar como valor En el fragmento anterior, se pasó --base-color como argumento a la función var(). Si se definió --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, En su lugar, se usará la declaración pasada, que en este caso de la muestra 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. Funciones como attr() y url() siguen una estructura similar a var(): Debes pasar uno o más argumentos y usarlos en el lado derecho de tu declaración de CSS.

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

La función attr() aquí Toma el contenido del atributo href del elemento <a>. y configúralo como el content del seudoelemento ::after. Si el valor del atributo href del elemento <a> fuera a cambiar, Esto se reflejará 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 has leído, te recomendamos que lo hagas.

Algunas de las funciones de color disponibles en CSS son las siguientes: rgb(), rgba(), hsl(), hsla(), hwb(), lab() y lch(). Todas estas tienen una forma similar en la que los argumentos de configuración se pasan y se devuelve 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.

calc()

La 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 combinar.

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

En este ejemplo, se usa la función calc() para ajustar el tamaño del ancho de un elemento. como el 100% del elemento superior que lo contiene, y, luego, quita 2rem del 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 min() muestra el valor calculado más pequeño de uno o más argumentos pasados. La max() hace lo contrario: obtener 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, el ancho debe ser el valor más pequeño entre 20vw (que es el 20% del ancho de la ventana de visualización) y 30rem. La altura debe ser el valor más alto entre 20vh (que es el 20% de la altura de la ventana de visualización) y 20rem.

clamp()

La 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. porque, independientemente del nivel de zoom, una unidad vw será del mismo tamaño. Multiplicación por una unidad rem, según el tamaño de fuente raíz, proporciona la función clamp() con un punto de cálculo relativo.

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

Formas

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

Hay funciones de forma que se pueden usar con estas dos propiedades. Formas simples como circle(): ellipse() y inset() tomar argumentos de configuración para ajustar su tamaño. Formas más complejas, como polygon() 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 que se puedan dibujar formas muy complejas en una herramienta gráfica. como Illustrator o Inkscape y, luego, de copiar en su CSS.

Transformaciones

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

Rotación

Para rotar un elemento, usa el rotate() que rotará un elemento sobre su eje central. También puedes usar 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 rotate3d() usa 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);
}

Escala

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

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

También, como con la función rotate, hay un Función scale3d(). Esto es similar a scale(), pero toma tres argumentos: el factor de escala X, Y y Z.

Traducir

La translate() mueven un elemento mientras mantiene su posición en el flujo del documento. Aceptan los 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 ambos argumentos están definidos.

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

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

Sesgo

Para sesgar un elemento, puedes usar el skew() funciones 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. afectará al eje X e Y. También puedes usar skewX y skewY para modificar cada eje de forma independiente.

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

Perspectiva

Por último, puedes usar el 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.

Este ejemplo de David Desandro, de su útil artículo, 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 ayudan a animar los elementos, aplicarles gradientes y usar filtros gráficos para manipular su aspecto Para que este módulo sea lo más conciso posible, que se abordan en los módulos vinculados. Todas tienen una estructura similar a la de las funciones demostradas en este módulo.

Verifica tus conocimientos

Pon a prueba tu conocimiento sobre las funciones