CSS-funktioner forklaret

62 of 62 rows


Størrelse og matematik
	Resultatet af et aritmetisk udtryk med blandede enheder.	width: calc(100% - 2rem);
	Den mindste af de givne værdier.	width: min(100%, 60ch);
	Den største af de givne værdier.	width: max(320px, 40vw);
	En værdi afgrænset mellem et minimum, en foretrukken værdi og et maximum.	font-size: clamp(1rem, 2vw, 1.5rem);
	Læser en miljøvariabel, som brugeragenten leverer.	padding: env(safe-area-inset-top);
	En størrelse afgrænset til indholdets naturlige bredde.	width: fit-content(200px);
	Afrunder en værdi til det nærmeste multiplum af en anden.	width: round(up, 133px, 50px);
	Den positive rest af en division, altid ikke-negativ.	margin: mod(100px, 30px);
	Resten af en division med fortegnet fra dividenden.	margin: rem(-100px, 30px);
	Den absolutte værdi.	translateX(abs(-10px));
	-1, 0 eller 1 afhængigt af værdiens fortegn.	padding: sign(-5px) * 10px;
Grid
	Et størrelsesinterval til grid-spor, mellem et minimum og et maximum.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Gentager et spormønster et antal gange eller indtil udfyldt.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logik og betingelser
	Vælger én af to værdier ud fra en betingelse.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Sand, når en medieforespørgsel matcher, til brug i if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Sand, når browseren understøtter en deklaration, til brug i if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Sand, når selektoren matcher, til brug i if().	font-weight: if(selector(:hover), 700, 400);
Brugerdefinerede egenskaber
	Værdien af en brugerdefineret egenskab med en valgfri fallback.	color: var(--accent, #333);
Farve
	En farve fra kanalerne rød, grøn og blå (og alfa).	color: rgb(59 130 246 / 0.8);
	En farve fra farvetone, mætning og lysstyrke.	color: hsl(210 80% 50%);
	En farve i det perceptuelle OKLCH-rum (ensartet lysstyrke).	color: oklch(0.7 0.15 250);
	En blanding af to farver i et givet farverum.	color: color-mix(in srgb, red 40%, blue);
	Valgmuligheden fra en liste, der kontrasterer bedst mod en basisfarve.	color: color-contrast(#fff vs #000, #777);
	En farve fra farvetone, hvidhed og sorthed.	color: hwb(210 10% 20%);
	En farve i CIELAB-rummet (lysstyrke, a- og b-akser).	color: lab(52% 40 59);
	En farve i CIELAB-rummet (lysstyrke, kroma, farvetone).	color: lch(52% 49 24);
	En farve i et hvilket som helst foruddefineret farverum, angivet med koordinater.	color: color(display-p3 1 0.4 0.2);
	Den første farve i lyst tema, den anden i mørkt.	color: light-dark(#1a1a1a, #f5f5f5);
Gradienter og billeder
	En gradient langs en lige linje.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	En gradient, der stråler ud fra et punkt.	background: radial-gradient(circle, #fff, #000);
	En gradient, der drejer rundt om et midtpunkt.	background: conic-gradient(red, yellow, red);
	Indlæser en ekstern ressource: billede, skrifttype eller SVG.	background-image: url(hero.webp);
	Vælger det bedste billede til enhedens opløsning.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Blander to billeder med en given procentdel.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtre og former
	Sløring, lysstyrke og mætning anvendt på elementet.	filter: blur(4px) brightness(1.1);
	En SVG-path til clip-path eller bevægelse.	clip-path: path('M10 10 H 90 V 90 Z');
	Læser værdien af et attribut på elementet.	content: attr(data-label);
	Justerer elementets kontrast.	filter: contrast(1.4);
	Tegner en skygge, der følger elementets alfaform.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Konverterer elementet til gråtoner.	filter: grayscale(100%);
	Inverterer elementets farver.	filter: invert(1);
	Anvender en sepiatone.	filter: sepia(0.6);
	Roterer farvetonen i elementets farver.	filter: hue-rotate(90deg);
	Angiver elementets opacitet via filter.	filter: opacity(0.5);
	En cirkulær form til clip-path eller shape-outside.	clip-path: circle(40% at 50% 50%);
	En elliptisk form til clip-path eller shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	En rektangulær form med runde hjørner til clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	En polygonform ud fra en liste af punkter.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformation
	Flytter elementet langs X og Y.	transform: translate(10px, 20px);
	Roterer elementet om dets centrum.	transform: rotate(45deg);
	Skalerer elementet langs X og Y.	transform: scale(1.25);
	Skævvrider elementet langs X og Y.	transform: skew(10deg, 0deg);
	En 2D-transformation ud fra seks matrixværdier.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Angiver en 3D-perspektivdybde for elementets børn.	transform: perspective(600px) rotateY(20deg);
Animation og tællere
	En easing-kurve ud fra fire kontrolpunkter.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	En easing, der hopper i ens trin.	animation-timing-function: steps(8, end);
	Den aktuelle værdi af en CSS-tæller, som indhold.	content: counter(chapter);
	Værdierne af en tæller og alle dens forfædre, samlet med en streng.	content: counters(item, ".");
	0 til 1, efterhånden som en værdi skrider frem mellem en start og en slutning.	opacity: progress(scroll(), 0, 50vh);
	Et tilfældigt tal fra et interval, fast pr. element.	rotate: random(from -5deg to 5deg);
	Sinus til en vinkel, til calc-udtryk.	translateY(calc(1rem * sin(45deg)));
	Cosinus til en vinkel, til calc-uttryk.	translateX(calc(1rem * cos(45deg)));