Funcții CSS explicate

62 of 62 rows


Dimensiuni și matematică
	Rezultatul unei expresii aritmetice, cu unități mixte.	width: calc(100% - 2rem);
	Cea mai mică dintre valorile date.	width: min(100%, 60ch);
	Cea mai mare dintre valorile date.	width: max(320px, 40vw);
	O valoare limitată între un minim, una preferată și un maxim.	font-size: clamp(1rem, 2vw, 1.5rem);
	Citește o variabilă de mediu furnizată de agentul utilizatorului.	padding: env(safe-area-inset-top);
	O dimensiune limitată la lățimea intrinsecă a conținutului.	width: fit-content(200px);
	Rotunjește o valoare la cel mai apropiat multiplu al alteia.	width: round(up, 133px, 50px);
	Restul pozitiv al unei împărțiri, mereu nenegativ.	margin: mod(100px, 30px);
	Restul unei împărțiri, păstrează semnul deîmpărțitului.	margin: rem(-100px, 30px);
	Valoarea absolută.	translateX(abs(-10px));
	-1, 0 sau 1, în funcție de semnul valorii.	padding: sign(-5px) * 10px;
Grid
	Un interval de dimensiuni pentru piste de grid, între un minim și un maxim.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Repetă un tipar de piste de un anumit număr de ori sau până la umplere.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logică și condiții
	Alege una dintre două valori pe baza unei condiții.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Adevărat când un media query se potrivește, pentru uz în if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Adevărat când browserul suportă o declarație, pentru uz în if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Adevărat când selectorul se potrivește, pentru uz în if().	font-weight: if(selector(:hover), 700, 400);
Proprietăți personalizate
	Valoarea unei proprietăți personalizate, cu o valoare de rezervă opțională.	color: var(--accent, #333);
Culoare
	O culoare din canalele roșu, verde și albastru (și alfa).	color: rgb(59 130 246 / 0.8);
	O culoare din nuanță, saturație și luminozitate.	color: hsl(210 80% 50%);
	O culoare în spațiul perceptual OKLCH (luminozitate consistentă).	color: oklch(0.7 0.15 250);
	Un amestec din două culori într-un anumit spațiu de culoare.	color: color-mix(in srgb, red 40%, blue);
	Opțiunea dintr-o listă care contrastează cel mai bine cu o culoare de bază.	color: color-contrast(#fff vs #000, #777);
	O culoare din nuanță, grad de alb și grad de negru.	color: hwb(210 10% 20%);
	O culoare în spațiul CIELAB (luminozitate, axele a și b).	color: lab(52% 40 59);
	O culoare în spațiul CIELAB (luminozitate, cromă, nuanță).	color: lch(52% 49 24);
	O culoare în orice spațiu de culoare predefinit, prin coordonate.	color: color(display-p3 1 0.4 0.2);
	Prima culoare în schema deschisă, a doua în cea închisă.	color: light-dark(#1a1a1a, #f5f5f5);
Gradiente și imagini
	Un gradient de-a lungul unei linii drepte între opriri de culoare.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Un gradient care radiază spre exterior dintr-un punct.	background: radial-gradient(circle, #fff, #000);
	Un gradient care se rotește în jurul unui punct central.	background: conic-gradient(red, yellow, red);
	Încarcă o resursă externă: imagine, font sau SVG.	background-image: url(hero.webp);
	Alege cea mai bună imagine pentru rezoluția dispozitivului.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Amestecă două imagini într-un procent dat.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtre și forme
	Filtre de pixeli folosite în proprietatea filter.	filter: blur(4px) brightness(1.1);
	Un șir de traiectorie SVG, folosit pentru a desena un clip sau o formă.	clip-path: path('M10 10 H 90 V 90 Z');
	Citește un atribut HTML; utilizare limitată în afara lui content.	content: attr(data-label);
	Ajustează contrastul elementului.	filter: contrast(1.4);
	Pictează o umbră care urmează forma alfa a elementului.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Convertește elementul în tonuri de gri.	filter: grayscale(100%);
	Inversează culorile elementului.	filter: invert(1);
	Aplică o tentă sepia.	filter: sepia(0.6);
	Rotește nuanța culorilor elementului.	filter: hue-rotate(90deg);
	Stabilește opacitatea elementului prin filter.	filter: opacity(0.5);
	O formă circulară pentru clip-path sau shape-outside.	clip-path: circle(40% at 50% 50%);
	O formă eliptică pentru clip-path sau shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	O formă dreptunghiulară cu colțuri rotunjite pentru clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	O formă poligonală dintr-o listă de puncte.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformare
	Mută elementul de-a lungul axelor X și Y.	transform: translate(10px, 20px);
	Rotește elementul în jurul centrului său.	transform: rotate(45deg);
	Scalează elementul de-a lungul axelor X și Y.	transform: scale(1.25);
	Înclină elementul de-a lungul axelor X și Y.	transform: skew(10deg, 0deg);
	O transformare 2D din șase valori de matrice.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Stabilește o adâncime de perspectivă 3D pentru copiii elementului.	transform: perspective(600px) rotateY(20deg);
Animație și contoare
	O curbă de easing din patru puncte de control.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Un easing care sare în pași egali.	animation-timing-function: steps(8, end);
	Valoarea curentă a unui contor CSS, ca și conținut.	content: counter(chapter);
	Valorile unui contor și ale tuturor strămoșilor săi, unite printr-un șir.	content: counters(item, ".");
	De la 0 la 1 pe măsură ce o valoare progresează între un început și un sfârșit.	opacity: progress(scroll(), 0, 50vh);
	Un număr aleatoriu dintr-un interval, fixat per element.	rotate: random(from -5deg to 5deg);
	Sinusul unui unghi, pentru expresii calc.	translateY(calc(1rem * sin(45deg)));
	Cosinusul unui unghi, pentru expresii calc.	translateX(calc(1rem * cos(45deg)));