CSS-funktioner förklarade

62 of 62 rows


Storlek och matematik
	Resultatet av ett aritmetiskt uttryck, med blandade enheter.	width: calc(100% - 2rem);
	Det minsta av de givna värdena.	width: min(100%, 60ch);
	Det största av de givna värdena.	width: max(320px, 40vw);
	Ett värde begränsat mellan ett minimum, ett önskat värde och ett maximum.	font-size: clamp(1rem, 2vw, 1.5rem);
	Läser en miljövariabel som tillhandahålls av användaragenten.	padding: env(safe-area-inset-top);
	En storlek begränsad till innehållets inneboende bredd.	width: fit-content(200px);
	Avrundar ett värde till närmaste multipel av ett annat.	width: round(up, 133px, 50px);
	Den positiva resten av en division, alltid icke-negativ.	margin: mod(100px, 30px);
	Resten av en division, med tecknet från täljaren.	margin: rem(-100px, 30px);
	Det absoluta värdet.	translateX(abs(-10px));
	-1, 0 eller 1, beroende på värdets tecken.	padding: sign(-5px) * 10px;
Grid
	Ett storleksintervall för gridspår, mellan ett minimum och ett maximum.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Upprepar ett spårmönster ett antal gånger eller tills det är fyllt.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logik och villkor
	Väljer ett av två värden utifrån ett villkor.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Sant när en mediefråga matchar, för användning inuti if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Sant när webbläsaren stöder en deklaration, för användning inuti if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Sant när selektorn matchar, för användning inuti if().	font-weight: if(selector(:hover), 700, 400);
Anpassade egenskaper
	Värdet av en anpassad egenskap, med ett valfritt reservvärde.	color: var(--accent, #333);
Färg
	En färg från kanalerna rött, grönt och blått (och alfa).	color: rgb(59 130 246 / 0.8);
	En färg från nyans, mättnad och ljushet.	color: hsl(210 80% 50%);
	En färg i perceptuella OKLCH-rummet (jämn ljushet).	color: oklch(0.7 0.15 250);
	En blandning av två färger i en given färgrymd.	color: color-mix(in srgb, red 40%, blue);
	Alternativet från en lista som ger bäst kontrast mot en basfärg.	color: color-contrast(#fff vs #000, #777);
	En färg från nyans, vithet och svärta.	color: hwb(210 10% 20%);
	En färg i CIELAB-rummet (ljushet, a- och b-axlar).	color: lab(52% 40 59);
	En färg i CIELAB-rummet (ljushet, kroma, nyans).	color: lch(52% 49 24);
	En färg i valfri fördefinierad färgrymd, angiven med koordinater.	color: color(display-p3 1 0.4 0.2);
	Den första färgen i ljust läge, den andra i mörkt.	color: light-dark(#1a1a1a, #f5f5f5);
Gradienter och bilder
	En gradient längs en rak linje.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	En gradient som strålar ut från en punkt.	background: radial-gradient(circle, #fff, #000);
	En gradient som sveper runt en mittpunkt.	background: conic-gradient(red, yellow, red);
	Läser in en extern resurs: bild, typsnitt eller SVG.	background-image: url(hero.webp);
	Väljer den bästa bilden för enhetens upplösning.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Blandar två bilder med en given procentandel.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filter och former
	Oskärpa, ljusstyrka och mättnad tillämpade på elementet.	filter: blur(4px) brightness(1.1);
	En SVG-bana för clip-path eller rörelse.	clip-path: path('M10 10 H 90 V 90 Z');
	Läser värdet av ett attribut på elementet.	content: attr(data-label);
	Justerar elementets kontrast.	filter: contrast(1.4);
	Ritar en skugga som följer elementets alfaform.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Omvandlar elementet till gråskala.	filter: grayscale(100%);
	Inverterar elementets färger.	filter: invert(1);
	Tillämpar en sepiaton.	filter: sepia(0.6);
	Roterar nyansen i elementets färger.	filter: hue-rotate(90deg);
	Ställer in elementets opacitet via filter.	filter: opacity(0.5);
	En cirkulär form för clip-path eller shape-outside.	clip-path: circle(40% at 50% 50%);
	En elliptisk form för clip-path eller shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	En rektangulär form med rundade hörn för clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	En polygonform från en lista med punkter.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transform
	Flyttar elementet längs X- och Y-axeln.	transform: translate(10px, 20px);
	Roterar elementet runt sitt centrum.	transform: rotate(45deg);
	Skalar elementet längs X- och Y-axeln.	transform: scale(1.25);
	Skevar elementet längs X- och Y-axeln.	transform: skew(10deg, 0deg);
	En 2D-transform från sex matrisvärden.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Ställer in ett 3D-perspektivdjup för elementets barn.	transform: perspective(600px) rotateY(20deg);
Animering och räknare
	En easing-kurva från fyra kontrollpunkter.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	En easing som hoppar i lika stora steg.	animation-timing-function: steps(8, end);
	Det aktuella värdet på en CSS-räknare, som innehåll.	content: counter(chapter);
	Värdena på en räknare och alla dess förfäder, förenade av en sträng.	content: counters(item, ".");
	0 till 1 när ett värde fortskrider mellan en början och ett slut.	opacity: progress(scroll(), 0, 50vh);
	Ett slumptal från ett intervall, fast per element.	rotate: random(from -5deg to 5deg);
	Sinus av en vinkel, för calc-uttryck.	translateY(calc(1rem * sin(45deg)));
	Kosinus av en vinkel, för calc-uttryck.	translateX(calc(1rem * cos(45deg)));