alex-mueller/Aufgaben-Python
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Aufgaben-Python/courses/html_css/07_css_variablen_und_farbwelten/README.md

1.2 KiB
Raw Permalink Blame History

CSS 07: CSS Custom Properties & Farbsysteme 🌈

Willkommen in Modul 07!

In diesem Modul erstellst du ein dynamisches Design-Token-System mit CSS Custom Properties (--variable), nutzt moderne Farbmodelle (HEX, RGB, HSL, OKLCH) und implementierst ein variables Dark/Light Theme.

💡 1. Das Wichtigste in Kürze

Deklaration & Zugriff

:root {
  --primary: #3b82f6;
  --bg-surface: oklch(0.98 0.01 240);
  --radius-sm: 6px;
}

.button {
  background-color: var(--primary);
  border-radius: var(--radius-sm);
}

Farbmodelle im Überblick

  • HEX: #3b82f6
  • RGB / RGBA: rgba(59, 130, 246, 0.8) oder rgb(59 130 246 / 80%)
  • HSL: hsl(217, 91%, 60%)
  • OKLCH: oklch(0.65 0.22 255) (Sehr große Dynamik auf modernen Displays)

🎯 Teilziele in aufgabe.html

  1. :root Tokens: Definiere Design-Token (--primary-color, --bg-page, --bg-card, --text-color, --radius).
  2. var() Verknüpfung: Formatiere body und .card mit var(...).
  3. Farbwelten: Nutze HEX, HSL/RGBA und oklch(...).
  4. Farbverlauf: Wende linear-gradient(...) auf .gradient-header an.
  5. Theme-Klasse: Überschreibe Variablen in .dark-theme.