CSS-funktiot selitettynä

62 of 62 rows


Koot ja matematiikka
	Aritmeettisen lausekkeen tulos sekoitetuilla yksiköillä.	width: calc(100% - 2rem);
	Pienin annetuista arvoista.	width: min(100%, 60ch);
	Suurin annetuista arvoista.	width: max(320px, 40vw);
	Arvo, joka on rajattu minimin, toivotun ja maksimin väliin.	font-size: clamp(1rem, 2vw, 1.5rem);
	Lukee käyttäjäagentin tarjoaman ympäristömuuttujan.	padding: env(safe-area-inset-top);
	Koko, joka on rajattu sisällön luonnolliseen leveyteen.	width: fit-content(200px);
	Pyöristää arvon lähimpään toisen arvon kerrannaiseen.	width: round(up, 133px, 50px);
	Jaon positiivinen jakojäännös, aina ei-negatiivinen.	margin: mod(100px, 30px);
	Jaon jakojäännös, säilyttää jaettavan merkin.	margin: rem(-100px, 30px);
	Itseisarvo.	translateX(abs(-10px));
	-1, 0 tai 1 arvon merkin mukaan.	padding: sign(-5px) * 10px;
Grid
	Kokoväli grid-radoille minimin ja maksimin välille.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Toistaa radan kaavan määrätyn kerran tai täyttöön asti.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logiikka ja ehdot
	Valitsee yhden kahdesta arvosta ehdon perusteella.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Tosi, kun mediakysely täsmää, käytettäväksi if():n sisällä.	padding: if(media(width > 40rem), 2rem, 1rem);
	Tosi, kun selain tukee määrittelyä, käytettäväksi if():n sisällä.	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Tosi, kun valitsin täsmää, käytettäväksi if():n sisällä.	font-weight: if(selector(:hover), 700, 400);
Mukautetut ominaisuudet
	Mukautetun ominaisuuden arvo valinnaisella fallback-arvolla.	color: var(--accent, #333);
Väri
	Väri punaisen, vihreän ja sinisen kanavista (ja alfa).	color: rgb(59 130 246 / 0.8);
	Väri sävyn, kylläisyyden ja vaaleuden perusteella.	color: hsl(210 80% 50%);
	Väri havaintoperusteisessa OKLCH-avaruudessa (yhdenmukainen vaaleus).	color: oklch(0.7 0.15 250);
	Kahden värin sekoitus annetussa väriavaruudessa.	color: color-mix(in srgb, red 40%, blue);
	Listan vaihtoehto, joka kontrastoi parhaiten perusväriin.	color: color-contrast(#fff vs #000, #777);
	Väri sävyn, valkoisuuden ja mustuuden perusteella.	color: hwb(210 10% 20%);
	Väri CIELAB-avaruudessa (vaaleus, a- ja b-akselit).	color: lab(52% 40 59);
	Väri CIELAB-avaruudessa (vaaleus, kroma, sävy).	color: lch(52% 49 24);
	Väri missä tahansa ennalta määritetyssä väriavaruudessa koordinaattien mukaan.	color: color(display-p3 1 0.4 0.2);
	Ensimmäinen väri vaaleassa teemassa, toinen tummassa.	color: light-dark(#1a1a1a, #f5f5f5);
Liukuvärit ja kuvat
	Liukuväri suoran viivan varrella väripysähdysten välissä.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Liukuväri, joka säteilee ulospäin pisteestä.	background: radial-gradient(circle, #fff, #000);
	Liukuväri, joka kiertyy keskipisteen ympäri.	background: conic-gradient(red, yellow, red);
	Lataa ulkoisen resurssin: kuvan, fontin tai SVG:n.	background-image: url(hero.webp);
	Valitsee parhaan kuvan laitteen resoluutiolle.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Sekoittaa kaksi kuvaa annetulla prosenttiosuudella.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Suodattimet ja muodot
	Pikselisuodattimet filter-ominaisuuden sisällä käytettäviksi.	filter: blur(4px) brightness(1.1);
	SVG-polun merkkijono leikkauksen tai muodon piirtämiseen.	clip-path: path('M10 10 H 90 V 90 Z');
	Lukee HTML-attribuutin; rajoitettu käyttö contentin ulkopuolella.	content: attr(data-label);
	Säätää elementin kontrastia.	filter: contrast(1.4);
	Maalaa varjon, joka seuraa elementin alfamuotoa.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Muuntaa elementin harmaasävyiksi.	filter: grayscale(100%);
	Kääntää elementin värit.	filter: invert(1);
	Lisää sepiävärityksen.	filter: sepia(0.6);
	Kiertää elementin värien sävyä.	filter: hue-rotate(90deg);
	Asettaa elementin läpinäkyvyyden filterin kautta.	filter: opacity(0.5);
	Ympyrämuoto clip-pathille tai shape-outsidelle.	clip-path: circle(40% at 50% 50%);
	Ellipsimuoto clip-pathille tai shape-outsidelle.	clip-path: ellipse(50% 35% at 50% 50%);
	Pyöristetty suorakulmiomuoto clip-pathille.	clip-path: inset(10px 10px 10px 10px round 8px);
	Monikulmiomuoto pisteiden luettelosta.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Muunnos
	Siirtää elementiä X- ja Y-akselien suunnissa.	transform: translate(10px, 20px);
	Kiertää elementtiä sen keskipisteen ympäri.	transform: rotate(45deg);
	Skaalaa elementtiä X- ja Y-akselien suunnissa.	transform: scale(1.25);
	Vinouttaa elementtiä X- ja Y-akselien suunnissa.	transform: skew(10deg, 0deg);
	Yksi 2D-muunnos kuudesta matriisiarvosta.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Asettaa 3D-perspektiivin syvyyden elementin lapsille.	transform: perspective(600px) rotateY(20deg);
Animaatio ja laskurit
	Pehmennyskäyrä neljästä ohjauspisteestä.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Pehmennys, joka etenee yhtä suurin askelin.	animation-timing-function: steps(8, end);
	CSS-laskurin nykyinen arvo sisällöksi.	content: counter(chapter);
	Laskurin ja kaikkien sen esi-isien arvot merkkijonolla yhdistettynä.	content: counters(item, ".");
	0:sta 1:een arvon edetessä alun ja lopun välillä.	opacity: progress(scroll(), 0, 50vh);
	Satunnaisluku väliltä, kiinteä per elementti.	rotate: random(from -5deg to 5deg);
	Kulman sini calc-lausekkeita varten.	translateY(calc(1rem * sin(45deg)));
	Kulman kosini calc-lausekkeita varten.	translateX(calc(1rem * cos(45deg)));