Funkcje CSS wyjaśnione

62 of 62 rows


Rozmiary i matematyka
	Wynik wyrażenia arytmetycznego, z mieszanymi jednostkami.	width: calc(100% - 2rem);
	Najmniejsza z podanych wartości.	width: min(100%, 60ch);
	Największa z podanych wartości.	width: max(320px, 40vw);
	Wartość ograniczona między minimum, wartością preferowaną i maksimum.	font-size: clamp(1rem, 2vw, 1.5rem);
	Odczytuje zmienną środowiskową dostarczaną przez agenta użytkownika.	padding: env(safe-area-inset-top);
	Rozmiar ograniczony do wewnętrznej szerokości treści.	width: fit-content(200px);
	Zaokrągla jedną wartość do najbliższej wielokrotności drugiej.	width: round(up, 133px, 50px);
	Dodatnia reszta z dzielenia, zawsze nieujemna.	margin: mod(100px, 30px);
	Reszta z dzielenia, zachowuje znak dzielnej.	margin: rem(-100px, 30px);
	Wartość bezwzględna.	translateX(abs(-10px));
	-1, 0 lub 1, zgodnie ze znakiem wartości.	padding: sign(-5px) * 10px;
Grid
	Zakres rozmiarów dla ścieżek gridu, między minimum i maksimum.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Powtarza wzorzec ścieżki określoną liczbę razy lub do wypełnienia.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logika i warunki
	Wybiera jedną z dwóch wartości na podstawie warunku.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Prawda, gdy pasuje media query, do użycia wewnątrz if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Prawda, gdy przeglądarka obsługuje deklarację, do użycia wewnątrz if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Prawda, gdy pasuje selektor, do użycia wewnątrz if().	font-weight: if(selector(:hover), 700, 400);
Custom properties
	Wartość custom property, z opcjonalną wartością zapasową.	color: var(--accent, #333);
Kolor
	Kolor z kanałów czerwieni, zieleni i błękitu (oraz alfy).	color: rgb(59 130 246 / 0.8);
	Kolor z odcienia, nasycenia i jasności.	color: hsl(210 80% 50%);
	Kolor w percepcyjnej przestrzeni OKLCH (spójna jasność).	color: oklch(0.7 0.15 250);
	Mieszanka dwóch kolorów w danej przestrzeni barw.	color: color-mix(in srgb, red 40%, blue);
	Opcja z listy o najlepszym kontraście względem koloru bazowego.	color: color-contrast(#fff vs #000, #777);
	Kolor z odcienia, bieli i czerni.	color: hwb(210 10% 20%);
	Kolor w przestrzeni CIELAB (jasność, osie a i b).	color: lab(52% 40 59);
	Kolor w przestrzeni CIELAB (jasność, chroma, odcień).	color: lch(52% 49 24);
	Kolor w dowolnej predefiniowanej przestrzeni barw, według współrzędnych.	color: color(display-p3 1 0.4 0.2);
	Pierwszy kolor w jasnym schemacie, drugi w ciemnym.	color: light-dark(#1a1a1a, #f5f5f5);
Gradienty i obrazy
	Gradient wzdłuż prostej między punktami koloru.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Gradient rozchodzący się promieniście od punktu.	background: radial-gradient(circle, #fff, #000);
	Gradient obracający się wokół punktu centralnego.	background: conic-gradient(red, yellow, red);
	Wczytuje zasób zewnętrzny: obraz, font lub SVG.	background-image: url(hero.webp);
	Wybiera najlepszy obraz dla rozdzielczości urządzenia.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Miesza dwa obrazy w zadanym procencie.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtry i kształty
	Filtry pikselowe używane wewnątrz właściwości filter.	filter: blur(4px) brightness(1.1);
	Ciąg znaków ścieżki SVG, używany do narysowania przycięcia lub kształtu.	clip-path: path('M10 10 H 90 V 90 Z');
	Odczytuje atrybut HTML; ograniczone użycie poza content.	content: attr(data-label);
	Dostosowuje kontrast elementu.	filter: contrast(1.4);
	Rysuje cień podążający za kształtem alfa elementu.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Przekształca element w odcienie szarości.	filter: grayscale(100%);
	Odwraca kolory elementu.	filter: invert(1);
	Nakłada odcień sepii.	filter: sepia(0.6);
	Obraca odcień kolorów elementu.	filter: hue-rotate(90deg);
	Ustawia krycie elementu poprzez filter.	filter: opacity(0.5);
	Kształt koła dla clip-path lub shape-outside.	clip-path: circle(40% at 50% 50%);
	Kształt elipsy dla clip-path lub shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Kształt zaokrąglonego prostokąta dla clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Kształt wielokąta z listy punktów.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformacje
	Przesuwa element wzdłuż X i Y.	transform: translate(10px, 20px);
	Obraca element wokół jego środka.	transform: rotate(45deg);
	Skaluje element wzdłuż X i Y.	transform: scale(1.25);
	Pochyla element wzdłuż X i Y.	transform: skew(10deg, 0deg);
	Jedna transformacja 2D z sześciu wartości macierzy.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Ustawia głębokość perspektywy 3D dla dzieci elementu.	transform: perspective(600px) rotateY(20deg);
Animacja i liczniki
	Krzywa easingu z czterech punktów kontrolnych.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Easing skaczący w równych krokach.	animation-timing-function: steps(8, end);
	Bieżąca wartość licznika CSS, jako content.	content: counter(chapter);
	Wartości licznika i wszystkich jego przodków, połączone ciągiem znaków.	content: counters(item, ".");
	Od 0 do 1, gdy wartość posuwa się między początkiem a końcem.	opacity: progress(scroll(), 0, 50vh);
	Liczba losowa z zakresu, stała dla danego elementu.	rotate: random(from -5deg to 5deg);
	Sinus kąta, do wyrażeń calc.	translateY(calc(1rem * sin(45deg)));
	Cosinus kąta, do wyrażeń calc.	translateX(calc(1rem * cos(45deg)));