CSS függvények elmagyarázva

62 of 62 rows


Méretek és matematika
	Egy aritmetikai kifejezés eredménye, vegyes egységekkel.	width: calc(100% - 2rem);
	A megadott értékek közül a legkisebb.	width: min(100%, 60ch);
	A megadott értékek közül a legnagyobb.	width: max(320px, 40vw);
	Egy érték, amely egy minimum, egy előnyben részesített és egy maximum közé van szorítva.	font-size: clamp(1rem, 2vw, 1.5rem);
	Beolvas egy, a felhasználói ügynök által biztosított környezeti változót.	padding: env(safe-area-inset-top);
	A tartalom intrinszik szélességére korlátozott méret.	width: fit-content(200px);
	Egy értéket a másik érték legközelebbi többszörösére kerekít.	width: round(up, 133px, 50px);
	Az osztás pozitív maradéka, mindig nem negatív.	margin: mod(100px, 30px);
	Az osztás maradéka, megtartja az osztandó előjelét.	margin: rem(-100px, 30px);
	Az abszolút érték.	translateX(abs(-10px));
	-1, 0 vagy 1, az érték előjelének megfelelően.	padding: sign(-5px) * 10px;
Grid
	Mérettartomány grid sávokhoz, egy minimum és egy maximum között.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Egy sávmintát ismétel megadott alkalommal vagy a feltöltésig.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logika és feltételek
	Egy feltétel alapján két érték közül választ.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Igaz, ha egy media query illeszkedik, if()-en belül használható.	padding: if(media(width > 40rem), 2rem, 1rem);
	Igaz, ha a böngésző támogat egy deklarációt, if()-en belül használható.	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Igaz, ha a szelektor illeszkedik, if()-en belül használható.	font-weight: if(selector(:hover), 700, 400);
Egyéni tulajdonságok
	Egy egyéni tulajdonság értéke, opcionális tartalékértékkel.	color: var(--accent, #333);
Szín
	Szín a vörös, zöld és kék (plusz alfa) csatornákból.	color: rgb(59 130 246 / 0.8);
	Szín árnyalatból, telítettségből és világosságból.	color: hsl(210 80% 50%);
	Szín a perceptuális OKLCH térségben (konzisztens világosság).	color: oklch(0.7 0.15 250);
	Két szín keveréke egy megadott színtérben.	color: color-mix(in srgb, red 40%, blue);
	Az a listabeli opció, amely a legjobb kontrasztot adja egy alapszínnel.	color: color-contrast(#fff vs #000, #777);
	Szín árnyalatból, fehérségből és feketeségből.	color: hwb(210 10% 20%);
	Szín a CIELAB térben (világosság, a és b tengelyek).	color: lab(52% 40 59);
	Szín a CIELAB térben (világosság, kroma, árnyalat).	color: lch(52% 49 24);
	Szín bármely előre definiált színtérben, koordináták szerint.	color: color(display-p3 1 0.4 0.2);
	Az első szín világos sémában, a második sötét sémában.	color: light-dark(#1a1a1a, #f5f5f5);
Gradiensek és képek
	Gradiens egy egyenes mentén, színmegállók között.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Gradiens, amely egy pontból kifelé sugároz.	background: radial-gradient(circle, #fff, #000);
	Gradiens, amely egy középpont körül körbejár.	background: conic-gradient(red, yellow, red);
	Külső erőforrást tölt be: kép, betűtípus vagy SVG.	background-image: url(hero.webp);
	A legjobb képet választja az eszköz felbontásához.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Két képet kever egy megadott százalékban.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Szűrők és alakzatok
	Képpontszűrők, a filter tulajdonságon belül használva.	filter: blur(4px) brightness(1.1);
	SVG útvonalkarakterlánc, klip vagy alakzat rajzolásához.	clip-path: path('M10 10 H 90 V 90 Z');
	Egy HTML attribútumot olvas; a content-en kívül korlátozott a használata.	content: attr(data-label);
	Beállítja az elem kontrasztját.	filter: contrast(1.4);
	Árnyékot fest, amely követi az elem alfa-alakját.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Szürkeárnyalatossá alakítja az elemet.	filter: grayscale(100%);
	Megfordítja az elem színeit.	filter: invert(1);
	Szépia tónust alkalmaz.	filter: sepia(0.6);
	Elforgatja az elem színeinek árnyalatát.	filter: hue-rotate(90deg);
	Beállítja az elem átlátszatlanságát a filteren keresztül.	filter: opacity(0.5);
	Kör alakzat clip-path vagy shape-outside számára.	clip-path: circle(40% at 50% 50%);
	Ellipszis alakzat clip-path vagy shape-outside számára.	clip-path: ellipse(50% 35% at 50% 50%);
	Lekerekített sarkú téglalap alakzat clip-path számára.	clip-path: inset(10px 10px 10px 10px round 8px);
	Sokszög alakzat egy pontokból álló listából.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transzformáció
	Az elemet X és Y mentén mozgatja.	transform: translate(10px, 20px);
	Az elemet a középpontja körül forgatja.	transform: rotate(45deg);
	Az elemet X és Y mentén skálázza.	transform: scale(1.25);
	Az elemet X és Y mentén ferdíti.	transform: skew(10deg, 0deg);
	Egyetlen 2D transzformáció hat mátrixértékből.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	3D perspektíva-mélységet állít be az elem gyermekei számára.	transform: perspective(600px) rotateY(20deg);
Animáció és számlálók
	Easing görbe négy vezérlőpontból.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Easing, amely egyenlő lépésekben ugrik.	animation-timing-function: steps(8, end);
	Egy CSS számláló jelenlegi értéke, tartalomként.	content: counter(chapter);
	Egy számláló és az összes őse értékei, karakterlánccal összekötve.	content: counters(item, ".");
	0-tól 1-ig, ahogy egy érték elhalad egy kezdet és egy vég között.	opacity: progress(scroll(), 0, 50vh);
	Véletlenszám egy tartományból, elemenként rögzítve.	rotate: random(from -5deg to 5deg);
	Egy szög szinusza, calc kifejezésekhez.	translateY(calc(1rem * sin(45deg)));
	Egy szög koszinusza, calc kifejezésekhez.	translateX(calc(1rem * cos(45deg)));