Funktionen

vordefinierte Funktionen für komplexere Funktionalität, z. B.

1. Variablen: zuvor definierte Werte verwenden (z. B. für mehrfach verwendete Farbwerte)

   • definieren mit --var-name: wert (z. B. global über :root Selektor)
   • verwenden mit var(--var-name)

2. Farben und Farbverläufe: rgba, hsla, linear-gradient, radial-gradient

3. Berechnungen: z. B. calc(Formel mit Grundrechenarten), min(Werte), max(Werte)

4. Transformationen: Wert der transform Eigenschaft, z. B. translate(dx, dy), rotate(Wert), scale(Wert)

5. Weitere: z. B. url(Ressourcen-Pfad)

❮❯HTML<div></div>

❮❯CSS:root {
  --my-border-color: blue;
}

div {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-color: var(--my-border-color);
  background-image: url(smiley.png);
}

❮❯CSSdiv {
  width: 50px;
  height: calc(5 * 10px);
  border: 3px solid rgb(200, 50, 50);
  background-image: radial-gradient(
    circle closest-side at center,
    white,
    yellow,
    orange
  );
  transform: translate(20px, 10px) rotate(45deg);
}