CSS-Funktionen – dynamische Berechnungen

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)

filter()

CSS-Filter wie Farbfilter, Graustufen und Unscharf wirken wie die Effektfilter der Bildbearbeitung

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.