Funções CSS explicadas

62 of 62 rows


Tamanhos e matemática
	O resultado de uma expressão aritmética, com unidades mistas.	width: calc(100% - 2rem);
	O menor dos valores indicados.	width: min(100%, 60ch);
	O maior dos valores indicados.	width: max(320px, 40vw);
	Um valor limitado entre um mínimo, um preferido e um máximo.	font-size: clamp(1rem, 2vw, 1.5rem);
	Lê uma variável de ambiente fornecida pelo agente do utilizador.	padding: env(safe-area-inset-top);
	Um tamanho limitado à largura intrínseca do conteúdo.	width: fit-content(200px);
	Arredonda um valor ao múltiplo mais próximo de outro.	width: round(up, 133px, 50px);
	O resto positivo de uma divisão, sempre não negativo.	margin: mod(100px, 30px);
	O resto de uma divisão, com o sinal do dividendo.	margin: rem(-100px, 30px);
	O valor absoluto.	translateX(abs(-10px));
	-1, 0 ou 1, conforme o sinal do valor.	padding: sign(-5px) * 10px;
Grid
	Um intervalo de tamanho para faixas de grid, entre um mínimo e um máximo.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Repete um padrão de faixas um número de vezes ou até preencher.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Lógica e condições
	Escolhe um de dois valores com base numa condição.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Verdadeiro quando uma media query corresponde, para uso dentro de if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Verdadeiro quando o navegador suporta uma declaração, para uso dentro de if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Verdadeiro quando o seletor corresponde, para uso dentro de if().	font-weight: if(selector(:hover), 700, 400);
Propriedades personalizadas
	O valor de uma propriedade personalizada, com um valor de reserva opcional.	color: var(--accent, #333);
Cor
	Uma cor a partir dos canais vermelho, verde e azul (e alfa).	color: rgb(59 130 246 / 0.8);
	Uma cor a partir de matiz, saturação e luminosidade.	color: hsl(210 80% 50%);
	Uma cor no espaço perceptual OKLCH (luminosidade consistente).	color: oklch(0.7 0.15 250);
	Uma mistura de duas cores num dado espaço de cor.	color: color-mix(in srgb, red 40%, blue);
	A opção de uma lista que contrasta melhor com uma cor base.	color: color-contrast(#fff vs #000, #777);
	Uma cor a partir de matiz, brancura e negritura.	color: hwb(210 10% 20%);
	Uma cor no espaço CIELAB (luminosidade, eixos a e b).	color: lab(52% 40 59);
	Uma cor no espaço CIELAB (luminosidade, croma, matiz).	color: lch(52% 49 24);
	Uma cor em qualquer espaço de cor predefinido, por coordenadas.	color: color(display-p3 1 0.4 0.2);
	A primeira cor no esquema claro, a segunda no escuro.	color: light-dark(#1a1a1a, #f5f5f5);
Gradientes e imagens
	Um gradiente ao longo de uma linha.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Um gradiente que irradia de um ponto.	background: radial-gradient(circle, #fff, #000);
	Um gradiente que gira em torno de um centro.	background: conic-gradient(red, yellow, red);
	Carrega um recurso externo: imagem, fonte ou SVG.	background-image: url(hero.webp);
	Escolhe a melhor imagem para a resolução do dispositivo.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Mistura duas imagens numa percentagem dada.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtros e formas
	Desfoque, brilho e saturação aplicados ao elemento.	filter: blur(4px) brightness(1.1);
	Um trajeto SVG para clip-path ou motion.	clip-path: path('M10 10 H 90 V 90 Z');
	Lê o valor de um atributo do elemento.	content: attr(data-label);
	Ajusta o contraste do elemento.	filter: contrast(1.4);
	Pinta uma sombra que segue a forma alfa do elemento.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Converte o elemento para tons de cinzento.	filter: grayscale(100%);
	Inverte as cores do elemento.	filter: invert(1);
	Aplica um tom sépia.	filter: sepia(0.6);
	Roda o matiz das cores do elemento.	filter: hue-rotate(90deg);
	Define a opacidade do elemento via filter.	filter: opacity(0.5);
	Uma forma circular para clip-path ou shape-outside.	clip-path: circle(40% at 50% 50%);
	Uma forma elíptica para clip-path ou shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Uma forma retangular arredondada para clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Uma forma poligonal a partir de uma lista de pontos.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformação
	Move o elemento ao longo de X e Y.	transform: translate(10px, 20px);
	Roda o elemento em torno do centro.	transform: rotate(45deg);
	Escala o elemento ao longo de X e Y.	transform: scale(1.25);
	Inclina o elemento ao longo de X e Y.	transform: skew(10deg, 0deg);
	Uma transformação 2D a partir de seis valores de matriz.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Define a profundidade de perspetiva 3D para os filhos do elemento.	transform: perspective(600px) rotateY(20deg);
Animação e contadores
	Uma curva de easing a partir de quatro pontos de controlo.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Um easing que salta em passos iguais.	animation-timing-function: steps(8, end);
	O valor atual de um contador CSS, como conteúdo.	content: counter(chapter);
	Os valores de um contador e de todos os seus antecessores, unidos por uma cadeia.	content: counters(item, ".");
	De 0 a 1 à medida que um valor progride entre um início e um fim.	opacity: progress(scroll(), 0, 50vh);
	Um número aleatório de um intervalo, fixo por elemento.	rotate: random(from -5deg to 5deg);
	O seno de um ângulo, para expressões calc.	translateY(calc(1rem * sin(45deg)));
	O cosseno de um ângulo, para expressões calc.	translateX(calc(1rem * cos(45deg)));