Funkce CSSExplained

62 of 62 rows

Funkce↕	Co vrací↕	Příklad↕
Velikosti a matematika
⤢calc()	Výsledek aritmetického výrazu se smíšenými jednotkami.	width: calc(100% - 2rem);
⤢min()	Nejmenší ze zadaných hodnot.	width: min(100%, 60ch);
⤢max()	Největší ze zadaných hodnot.	width: max(320px, 40vw);
⤢clamp()	Hodnota omezená mezi minimem, preferovanou hodnotou a maximem.	font-size: clamp(1rem, 2vw, 1.5rem);
⤢env()	Čte proměnnou prostředí poskytnutou uživatelským agentem.	padding: env(safe-area-inset-top);
⤢fit-content()	Velikost omezená na přirozenou šířku obsahu.	width: fit-content(200px);
⤢round()	Zaokrouhlí hodnotu na nejbližší násobek jiné hodnoty.	width: round(up, 133px, 50px);
⤢mod()	Kladný zbytek po dělení, vždy nezáporný.	margin: mod(100px, 30px);
⤢rem()	Zbytek po dělení, se znaménkem dividenda.	margin: rem(-100px, 30px);
⤢abs()	Absolutní hodnota.	translateX(abs(-10px));
⤢sign()	-1, 0 nebo 1 podle znaménka hodnoty.	padding: sign(-5px) * 10px;
Grid
⤢minmax()	Rozsah velikosti pro sloupce a řádky mřížky, mezi minimem a maximem.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
⤢repeat()	Opakuje vzor mřížky určitý početkrát nebo do vyplnění.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logika a podmínky
⤢if()	Vybere jednu ze dvou hodnot na základě podmínky.	font-size: if(media(width > 600px), 1.25rem, 1rem);
⤢media()	Pravda, když mediální dotaz odpovídá; pro použití v if().	padding: if(media(width > 40rem), 2rem, 1rem);
⤢supports()	Pravda, když prohlížeč podporuje deklaraci; pro použití v if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
⤢selector()	Pravda, když selektor odpovídá; pro použití v if().	font-weight: if(selector(:hover), 700, 400);
Vlastní vlastnosti
⤢var()	Hodnota vlastní vlastnosti s volitelnou náhradní hodnotou.	color: var(--accent, #333);
Barva
⤢rgb() / rgba()	Barva z kanálů červené, zelené a modré (a alfy).	color: rgb(59 130 246 / 0.8);
⤢hsl() / hsla()	Barva z odstínu, sytosti a světlosti.	color: hsl(210 80% 50%);
⤢oklch()	Barva v percepčním prostoru OKLCH (konzistentní světlost).	color: oklch(0.7 0.15 250);
⤢color-mix()	Směs dvou barev v daném barevném prostoru.	color: color-mix(in srgb, red 40%, blue);
⤢color-contrast()	Možnost ze seznamu, která nejlépe kontrastuje se základní barvou.	color: color-contrast(#fff vs #000, #777);
⤢hwb()	Barva z odstínu, bělosti a černosti.	color: hwb(210 10% 20%);
⤢lab()	Barva v prostoru CIELAB (světlost, osy a a b).	color: lab(52% 40 59);
⤢lch()	Barva v prostoru CIELAB (světlost, chroma, odstín).	color: lch(52% 49 24);
⤢color()	Barva v kterémkoli předdefinovaném barevném prostoru podle souřadnic.	color: color(display-p3 1 0.4 0.2);
⤢light-dark()	První barva ve světlém schématu, druhá v tmavém.	color: light-dark(#1a1a1a, #f5f5f5);
Přechody a obrázky
⤢linear-gradient()	Přechod podél přímky mezi barevnými zarážkami.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
⤢radial-gradient()	Přechod vyzařující z jednoho bodu.	background: radial-gradient(circle, #fff, #000);
⤢conic-gradient()	Přechod rotující kolem středového bodu.	background: conic-gradient(red, yellow, red);
⤢url()	Načte externí zdroj: obrázek, font nebo SVG.	background-image: url(hero.webp);
⤢image-set()	Vybere nejlepší obrázek pro rozlišení zařízení.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
⤢cross-fade()	Smíchá dva obrázky se zadaným procentem.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtry a tvary
⤢blur() / brightness() / saturate()	Rozostření, jas a sytost aplikované na prvek.	filter: blur(4px) brightness(1.1);
⤢path()	SVG cesta pro clip-path nebo animaci pohybu.	clip-path: path('M10 10 H 90 V 90 Z');
⤢attr()	Načte hodnotu atributu prvku.	content: attr(data-label);
⤢contrast()	Upraví kontrast prvku.	filter: contrast(1.4);
⤢drop-shadow()	Vykreslí stín sledující alfa tvar prvku.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
⤢grayscale()	Převede prvek na odstíny šedi.	filter: grayscale(100%);
⤢invert()	Invertuje barvy prvku.	filter: invert(1);
⤢sepia()	Aplikuje sépiový tón.	filter: sepia(0.6);
⤢hue-rotate()	Otočí odstín barev prvku.	filter: hue-rotate(90deg);
⤢opacity()	Nastaví neprůhlednost prvku přes filter.	filter: opacity(0.5);
⤢circle()	Kruhový tvar pro clip-path nebo shape-outside.	clip-path: circle(40% at 50% 50%);
⤢ellipse()	Elipsový tvar pro clip-path nebo shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
⤢inset()	Obdélníkový tvar s zaoblenými rohy pro clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
⤢polygon()	Mnohoúhelníkový tvar ze seznamu bodů.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformace
⤢translate()	Posune prvek podél os X a Y.	transform: translate(10px, 20px);
⤢rotate()	Otočí prvek kolem jeho středu.	transform: rotate(45deg);
⤢scale()	Změní měřítko prvku podél os X a Y.	transform: scale(1.25);
⤢skew()	Zkreslí prvek podél os X a Y.	transform: skew(10deg, 0deg);
⤢matrix()	2D transformace ze šesti maticových hodnot.	transform: matrix(1, 0, 0.5, 1, 10, 0);
⤢perspective()	Nastaví hloubku 3D perspektivy pro potomky prvku.	transform: perspective(600px) rotateY(20deg);
Animace a počítadla
⤢cubic-bezier()	Easingová křivka ze čtyř řídicích bodů.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
⤢steps()	Easing skákající po stejných krocích.	animation-timing-function: steps(8, end);
⤢counter()	Aktuální hodnota CSS počítadla jako obsah.	content: counter(chapter);
⤢counters()	Hodnoty počítadla a všech jeho předků spojené řetězcem.	content: counters(item, ".");
⤢progress()	0 až 1 podle toho, jak hodnota postupuje mezi začátkem a koncem.	opacity: progress(scroll(), 0, 50vh);
⤢random()	Náhodné číslo z rozsahu, pevné pro každý prvek.	rotate: random(from -5deg to 5deg);
⤢sin()	Sinus úhlu pro výrazy v calc.	translateY(calc(1rem * sin(45deg)));
⤢cos()	Kosinus úhlu pro výrazy v calc.	translateX(calc(1rem * cos(45deg)));