CSS-Funktionen erklärt

62 of 62 rows


Größen und Mathematik
	Das Ergebnis eines arithmetischen Ausdrucks, mit gemischten Einheiten.	width: calc(100% - 2rem);
	Der kleinste der angegebenen Werte.	width: min(100%, 60ch);
	Der größte der angegebenen Werte.	width: max(320px, 40vw);
	Ein Wert, begrenzt zwischen einem Minimum, einem bevorzugten Wert und einem Maximum.	font-size: clamp(1rem, 2vw, 1.5rem);
	Liest eine Umgebungsvariable, die der User-Agent bereitstellt.	padding: env(safe-area-inset-top);
	Eine Größe, begrenzt auf die intrinsische Breite des Inhalts.	width: fit-content(200px);
	Rundet einen Wert auf das nächstliegende Vielfache eines anderen.	width: round(up, 133px, 50px);
	Der positive Rest einer Division, immer nicht-negativ.	margin: mod(100px, 30px);
	Der Rest einer Division, behält das Vorzeichen des Dividenden.	margin: rem(-100px, 30px);
	Der absolute Wert.	translateX(abs(-10px));
	-1, 0 oder 1, entsprechend dem Vorzeichen des Werts.	padding: sign(-5px) * 10px;
Grid
	Ein Größenbereich für Grid-Tracks, zwischen einem Minimum und einem Maximum.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Wiederholt ein Track-Muster mehrmals oder bis zur Füllung.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logik und Bedingungen
	Wählt einen von zwei Werten anhand einer Bedingung.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Wahr, wenn eine Media Query zutrifft, zur Verwendung in if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Wahr, wenn der Browser eine Deklaration unterstützt, zur Verwendung in if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Wahr, wenn der Selektor zutrifft, zur Verwendung in if().	font-weight: if(selector(:hover), 700, 400);
Custom Properties
	Der Wert einer Custom Property, mit optionalem Fallback.	color: var(--accent, #333);
Farbe
	Eine Farbe aus den Kanälen Rot, Grün und Blau (sowie Alpha).	color: rgb(59 130 246 / 0.8);
	Eine Farbe aus Farbwinkel, Sättigung und Helligkeit.	color: hsl(210 80% 50%);
	Eine Farbe im perzeptuellen OKLCH-Raum (gleichmäßige Helligkeit).	color: oklch(0.7 0.15 250);
	Eine Mischung aus zwei Farben in einem gegebenen Farbraum.	color: color-mix(in srgb, red 40%, blue);
	Die Option aus einer Liste, die den besten Kontrast zu einer Basisfarbe bietet.	color: color-contrast(#fff vs #000, #777);
	Eine Farbe aus Farbwinkel, Weißanteil und Schwarzanteil.	color: hwb(210 10% 20%);
	Eine Farbe im CIELAB-Raum (Helligkeit, a- und b-Achsen).	color: lab(52% 40 59);
	Eine Farbe im CIELAB-Raum (Helligkeit, Chroma, Farbwinkel).	color: lch(52% 49 24);
	Eine Farbe in jedem vordefinierten Farbraum, nach Koordinaten.	color: color(display-p3 1 0.4 0.2);
	Die erste Farbe im hellen Schema, die zweite im dunklen.	color: light-dark(#1a1a1a, #f5f5f5);
Farbverläufe und Bilder
	Ein Farbverlauf entlang einer geraden Linie zwischen Farbstopps.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Ein Farbverlauf, der von einem Punkt nach außen strahlt.	background: radial-gradient(circle, #fff, #000);
	Ein Farbverlauf, der um einen Mittelpunkt kreist.	background: conic-gradient(red, yellow, red);
	Lädt eine externe Ressource: Bild, Schrift oder SVG.	background-image: url(hero.webp);
	Wählt das beste Bild für die Auflösung des Geräts.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Blendet zwei Bilder mit einem gegebenen Prozentsatz.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filter und Formen
	Pixelfilter, verwendet innerhalb der Eigenschaft filter.	filter: blur(4px) brightness(1.1);
	Ein SVG-Pfad-String, zum Zeichnen eines Clips oder einer Form.	clip-path: path('M10 10 H 90 V 90 Z');
	Liest ein HTML-Attribut; außerhalb von content eingeschränkt nutzbar.	content: attr(data-label);
	Passt den Kontrast des Elements an.	filter: contrast(1.4);
	Zeichnet einen Schatten, der der Alpha-Form des Elements folgt.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Wandelt das Element in Graustufen um.	filter: grayscale(100%);
	Kehrt die Farben des Elements um.	filter: invert(1);
	Wendet einen Sepiaton an.	filter: sepia(0.6);
	Dreht den Farbwinkel der Farben des Elements.	filter: hue-rotate(90deg);
	Setzt die Deckkraft des Elements über filter.	filter: opacity(0.5);
	Eine Kreisform für clip-path oder shape-outside.	clip-path: circle(40% at 50% 50%);
	Eine Ellipsenform für clip-path oder shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Eine abgerundete Rechteckform für clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Eine Polygonform aus einer Liste von Punkten.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformation
	Verschiebt das Element entlang von X und Y.	transform: translate(10px, 20px);
	Dreht das Element um seinen Mittelpunkt.	transform: rotate(45deg);
	Skaliert das Element entlang von X und Y.	transform: scale(1.25);
	Neigt das Element entlang von X und Y.	transform: skew(10deg, 0deg);
	Eine 2D-Transformation aus sechs Matrixwerten.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Setzt eine 3D-Perspektiventiefe für die Kinder des Elements.	transform: perspective(600px) rotateY(20deg);
Animation und Zähler
	Eine Easing-Kurve aus vier Kontrollpunkten.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Ein Easing, das in gleichen Schritten springt.	animation-timing-function: steps(8, end);
	Der aktuelle Wert eines CSS-Zählers, als Inhalt.	content: counter(chapter);
	Die Werte eines Zählers und aller seiner Vorfahren, durch einen String verbunden.	content: counters(item, ".");
	0 bis 1, während ein Wert zwischen einem Anfang und einem Ende fortschreitet.	opacity: progress(scroll(), 0, 50vh);
	Eine Zufallszahl aus einem Bereich, pro Element fixiert.	rotate: random(from -5deg to 5deg);
	Der Sinus eines Winkels, für calc-Ausdrücke.	translateY(calc(1rem * sin(45deg)));
	Der Kosinus eines Winkels, für calc-Ausdrücke.	translateX(calc(1rem * cos(45deg)));