Funciones CSS explicadas

62 of 62 rows


Tamaños y matemáticas
	El resultado de una expresión aritmética, con unidades mixtas.	width: calc(100% - 2rem);
	El menor de los valores dados.	width: min(100%, 60ch);
	El mayor de los valores dados.	width: max(320px, 40vw);
	Un valor limitado entre un mínimo, un preferido y un máximo.	font-size: clamp(1rem, 2vw, 1.5rem);
	Lee una variable de entorno proporcionada por el agente de usuario.	padding: env(safe-area-inset-top);
	Un tamaño limitado a la anchura intrínseca del contenido.	width: fit-content(200px);
	Redondea un valor al múltiplo más cercano de otro.	width: round(up, 133px, 50px);
	El resto positivo de una división, siempre no negativo.	margin: mod(100px, 30px);
	El resto de una división, conserva el signo del dividendo.	margin: rem(-100px, 30px);
	El valor absoluto.	translateX(abs(-10px));
	-1, 0 o 1, según el signo del valor.	padding: sign(-5px) * 10px;
Grid
	Un rango de tamaño para pistas de grid, entre un mínimo y un máximo.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Repite un patrón de pistas un número de veces o hasta rellenar.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Lógica y condiciones
	Elige uno de dos valores según una condición.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Verdadero cuando una media query coincide, para usar dentro de if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Verdadero cuando el navegador soporta una declaración, para usar dentro de if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Verdadero cuando el selector coincide, para usar dentro de if().	font-weight: if(selector(:hover), 700, 400);
Propiedades personalizadas
	El valor de una propiedad personalizada, con un valor de reserva opcional.	color: var(--accent, #333);
Color
	Un color a partir de los canales rojo, verde y azul (y alfa).	color: rgb(59 130 246 / 0.8);
	Un color a partir de tono, saturación y luminosidad.	color: hsl(210 80% 50%);
	Un color en el espacio perceptual OKLCH (luminosidad consistente).	color: oklch(0.7 0.15 250);
	Una mezcla de dos colores en un espacio de color dado.	color: color-mix(in srgb, red 40%, blue);
	La opción de una lista que contrasta mejor con un color base.	color: color-contrast(#fff vs #000, #777);
	Un color a partir de tono, blancura y negrura.	color: hwb(210 10% 20%);
	Un color en el espacio CIELAB (luminosidad, ejes a y b).	color: lab(52% 40 59);
	Un color en el espacio CIELAB (luminosidad, croma, tono).	color: lch(52% 49 24);
	Un color en cualquier espacio de color predefinido, por coordenadas.	color: color(display-p3 1 0.4 0.2);
	El primer color en esquema claro, el segundo en oscuro.	color: light-dark(#1a1a1a, #f5f5f5);
Degradados e imágenes
	Un degradado a lo largo de una línea recta entre paradas de color.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Un degradado que irradia hacia fuera desde un punto.	background: radial-gradient(circle, #fff, #000);
	Un degradado que barre alrededor de un punto central.	background: conic-gradient(red, yellow, red);
	Carga un recurso externo: imagen, fuente o SVG.	background-image: url(hero.webp);
	Elige la mejor imagen para la resolución del dispositivo.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Funde dos imágenes en un porcentaje dado.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtros y formas
	Filtros de píxeles usados dentro de la propiedad filter.	filter: blur(4px) brightness(1.1);
	Una cadena de trayectoria SVG, para dibujar un recorte o una forma.	clip-path: path('M10 10 H 90 V 90 Z');
	Lee un atributo HTML; uso limitado fuera de content.	content: attr(data-label);
	Ajusta el contraste del elemento.	filter: contrast(1.4);
	Pinta una sombra que sigue la forma alfa del elemento.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Convierte el elemento a escala de grises.	filter: grayscale(100%);
	Invierte los colores del elemento.	filter: invert(1);
	Aplica un tono sepia.	filter: sepia(0.6);
	Rota el tono de los colores del elemento.	filter: hue-rotate(90deg);
	Define la opacidad del elemento mediante filter.	filter: opacity(0.5);
	Una forma circular para clip-path o shape-outside.	clip-path: circle(40% at 50% 50%);
	Una forma elíptica para clip-path o shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Una forma rectangular redondeada para clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Una forma poligonal a partir de una lista de puntos.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformación
	Mueve el elemento a lo largo de X e Y.	transform: translate(10px, 20px);
	Rota el elemento alrededor de su centro.	transform: rotate(45deg);
	Escala el elemento a lo largo de X e Y.	transform: scale(1.25);
	Inclina el elemento a lo largo de X e Y.	transform: skew(10deg, 0deg);
	Una transformación 2D a partir de seis valores de matriz.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Define una profundidad de perspectiva 3D para los hijos del elemento.	transform: perspective(600px) rotateY(20deg);
Animación y contadores
	Una curva de easing a partir de cuatro puntos de control.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Un easing que avanza a saltos iguales.	animation-timing-function: steps(8, end);
	El valor actual de un contador CSS, como contenido.	content: counter(chapter);
	Los valores de un contador y de todos sus antecesores, unidos por una cadena.	content: counters(item, ".");
	De 0 a 1 según un valor progresa entre un inicio y un fin.	opacity: progress(scroll(), 0, 50vh);
	Un número aleatorio de un rango, fijo por elemento.	rotate: random(from -5deg to 5deg);
	El seno de un ángulo, para expresiones calc.	translateY(calc(1rem * sin(45deg)));
	El coseno de un ángulo, para expresiones calc.	translateX(calc(1rem * cos(45deg)));