CSS-Wertefunktionen

Syntax

selector {
  property: function([argument]? [, argument]!);
}

Die Wertesyntax beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (. Danach folgen das/die Argument(e), und die Funktion endet mit einer schließenden Klammer ).

Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber sie sind innerhalb der Klammern optional. In einigen funktionalen Notationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.

Transformationsfunktionen

Der <transform-function> CSS-Datentyp repräsentiert eine Erscheinungstransformation. Er wird als Wert der transform-Eigenschaft verwendet.

Übersetzungsfunktionen

translateX()

Verschiebt ein Element horizontal.

translateY()

Verschiebt ein Element vertikal.

translateZ()

Verschiebt ein Element entlang der z-Achse.

translate()

Verschiebt ein Element auf der 2D-Ebene.

translate3d()

Verschiebt ein Element im 3D-Raum.

Rotationsfunktionen

rotateX()

Dreht ein Element um die horizontale Achse.

rotateY()

Dreht ein Element um die vertikale Achse.

rotateZ()

Dreht ein Element um die z-Achse.

rotate()

Dreht ein Element um einen festen Punkt auf der 2D-Ebene.

rotate3d()

Dreht ein Element um eine feste Achse im 3D-Raum.

Skalierungsfunktionen

scaleX()

Skaliert ein Element horizontal nach oben oder unten.

scaleY()

Skaliert ein Element vertikal nach oben oder unten.

scaleZ()

Skaliert ein Element entlang der z-Achse nach oben oder unten.

scale()

Skaliert ein Element auf der 2D-Ebene nach oben oder unten.

scale3d()

Skaliert ein Element im 3D-Raum nach oben oder unten.

Schiefenfunktionen

skewX()

Schiefert ein Element in horizontaler Richtung.

skewY()

Schiefert ein Element in vertikaler Richtung.

skew()

Schiefert ein Element auf der 2D-Ebene.

Matrixfunktionen

matrix()

Beschreibt eine homogene 2D-Transformationsmatrix.

matrix3d()

Beschreibt eine 3D-Transformation als 4×4 homogene Matrix.

Perspektivenfunktionen

perspective()

Setzt den Abstand zwischen dem Benutzer und der z=0-Ebene.

Mathematikfunktionen

Die Mathematikfunktionen erlauben es, CSS-Zahlenwerte als mathematische Ausdrücke zu schreiben.

Jede der nachfolgenden Seiten enthält detaillierte Informationen über die Syntax einer Mathematikfunktion, Daten zur Browser-Kompatibilität, Beispiele und mehr. Für eine ganzheitliche Einführung in die CSS-Mathematikfunktionen siehe Verwendung von CSS-Mathematikfunktionen.

Grundlegende Arithmetik

calc()

Führt grundlegende arithmetische Berechnungen mit numerischen Werten durch.

calc-size()

Führen Sie Berechnungen mit intrinsischen Größenwerten wie auto, fit-content und max-content durch, die von der calc()-Funktion nicht unterstützt werden.

Vergleichsfunktionen

min()

Berechnet den kleinsten Wert aus einer Liste von Werten.

max()

Berechnet den größten Wert aus einer Liste von Werten.

clamp()

Berechnet den mittleren Wert eines Minimums, eines mittleren und eines Maximums.

Gestufte Wertefunktionen

round()

Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.

mod()

Berechnet einen Modulus (mit demselben Vorzeichen wie der Divisor), wenn eine Zahl durch eine andere geteilt wird.

progress()

Berechnet die Position eines Wertes zwischen zwei anderen Werten — einem Startwert und einem Endwert. Das Ergebnis wird als Zahl zwischen 0 und 1 ausgedrückt, die den Fortschritt zwischen Start- und Endwert darstellt.

rem()

Berechnet einen Restwert (mit demselben Vorzeichen wie der Dividend), wenn eine Zahl durch eine andere geteilt wird.

Trigonometrische Funktionen

sin()

Berechnet den trigonometrischen Sinus einer Zahl.

cos()

Berechnet den trigonometrischen Kosinus einer Zahl.

tan()

Berechnet den trigonometrischen Tangens einer Zahl.

asin()

Berechnet den trigonometrischen inversen Sinus einer Zahl.

acos()

Berechnet den trigonometrischen inversen Kosinus einer Zahl.

atan()

Berechnet den trigonometrischen inversen Tangens einer Zahl.

atan2()

Berechnet den trigonometrischen inversen Tangens von zwei Zahlen auf einer Ebene.

Exponentialfunktionen

pow()

Berechnet die Basis, die auf die Potenz einer Zahl erhöht wird.

sqrt()

Berechnet die Quadratwurzel einer Zahl.

hypot()

Berechnet die Quadratwurzel der Summe der Quadrate seiner Argumente.

log()

Berechnet den Logarithmus einer Zahl.

exp()

Berechnet e, erhöht auf die Potenz einer Zahl.

Funktionen im Zusammenhang mit dem Vorzeichen

abs()

Berechnet den absoluten Wert einer Zahl.

sign()

Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

Filterfunktionen

Der <filter-function> CSS-Datentyp stellt einen grafischen Effekt dar, der das Erscheinungsbild eines Eingabebilds verändern kann. Er wird in den filter und backdrop-filter Eigenschaften verwendet.

blur()

Erhöht die Weichzeichnung des Bildes.

brightness()

Aufhellen oder Abdunkeln eines Bildes.

contrast()

Erhöht oder verringert den Bildkontrast.

drop-shadow()

Fügt hinter einem Bild einen Schatten hinzu.

grayscale()

Konvertiert ein Bild in Graustufen.

hue-rotate()

Ändert den Gesamttönung eines Bildes.

invert()

Kehrt die Farben eines Bildes um.

opacity()

Fügt einem Bild Transparenz hinzu.

saturate()

Ändert die Gesamtsättigung eines Bildes.

sepia()

Erhöht den Sepia-Effekt eines Bildes.

Farbige Funktionen

Der <color> CSS-Datentyp spezifiziert verschiedene Farbrepräsentationen.

rgb()

Definiert eine gegebene Farbe gemäß ihren Rot-, Grün-, Blau- und Alpha-Komponenten (Transparenz).

hsl()

Definiert eine gegebene Farbe gemäß ihrem Farbton, Sättigung, Helligkeit und Alpha (Transparenz).

hwb()

Definiert eine gegebene Farbe gemäß ihrem Farbton, Weißanteil und Schwarzwert.

lch()

Definiert eine gegebene Farbe gemäß ihrer Helligkeit, Chroma und Farbton-Komponenten.

oklch()

Definiert eine gegebene Farbe gemäß ihrer Helligkeit, Chroma, Farbton und Alpha-Komponenten (Transparenz).

lab()

Definiert eine gegebene Farbe gemäß ihrer Helligkeit, a-Achsen-Abstand und b-Achsen-Abstand im Lab-Farbraum.

oklab()

Definiert eine gegebene Farbe gemäß ihrer Helligkeit, a-Achsen-Abstand, b-Achsen-Abstand im Lab-Farbraum und Alpha (Transparenz).

color()

Gibt einen bestimmten, angegebenen Farbraum an, anstatt des impliziten sRGB-Farbraums.

color-mix()

Mischt zwei Farbwerte in einem gegebenen Farbraum in einem bestimmten Verhältnis.

contrast-color()

Gibt eine Farbe mit maximalem Farbkontrast für eine gegebene Farbe zurück.

device-cmyk()

Definiert CMYK-Farben geräteabhängig.

light-dark()

Gibt eine von zwei bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.

dynamic-range-limit-mix()

Erstellt ein benutzerdefiniertes Maximum für die Leuchtkraft, das eine Mischung verschiedener dynamic-range-limit Schlüsselwörter in angegebenen Prozentsätzen ist.

Bildfunktionen

Der <image> CSS-Datentyp bietet eine grafische Darstellung von Bildern oder Farbverläufen.

Gradientenfunktionen

linear-gradient()

Lineare Gradienten färben die Übergänge entlang einer gedachten Linie stufenweise.

radial-gradient()

Radiale Gradienten färben die Übergänge stufenweise vom Mittelpunkt (Ursprung).

conic-gradient()

Kegelförmige Gradienten färben die Übergänge stufenweise um einen Kreis.

repeating-linear-gradient()

Ähnlich wie linear-gradient() und nimmt dieselben Argumente, aber es wiederholt die Farbstopps unbegrenzt in alle Richtungen, um das gesamte Behältnis zu füllen.

repeating-radial-gradient()

Ähnlich wie radial-gradient() und nimmt dieselben Argumente, aber es wiederholt die Farbstopps unbegrenzt in alle Richtungen, um das gesamte Behältnis zu füllen.

repeating-conic-gradient()

Ähnlich wie conic-gradient() und nimmt dieselben Argumente, aber es wiederholt die Farbstopps unbegrenzt in alle Richtungen, um das gesamte Behältnis zu füllen.

Bildfunktionen

image()

Definiert ein <image> ähnlich der <url>-Typ, jedoch mit zusätzlichen Funktionen wie der Festlegung der Bildrichtung und Ersatzbilder, falls das bevorzugte Bild nicht unterstützt wird.

image-set()

Wählt das geeignetste CSS-Bild aus einer gegebenen Menge, hauptsächlich für Bildschirme mit hoher Pixeldichte.

cross-fade()

Mischt zwei oder mehr Bilder mit einer festgelegten Transparenz.

element()

Definiert einen <image>-Wert, der aus einem beliebigen HTML-Element generiert wird.

paint()

Definiert einen <image>-Wert, der mit einem PaintWorklet generiert wird.

Zählerfunktionen

CSS-Zählerfunktionen werden allgemein mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall verwendet werden können, wo ein <string> unterstützt wird.

counter()

Gibt einen String zurück, der den aktuellen Wert des benannten Zählers darstellt, falls vorhanden.

counters()

Ermöglicht verschachtelte Zähler, indem ein verbundener String zurückgegeben wird, der die aktuellen Werte der benannten Zähler darstellt, falls vorhanden.

symbols()

Definiert die Zählerstile direkt als Wert einer Eigenschaft.

Formenfunktionen

Grundformen

Der <basic-shape> CSS-Datentyp stellt eine grafische Form dar. Er wird in den clip-path, offset-path, und shape-outside Eigenschaften verwendet.

circle()

Definiert eine Kreisform.

ellipse()

Definiert eine Ellipsenform.

inset()

Definiert eine eingezogene Rechteckform.

rect()

Definiert eine Rechteckform unter Verwendung der Abstände von den oberen und linken Rändern des Referenzrahmens.

xywh()

Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Rändern des Referenzrahmens sowie der Rechteckbreite und -höhe.

polygon()

Definiert eine Polygonform.

path()

Akzeptiert eine SVG-Pfad-Zeichenfolge, um eine Form zu zeichnen.

shape()

Akzeptiert eine durch Kommas getrennte Liste von Befehlen, die die zu zeichnende Form definieren.

Andere Formenfunktionen

ray()

Gültig mit offset-path; definiert das Liniensegment, dem ein animiertes Element folgen kann.

superellipse()

Definiert die Krümmung einer Ellipse; kann verwendet werden, um einen <corner-shape-value> zu spezifizieren, der zusammen mit corner-shape und seinen Bestandteil- und zugehörigen Eigenschaften verwendet wird.

Referenzfunktionen

Die folgenden Funktionen werden als Werte von Eigenschaften verwendet, um einen an anderer Stelle definierten Wert zu referenzieren:

attr()

Verwendet die auf dem HTML-Element definierten Attribute.

env()

Verwendet die vom User-Agent definierten Umgebungsvariablen.

if()

Setzt bedingt einen Eigenschaftswert, abhängig vom Ergebnis einer Stilabfrage, Medienabfrage, oder Feature-Abfrage.

url()

Verwendet eine Datei von der angegebenen URL.

var()

Verwendet den Wert der benutzerdefinierten Eigenschaft anstelle eines Teils eines Werts einer anderen Eigenschaft.

Rasterfunktionen

Die folgenden Funktionen werden verwendet, um ein CSS-Raster zu definieren:

fit-content()

Klemmt eine angegebene Größe auf eine verfügbare Größe gemäß der Formel min(maximale Größe, max(minimale Größe, Argument)).

minmax()

Definiert einen Größenbereich, der größer oder gleich min und kleiner oder gleich max ist.

repeat()

Stellt ein wiederholtes Fragment der Spur-Liste dar und ermöglicht eine große Anzahl von Spalten oder Reihen, die ein sich wiederholendes Muster aufweisen.

Schriftfunktionen

CSS-Schriftfunktionen werden mit der font-variant-alternates-Eigenschaft verwendet, um die Verwendung von alternativen Glyphen zu steuern.

stylistic()

Ermöglicht stilistische Alternativen für einzelne Zeichen. Das Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert salt, z. B. salt 2.

styleset()

Ermöglicht stilistische Alternativen für Zeichensätze. Das Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert ssXY, z. B. ss02.

character-variant()

Ermöglicht spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erzeugt jedoch keine kohärenten Glyphe für einen Zeichensatz; einzelne Zeichen haben unabhängige und nicht notwendigerweise kohärente Stile. Das Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert cvXY, z. B. cv02.

swash()

Ermöglicht Schwungbuchstaben als Zeichen. Das Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.

ornaments()

Ermöglicht Ornamente wie Fleurons und andere Zierzeichen. Das Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert ornm, wie ornm 2.

annotation()

Ermöglicht Anmerkungen wie umkreiste Ziffern oder invertierte Zeichen. Das Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert nalt, wie nalt 2.

Geschwindigkeitsanpassungsfunktionen

Der <easing-function> CSS-Datentyp repräsentiert eine mathematische Funktion. Er wird in Übergangs- und Animationseigenschaften verwendet:

linear()

Eine Geschwindigkeitsanpassungsfunktion, die linear zwischen den Punkten interpoliert.

cubic-bezier()

Eine Geschwindigkeitsanpassungsfunktion, die eine kubische Bézierkurve definiert.

steps()

Iteration an einer angegebenen Anzahl von Haltestellen entlang des Übergangs, wobei jede Haltestelle für gleiche Zeitabschnitte angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Werte unterschiedlicher animation-timeline-Eigenschaften verwendet:

scroll()

Setzt die animation-timeline eines Elements auf eine anonyme Scroll-Fortschrittszeitachse.

view()

Setzt die animation-timeline eines Elements auf eine anonyme Ansicht-Fortschrittszeitachse.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, um Anker-positionierte Elemente relativ zur Position und Größe ihrer zugehörigen Ankerelemente zu positionieren und zu dimensionieren.

anchor()

Gibt eine Länge relativ zur Position der Kanten eines Anker-positionierten Elements zurück.

anchor-size()

Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.

Baumzählerfunktionen

Die folgenden Funktionen geben einen Integer-Wert basierend auf dem DOM-Baum zurück, nicht wie die meisten CSS-Werte auf einem flachen Baum:

sibling-index()

Gibt einen Integer-Wert zurück, der die Position des ausgewählten Elements unter seinen Geschwistern widerspiegelt.

sibling-count()

Gibt einen Integer-Wert zurück, der die Gesamtanzahl der Geschwister, einschließlich des ausgewählten Elements, widerspiegelt.

Alphabetischer Index von Funktionen

• -moz-image-rect() Nicht standardisiert Veraltet
• abs()
• acos()
• anchor()
• anchor-size()
• asin()
• atan()
• atan2()
• attr()
• blur()
• brightness()
• calc()
• calc-size() Experimentell
• circle()
• clamp()
• color()
• color-mix()
• conic-gradient()
• contrast()
• contrast-color() Experimentell
• cos()
• counter()
• counters()
• cross-fade()
• cubic-bezier()
• device-cmyk()
• drop-shadow()
• dynamic-range-limit-mix() Experimentell
• element() Experimentell
• ellipse()
• env()
• exp()
• fit-content()
• grayscale()
• hsl()
• hue-rotate()
• hwb()
• hypot()
• if() Experimentell
• image()
• image-set()
• inset()
• invert()
• lab()
• layer()
• lch()
• light-dark()
• linear()
• linear-gradient()
• log()
• matrix()
• matrix3d()
• max()
• min()
• minmax()
• mod()
• oklab()
• oklch()
• opacity()
• paint()
• palette-mix()
• path()
• perspective()
• polygon()
• pow()
• progress() Experimentell
• radial-gradient()
• ray()
• rect()
• rem()
• repeat()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• rgb()
• rotate()
• rotate3d()
• rotatex()
• rotatey()
• rotatez()
• round()
• saturate()
• scale()
• scale3d()
• scalex()
• scaley()
• scalez()
• scroll()
• sepia()
• shape()
• sibling-count() Experimentell
• sibling-index() Experimentell
• sign()
• sin()
• skew()
• skewx()
• skewy()
• sqrt()
• steps()
• superellipse() Experimentell
• symbols()
• tan()
• translate()
• translate3d()
• translatex()
• translatey()
• translatez()
• type() Experimentell
• url_function()
• var()
• view()
• xywh()

Siehe auch

• CSS-Werte und Einheiten Modul
• Lernen: Werte und Einheiten