Funzioni CSS spiegate

62 of 62 rows


Dimensioni e matematica
	Il risultato di un'espressione aritmetica, con unità miste.	width: calc(100% - 2rem);
	Il più piccolo dei valori indicati.	width: min(100%, 60ch);
	Il più grande dei valori indicati.	width: max(320px, 40vw);
	Un valore limitato tra un minimo, un preferito e un massimo.	font-size: clamp(1rem, 2vw, 1.5rem);
	Legge una variabile d'ambiente fornita dallo user agent.	padding: env(safe-area-inset-top);
	Una dimensione limitata alla larghezza intrinseca del contenuto.	width: fit-content(200px);
	Arrotonda un valore al multiplo più vicino di un altro.	width: round(up, 133px, 50px);
	Il resto positivo di una divisione, sempre non negativo.	margin: mod(100px, 30px);
	Il resto di una divisione, con il segno del dividendo.	margin: rem(-100px, 30px);
	Il valore assoluto.	translateX(abs(-10px));
	-1, 0 o 1, secondo il segno del valore.	padding: sign(-5px) * 10px;
Grid
	Un intervallo di dimensione per le tracce della griglia, tra un minimo e un massimo.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Ripete un pattern di tracce un numero di volte o fino a riempire lo spazio.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logica e condizioni
	Sceglie uno di due valori in base a una condizione.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Vero quando una media query corrisponde, da usare dentro if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Vero quando il browser supporta una dichiarazione, da usare dentro if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Vero quando il selettore corrisponde, da usare dentro if().	font-weight: if(selector(:hover), 700, 400);
Proprietà personalizzate
	Il valore di una proprietà personalizzata, con un fallback opzionale.	color: var(--accent, #333);
Colore
	Un colore dai canali rosso, verde e blu (e alfa).	color: rgb(59 130 246 / 0.8);
	Un colore da tonalità, saturazione e luminosità.	color: hsl(210 80% 50%);
	Un colore nello spazio percettivo OKLCH (luminosità coerente).	color: oklch(0.7 0.15 250);
	Una miscela di due colori in un dato spazio colore.	color: color-mix(in srgb, red 40%, blue);
	L'opzione di una lista che contrasta meglio con un colore base.	color: color-contrast(#fff vs #000, #777);
	Un colore da tonalità, bianchezza e nerezza.	color: hwb(210 10% 20%);
	Un colore nello spazio CIELAB (luminosità, assi a e b).	color: lab(52% 40 59);
	Un colore nello spazio CIELAB (luminosità, croma, tonalità).	color: lch(52% 49 24);
	Un colore in qualsiasi spazio colore predefinito, per coordinate.	color: color(display-p3 1 0.4 0.2);
	Il primo colore nel tema chiaro, il secondo nel tema scuro.	color: light-dark(#1a1a1a, #f5f5f5);
Sfumature e immagini
	Una sfumatura lungo una linea retta tra fermate colore.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Una sfumatura che si irradia verso l'esterno da un punto.	background: radial-gradient(circle, #fff, #000);
	Una sfumatura che ruota attorno a un punto centrale.	background: conic-gradient(red, yellow, red);
	Carica una risorsa esterna: immagine, font o SVG.	background-image: url(hero.webp);
	Sceglie l'immagine migliore per la risoluzione del dispositivo.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Fonde due immagini a una data percentuale.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtri e forme
	Filtri a livello di pixel, usati dentro la proprietà filter.	filter: blur(4px) brightness(1.1);
	Una stringa di percorso SVG, usata per disegnare un clip o una forma.	clip-path: path('M10 10 H 90 V 90 Z');
	Legge un attributo HTML; uso limitato fuori da content.	content: attr(data-label);
	Regola il contrasto dell'elemento.	filter: contrast(1.4);
	Dipinge un'ombra che segue la forma alfa dell'elemento.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Converte l'elemento in scala di grigi.	filter: grayscale(100%);
	Inverte i colori dell'elemento.	filter: invert(1);
	Applica una tonalità seppia.	filter: sepia(0.6);
	Ruota la tonalità dei colori dell'elemento.	filter: hue-rotate(90deg);
	Imposta l'opacità dell'elemento tramite filter.	filter: opacity(0.5);
	Una forma circolare per clip-path o shape-outside.	clip-path: circle(40% at 50% 50%);
	Una forma ellittica per clip-path o shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Una forma rettangolare arrotondata per clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Una forma poligonale da una lista di punti.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Trasformazione
	Sposta l'elemento lungo X e Y.	transform: translate(10px, 20px);
	Ruota l'elemento attorno al suo centro.	transform: rotate(45deg);
	Scala l'elemento lungo X e Y.	transform: scale(1.25);
	Inclina l'elemento lungo X e Y.	transform: skew(10deg, 0deg);
	Una singola trasformazione 2D da sei valori di matrice.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Imposta una profondità prospettica 3D per i figli dell'elemento.	transform: perspective(600px) rotateY(20deg);
Animazione e contatori
	Una curva di easing da quattro punti di controllo.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Un easing che avanza a salti in passi uguali.	animation-timing-function: steps(8, end);
	Il valore attuale di un contatore CSS, come contenuto.	content: counter(chapter);
	I valori di un contatore e di tutti i suoi antenati, uniti da una stringa.	content: counters(item, ".");
	Da 0 a 1 man mano che un valore avanza tra un inizio e una fine.	opacity: progress(scroll(), 0, 50vh);
	Un numero casuale da un intervallo, fisso per elemento.	rotate: random(from -5deg to 5deg);
	Il seno di un angolo, per espressioni calc.	translateY(calc(1rem * sin(45deg)));
	Il coseno di un angolo, per espressioni calc.	translateX(calc(1rem * cos(45deg)));