CSS-Wertfunktionen

Syntax

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

Die Wertsprache beginnt mit dem Namen der Funktion gefolgt von einer linken Klammer (. Darauf folgen das/die Argument(e), und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

Funktionen können mehrere Argumente enthalten, die ähnlich zu CSS-Eigenschaftswerten formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern optional. In einigen funktionalen Notationen werden mehrere Argumente durch Kommata getrennt, während andere Leerzeichen verwenden.

Transformationsfunktionen

Der <transform-function> CSS Datentyp repräsentiert Transformationen des Aussehens. Er wird als Wert der transform-Eigenschaft verwendet.

Translate-Funktionen

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 hoch oder runter.

scaleY()

Skaliert ein Element vertikal hoch oder runter.

scaleZ()

Skaliert ein Element entlang der z-Achse hoch oder runter.

scale()

Skaliert ein Element auf der 2D-Ebene hoch oder runter.

scale3d()

Skaliert ein Element im 3D-Raum hoch oder runter.

Verzerrungsfunktionen

skewX()

Verzerrt ein Element in horizontaler Richtung.

skewY()

Verzerrt ein Element in vertikaler Richtung.

skew()

Verzerrt ein Element auf der 2D-Ebene.

Matrixfunktionen

matrix()

Beschreibt eine homogene 2D-Transformationsmatrix.

matrix3d()

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

Perspektivenfunktionen

perspective()

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

Mathematische Funktionen

Die mathematischen Funktionen erlauben CSS-numerische Werte als mathematische Ausdrücke zu schreiben.

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

Grundrechenarten

calc()

Führt grundlegende arithmetische Berechnungen mit numerischen Werten durch.

calc-size()

Führt Berechnungen auf 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 einer Liste von Werten.

max()

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

clamp()

Berechnet den zentralen Wert aus einem Minimum, einem Zentralwert und einem Maximum.

Wertnehmen-Funktionen

round()

Berechnet eine gerundete Zahl anhand einer Rundungsstrategie.

mod()

Berechnet einen Modulus (mit dem gleichen Vorzeichen wie der Teiler), 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 Rest (mit dem gleichen Vorzeichen wie der Dividende), 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 Arkussinus einer Zahl.

acos()

Berechnet den trigonometrischen Arkuskosinus einer Zahl.

atan()

Berechnet den trigonometrischen Arkustangens einer Zahl.

atan2()

Berechnet den trigonometrischen Arkustangens von zwei Zahlen in einer Ebene.

Exponentialfunktionen

pow()

Berechnet die Basis hoch einer Zahl.

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 hoch einer Zahl.

Vorzeichenbezogene Funktionen

abs()

Berechnet den Absolutwert einer Zahl.

sign()

Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

Filterfunktionen

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

blur()

Erhöht den Gaußschen Unschärfe-Effekt des Bildes.

brightness()

Hellt ein Bild auf oder verdunkelt es.

contrast()

Erhöht oder verringert den Kontrast des Bildes.

drop-shadow()

Fügt hinter ein Bild einen Schlagschatten ein.

grayscale()

Wandelt ein Bild in Graustufen um.

hue-rotate()

Ändert den Gesamte Farbton 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 Sepiaeffekt eines Bildes.

Farbfunktions

Der <color> CSS Datentyp spezifiziert verschiedene Farbdarstellungen.

rgb()

Definiert eine bestimmte Farbe gemäß ihren roten, grünen, blauen und alpha (Transparenz) Komponenten.

hsl()

Definiert eine bestimmte Farbe gemäß ihrem Farbton, Sättigung, Helligkeit und alpha (Transparenz) Komponenten.

hwb()

Definiert eine bestimmte Farbe gemäß ihrem Farbton, Reinheitsgrad und Schwärzungskomponenten.

lch()

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

oklch()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma, Farbton und alpha (Transparenz) Komponenten.

lab()

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

oklab()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, a-Achsen-Distanz, b-Achsen-Distanz im Lab-Farbraum und alpha (Transparenz).

color()

Spezifiziert einen bestimmten, angegebenen Farbraum anstelle des impliziten sRGB-Farbraums.

color-mix()

Mischt zwei Farbwerte in einem gegebenen Farbraum mit einem bestimmten Anteil.

contrast-color()

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

device-cmyk()

Definiert CMYK-Farben auf eine geräteabhängige Weise.

light-dark()

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

dynamic-range-limit-mix()

Erstellt ein benutzerdefiniertes maximales Helligkeitslimit, das aus einer Mischung verschiedener dynamic-range-limit Schlüsselwörter in festgelegten Prozentsätzen besteht.

Bildfunktionen

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

Verlaufsfunktionen

linear-gradient()

Lineare Verläufe wechseln Farben entlang einer imaginären Linie progressiv.

radial-gradient()

Radiale Verläufe wechseln Farben progressiv von einem Mittelpunkt (Ursprung).

conic-gradient()

Kegelförmige Verläufe wechseln Farben progressiv um einen Kreis.

repeating-linear-gradient()

Ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente an, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

repeating-radial-gradient()

Ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente an, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

repeating-conic-gradient()

Ist ähnlich wie conic-gradient() und nimmt die gleichen Argumente an, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

Bildfunktionen

image()

Definiert ein <image> auf ähnliche Weise wie der Typ <url>, jedoch mit zusätzlichen Funktionen, einschließlich der Spezifikation der Bildausrichtung und von Ersatzbildern, wenn das bevorzugte Bild nicht unterstützt wird.

image-set()

Wählt das geeignetste CSS-Bild aus einem gegebenen Satz, vor allem für Bildschirme mit hoher Pixeldichte.

cross-fade()

Überblendet zwei oder mehr Bilder bei einer festgelegten Transparenz.

element()

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

paint()

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

Zählerfunktionen

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

counter()

Gibt eine Zeichenkette zurück, die den aktuellen Wert des benannten Zählers darstellt, falls einer vorhanden ist.

counters()

Ermöglicht verschachtelte Zähler und gibt eine verkettete Zeichenkette zurück, die die aktuellen Werte der benannten Zähler darstellt, falls vorhanden.

symbols()

Definiert die Zählerstile inline, direkt als Wert einer Eigenschaft.

Formfunktionen

Grundlegende Formen

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

circle()

Definiert eine Kreisform.

ellipse()

Definiert eine Ellipsenform.

inset()

Definiert eine einsetzbare Rechteckform.

rect()

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

xywh()

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

polygon()

Definiert eine Polygonform.

path()

Akzeptiert eine SVG-Pfadzeichenkette, um das Zeichnen einer Form zu ermöglichen.

shape()

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

Andere Formfunktionen

ray()

Gültig zusammen 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> anzugeben, der mit corner-shape und den Bestandteilen und verwandten Eigenschaften verwendet wird.

Referenzfunktionen

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

attr()

Verwendet die auf einem HTML-Element definierten Attribute.

env()

Verwendet die vom Benutzer-Agenten als Umgebungsvariablen definierten Werte.

if()

Setzt bedingt einen Eigenschaftswert abhängig vom Ergebnis einer Stilanfrage, Medienanfrage oder Feature-Anfrage.

url()

Verwendet eine Datei von der angegebenen URL.

var()

Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines Teils eines Wertes einer anderen Eigenschaft.

Gitterfunktionen

Die folgenden Funktionen werden zur Definition eines CSS-Gitters verwendet:

fit-content()

Begrenzung einer gegebenen Größe auf eine verfügbare Größe nach 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()

Repräsentiert ein wiederholtes Fragment der Spur-Liste, was eine große Anzahl von Spalten oder Reihen ermöglicht, die ein wiederkehrendes Muster aufweisen.

Schriftfunktionen

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

stylistic()

Ermöglicht stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der auf eine Nummer abgebildet ist. Er entspricht dem OpenType-Wert salt, wie salt 2.

styleset()

Ermöglicht stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartenspezifischer Name, der auf eine Nummer abgebildet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.

character-variant()

Ermöglicht spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erstellt jedoch keine kohärenten Glyphen für einen Zeichensatz; einzelne Zeichen haben eigenständige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schriftartenspezifischer Name, der auf eine Nummer abgebildet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.

swash()

Ermöglicht Schwünge Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der auf eine Nummer abgebildet ist. Er entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.

ornaments()

Ermöglicht Ornamente wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der auf eine Nummer abgebildet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.

annotation()

Ermöglicht Anmerkungen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der auf eine Nummer abgebildet ist. Er entspricht dem OpenType-Wert nalt, wie nalt 2.

Easing-Funktionen

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

linear()

Easing-Funktion, die linear zwischen ihren Punkten interpoliert.

cubic-bezier()

Easing-Funktion, die eine kubische Bézierkurve definiert.

steps()

Iteration entlang einer bestimmten Anzahl von Haltepunkten während der Übergangszeit, wobei jeder Haltepunkt für die gleiche Dauer angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert verschiedener animation-timeline-Eigenschaften verwendet:

scroll()

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

view()

Setzt die animation-timeline eines Elements auf eine anonyme Blick-Fortschritts-Zeitleiste.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, wenn ankerpositionierte Elemente relativ zur Position und Größe ihrer zugeordneten Ankerelemente positioniert und dimensioniert werden.

anchor()

Gibt eine Länge relativ zur Position der Kanten eines ankerpositionierten Elements des zugehörigen Ankerelements zurück.

anchor-size()

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

Baumzählfunktionen

Die folgenden Funktionen geben einen Ganzzahlwert basierend auf dem DOM-Baum zurück, im Gegensatz zum flachen Baum, wie es die meisten CSS-Werte tun:

sibling-index()

Gibt eine ganze Zahl zurück, die die Position des ausgewählten Elements unter seinen Geschwistern widerspiegelt.

sibling-count()

Gibt eine ganze Zahl zurück, die 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