CSS-functies uitgelegd

62 of 62 rows


Afmetingen en wiskunde
	Het resultaat van een rekenkundige expressie, met gemengde eenheden.	width: calc(100% - 2rem);
	De kleinste van de opgegeven waarden.	width: min(100%, 60ch);
	De grootste van de opgegeven waarden.	width: max(320px, 40vw);
	Een waarde begrensd tussen een minimum, een voorkeurswaarde en een maximum.	font-size: clamp(1rem, 2vw, 1.5rem);
	Leest een omgevingsvariabele die door de user agent wordt geleverd.	padding: env(safe-area-inset-top);
	Een afmeting begrensd tot de intrinsieke breedte van de inhoud.	width: fit-content(200px);
	Rondt een waarde af op het dichtstbijzijnde veelvoud van een andere.	width: round(up, 133px, 50px);
	De positieve rest van een deling, altijd niet-negatief.	margin: mod(100px, 30px);
	De rest van een deling, met het teken van het deeltal.	margin: rem(-100px, 30px);
	De absolute waarde.	translateX(abs(-10px));
	-1, 0 of 1, overeenkomstig het teken van de waarde.	padding: sign(-5px) * 10px;
Grid
	Een afmetingsbereik voor gridtracks, tussen een minimum en een maximum.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Herhaalt een trackpatroon een opgegeven aantal keren of tot de ruimte gevuld is.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logica en condities
	Kiest één van twee waarden op basis van een voorwaarde.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Waar wanneer een media query overeenkomt, voor gebruik binnen if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Waar wanneer de browser een declaratie ondersteunt, voor gebruik binnen if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Waar wanneer de selector overeenkomt, voor gebruik binnen if().	font-weight: if(selector(:hover), 700, 400);
Custom properties
	De waarde van een custom property, met een optionele fallback.	color: var(--accent, #333);
Kleur
	Een kleur uit de kanalen rood, groen en blauw (en alfa).	color: rgb(59 130 246 / 0.8);
	Een kleur uit tint, verzadiging en lichtheid.	color: hsl(210 80% 50%);
	Een kleur in de perceptuele OKLCH-ruimte (consistente lichtheid).	color: oklch(0.7 0.15 250);
	Een mengsel van twee kleuren in een gegeven kleurruimte.	color: color-mix(in srgb, red 40%, blue);
	De optie uit een lijst die het best contrasteert met een basiskleur.	color: color-contrast(#fff vs #000, #777);
	Een kleur uit tint, witheid en zwartheid.	color: hwb(210 10% 20%);
	Een kleur in de CIELAB-ruimte (lichtheid, a- en b-assen).	color: lab(52% 40 59);
	Een kleur in de CIELAB-ruimte (lichtheid, chroma, tint).	color: lch(52% 49 24);
	Een kleur in een vooraf gedefinieerde kleurruimte, op basis van coördinaten.	color: color(display-p3 1 0.4 0.2);
	De eerste kleur in het lichte schema, de tweede in het donkere.	color: light-dark(#1a1a1a, #f5f5f5);
Gradients en afbeeldingen
	Een gradient langs een rechte lijn tussen kleurstops.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Een gradient die van een punt naar buiten straalt.	background: radial-gradient(circle, #fff, #000);
	Een gradient die rond een middelpunt draait.	background: conic-gradient(red, yellow, red);
	Laadt een externe bron: afbeelding, font of SVG.	background-image: url(hero.webp);
	Kiest de beste afbeelding voor de resolutie van het apparaat.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Mengt twee afbeeldingen op een gegeven percentage.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filters en vormen
	Pixelfilters, gebruikt binnen de eigenschap filter.	filter: blur(4px) brightness(1.1);
	Een SVG-padstring, gebruikt om een clip of vorm te tekenen.	clip-path: path('M10 10 H 90 V 90 Z');
	Leest een HTML-attribuut; beperkt bruikbaar buiten content.	content: attr(data-label);
	Past het contrast van het element aan.	filter: contrast(1.4);
	Schildert een schaduw die de alfavorm van het element volgt.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Zet het element om naar grijstinten.	filter: grayscale(100%);
	Inverteert de kleuren van het element.	filter: invert(1);
	Past een sepiatint toe.	filter: sepia(0.6);
	Draait de tint van de kleuren van het element.	filter: hue-rotate(90deg);
	Stelt de dekking van het element in via filter.	filter: opacity(0.5);
	Een cirkelvorm voor clip-path of shape-outside.	clip-path: circle(40% at 50% 50%);
	Een ellipsvorm voor clip-path of shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Een vorm van een afgeronde rechthoek voor clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Een polygoonvorm uit een lijst punten.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformaties
	Verplaatst het element langs X en Y.	transform: translate(10px, 20px);
	Draait het element rond zijn middelpunt.	transform: rotate(45deg);
	Schaalt het element langs X en Y.	transform: scale(1.25);
	Trekt het element scheef langs X en Y.	transform: skew(10deg, 0deg);
	Eén 2D-transformatie uit zes matrixwaarden.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Stelt een 3D-perspectiefdiepte in voor de kinderen van het element.	transform: perspective(600px) rotateY(20deg);
Animatie en tellers
	Een easingcurve uit vier controlepunten.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Een easing die in gelijke stappen springt.	animation-timing-function: steps(8, end);
	De huidige waarde van een CSS-teller, als content.	content: counter(chapter);
	De waarden van een teller en al zijn voorouders, verbonden door een string.	content: counters(item, ".");
	0 tot 1 naarmate een waarde vordert tussen een begin en een einde.	opacity: progress(scroll(), 0, 50vh);
	Een willekeurig getal uit een bereik, vast per element.	rotate: random(from -5deg to 5deg);
	De sinus van een hoek, voor calc-expressies.	translateY(calc(1rem * sin(45deg)));
	De cosinus van een hoek, voor calc-expressies.	translateX(calc(1rem * cos(45deg)));