CSS-Funktionen – dynamische Berechnungen

CSS mit runden Klammern

Wenn der Wert einer CSS-Eigenschaft in runden Klammern geschrieben wird, liegt eine CSS-Funktion vor. CSS-Funktionen berechnen Werte dynamisch, erstellen komplexe Stile und transformieren Eigenschaften. Ein Hauch von Programmiersprache …

CSS-Funktionen

CSS-Funktionen stehen anstelle von einfachen Werten und können auch ineinander verschachtelt werden. Funktionen sind vordefinierte Verhalten, die auf der Basis einer Eingabe Stile und Effekte erzeugen. Allerdings können wir keine eigenen Funktionen definieren wie in Programmiersprachen.

  ┌─── Selektor
  │
  ▼
.elem {
    width: calc(100vw - 4rem);
             ▲       ▲
             │       │
  Funktion ──┘       └── Argumente
}

Zwischen dem Namen und der öffnenden runden Klammer darf kein Leerzeichen stehen

Zu den prominentesten gehören transform() für das Vergrößern, Rotieren und Verschieben von HTML-Elementen und calc() für Berechnungen, um z.B. die Breite eines Elements aus unterschiedlichen Messgrößen zu berechnen.

attr()
Liest den Wert eines Attributs z.B content: "url: attr(href)"
calc()
Berechnet die Abmessung eines Elements, z.B. width: calc(100% - 4rem)
clamp()
Legt einen bevorzugten Wert zwischen einem Minimum und einem Maximum fest, z.B. font-size: clamp(1.25rem, 3vw, 3rem)
conic-gradient()
Ändert die Farben eines Verlaufs um einen Punkt herum, z.B. background-image: conic-gradient(yellowgreen 40%, gold 0 70%, #f06 0);
counter()
Zählt Elemente anhand von Überschriften, Tabellenzeilen oder Bildern, z.B. content: counter(mycounter);
cubic-bezier()
Erstellt ein benutzerdefiniertes Timing für CSS-Animationen und Transitions, z.B. cubic-bezier(x1, y1, x2, y2)
hsl()
Erzeugt einen Farbwert im HSL-Modell, z.B. hsl(300,50%,90%)
hsla()
Erzeugt einen Farbwert mit einer Transparenzkomponente im HSL-Modell, z.B. hsla(300,50%,90%,0.5)
linear-gradient()
Erzeugt einen linearen Verlauf, z.B. background-image: linear-gradient(to top, white 0%, black 50%)
max()
Wählt den größtmöglichen Wert aus einer Liste von Ausdrücken, z.B. width: max(20vw, 400px);
min()
Wählt den kleinstmöglichen Wert aus einer Liste von Ausdrücken, z.B. height: min(30vh, 400px);
radial-gradient()
Erstellt einen radialen oder kreisförmigen Verlauf im Zentrum eines Elements z.B. background-image: radial-gradient( circle at 200px 50px, blue 30%, red70% )
repeating-conic-gradient()
erzeugt Wiederholungen eines konischen Verlaufs
repeating-linear-gradient()
erzeugt Wiederholungen eines linearen Verlaufs
repeating-radial-gradient()
erzeugt Wiederholungen eines Kreisverlaufs
rgb()
Erzeugt einen Farbwert in RGB-Notation, z.B. color: rgb(200,70,89)
rgba()
Erzeugt einen Farbwert mit einer Transparenzkomponente in RGB-Notation, z.B. color: rgba(200,70,89,0.6)
transform()
Ändert die Position, Größe oder Form von HTML-Elementen scale(), translate(), rotate() und skew, z.B. transform: perspective(500px) rotateY(75deg);
url()
Lädt eine Datei, z.B. background-image: url("muster.png")
var()
Fügt einen benutzerdefinierten Wert – eine CSS-Variable – ein, z.B. color: var(--my-primary-color)

CSS-Funktionen sind in runden Klammern notiert und haben – wie Funktionen in Programmiersprachen – Argumente.