CSS3-Eigenschaften

CSS3 ist die neueste Weiterentwicklung der Cascading Style Sheets-Sprache. Anstatt einer monolithischen Veröffentlichung ist CSS3 in eigenständige Module aufgeteilt — Animationen, Flexbox, CSS Grid, Hintergründe und Rahmen, Transforms, Filter und mehr —, die Browser unabhängig voneinander implementieren und ausliefern können. Jedes Modul fügte neue Eigenschaften zum ursprünglichen CSS2-Set hinzu und ermöglicht so abgerundete Ecken, Verläufe, Schatten, Animationen, flexible und rasterbasierte Layouts sowie visuelle Filter — ganz ohne Bilder oder JavaScript.

Diese Seite ist ein Schnellreferenz-Index der in CSS3 eingeführten oder wesentlich erweiterten Eigenschaften, geordnet nach dem Modul, zu dem sie gehören. Jede Zeile verlinkt auf ein vollständiges Kapitel mit Syntax, Werten und Live-Beispielen.

Wenn Sie neu in der Sprache sind, beginnen Sie mit den Kapiteln CSS Introduction und CSS Syntax, bevor Sie sich einzelnen Eigenschaften widmen.

So nutzen Sie diese Referenz

• Eigenschaft nach Gruppe finden. Die nachfolgenden Überschriften spiegeln die CSS3-Module wider: Wenn Sie eine Layout-Eigenschaft benötigen, suchen Sie unter Flexible Box Layout oder Grid Layout; für Bewegung unter Animation oder Transitions; für visuelle Effekte unter Filter Effects oder Transform Properties.
• Für Details durchklicken. Jede Eigenschaft verlinkt auf ein eigenes Kapitel mit der vollständigen Werteliste, Standardwerten und ausführbaren Demos.
• Browser-Unterstützung beachten. CSS3-Module erreichten stabile, präfixfreie Unterstützung zu unterschiedlichen Zeiten. Die meisten nachfolgenden Eigenschaften funktionieren in jedem modernen Browser, aber überprüfen Sie die Unterstützung neuerer Ergänzungen (beispielsweise bestimmter column-*-Eigenschaften) stets, bevor Sie sie in der Produktion einsetzen.

Ein Hinweis zu Vendor-Präfixen

Während CSS3-Module noch experimentell waren, lieferten Browser Eigenschaften hinter Vendor-Präfixen wie -webkit-, -moz-, -ms- und -o- aus. In älteren Codebasen begegnen sie Ihnen möglicherweise noch:

/* Older code — prefixes were needed during the experimental phase */
.box {
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg); /* Always list the unprefixed property last */
}

Für die nachfolgend aufgeführten Eigenschaften brauchen Sie heute fast nie Präfixe — schreiben Sie den standardmäßigen, präfixfreien Namen. Verwenden Sie Präfixe nur dann, wenn Sie einen Legacy-Browser unterstützen müssen, und listen Sie die Standard-Eigenschaft immer zuletzt auf, damit sie überschreibt.

CSS3 vs. CSS2 — Was hat sich geändert?

CSS2 deckte das grundlegende Box-Modell, Farben, Schriften und Positionierung ab. CSS3 baute auf diesem Fundament auf und ergänzte folgende Fähigkeiten, die zuvor fehlten oder sehr begrenzt waren:

• Abgerundete Ecken und Rahmenbilder — border-radius, border-image
• Schatten — box-shadow, text-shadow
• Verläufe und mehrere Hintergründe — background-size, background-clip
• Flexible und rasterbasierte Layouts — Flexbox (flex, align-items, …), CSS Grid (grid, grid-template-columns, …)
• 2D- und 3D-Transforms — transform, perspective
• Sanfte Zustandsänderungen — transition
• Keyframe-Animationen — animation, @keyframes
• Mehrspaltige Texte — column-count, column-gap
• Visuelle Filter — filter (blur, brightness, contrast, …)
• Benutzerdefinierte Transparenz — opacity

Liste der CSS3-Eigenschaften

Animation-Eigenschaften

Keyframe-Animationen ermöglichen es, zu beschreiben, wie ein Element eine Reihe von Stil-Momentaufnahmen durchläuft. Die @keyframes-Regel definiert die Momentaufnahmen; die animation-*-Eigenschaften binden sie an ein Element und steuern sie.

/* Minimal animation example */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.banner {
  animation: slide-in 0.4s ease-out both;
}

Hintergrund-Eigenschaften

CSS3 erweiterte Hintergründe um Unterstützung für Größenanpassung, Clipping-Bereiche und mehrere überlagerte Bilder auf einem einzigen Element.

/* Responsive hero with background-size */
.hero {
  background-image: url('/img/hero.jpg');
  background-size: cover;       /* fills the box; crop as needed */
  background-position: center;
  background-clip: border-box;  /* default; image reaches border edge */
}

Rahmen-Eigenschaften

CSS3 fügte abgerundete Ecken und bildbasierte Rahmen hinzu — Funktionen, die zuvor Bild-Workarounds erforderten.

/* Rounded button */
.btn {
  border-radius: 6px;
  border: 2px solid steelblue;
}

/* Pill shape */
.badge {
  border-radius: 999px;
}

Farbe und Transparenz

Filter Effects

Die filter-Eigenschaft wendet grafische Effekte (Unschärfe, Helligkeit, Kontrast, Schlagschatten usw.) direkt in CSS an — kein Bildeditor erforderlich.

.card:hover img {
  filter: brightness(1.1) saturate(1.2);
  transition: filter 0.2s ease;
}

.modal-backdrop {
  filter: blur(4px);
}

Flexible Box Layout

Flexbox ist ein eindimensionales Layout-Modell — es verteilt Elemente entlang einer einzelnen Achse (Zeile oder Spalte) und übernimmt Ausrichtung, Abstände und Umbruch automatisch.

/* Classic centered card */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}

.card {
  flex: 1 1 300px; /* grow | shrink | basis */
}

Eine vollständige Einführung finden Sie unter The Ultimate Guide to Flexbox.

Schrift-Eigenschaften

Grid Layout

CSS Grid ist ein zweidimensionales Layout-System — es platziert Elemente gleichzeitig in Zeilen und Spalten und eignet sich ideal für Seitenlayouts und komplexe Komponentenraster.

/* Three-column responsive grid */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Named template areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

Mehrspalten-Layout-Eigenschaften

Das Mehrspalten-Layout verteilt Inhalte automatisch über eine festgelegte Anzahl oder Breite von Spalten — ähnlich einem Zeitungslayout.

/* Two-column article body */
.article-body {
  columns: 2 400px;   /* shorthand: column-count column-width */
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

h2 {
  column-span: all; /* heading breaks out of columns */
}

Outline-Eigenschaften

Text-Eigenschaften

CSS3 fügte Kontrolle über Textüberlauf, Umbruch, Schatten und eine feinkörnige Steuerung der Dekorationsstile hinzu.

/* Truncate long titles with ellipsis */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle heading shadow */
h1 {
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Transform-Eigenschaften

Transforms verschieben, drehen, skalieren oder neigen Elemente im 2D- oder 3D-Raum, ohne den Dokumentfluss zu beeinflussen.

/* 2D card flip on hover */
.card {
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-back {
  backface-visibility: hidden;
}

Transition-Eigenschaften

Transitions animieren Eigenschaftsänderungen von einem Wert zu einem anderen über eine festgelegte Dauer, wenn sich eine CSS-Eigenschaft ändert (z. B. bei :hover).

/* Smooth color + shadow on hover */
.btn {
  background-color: steelblue;
  box-shadow: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background-color: dodgerblue;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Transitions vs. Animationen: Verwenden Sie transition für zustandsgesteuerte Änderungen (hover, focus, active) — sie sind einfacher zu schreiben. Verwenden Sie animation mit @keyframes für unabhängige, wiederholende oder mehrstufige Bewegungen, die ohne Benutzerinteraktion ablaufen.

Visuelle Formatierungs-Eigenschaften

Verwandte Referenzen

Wenn Sie die benötigte Eigenschaft kennen, behandeln diese Kapitel die meistgenutzten CSS3-Funktionen ausführlich:

• CSS Animation und @keyframes für Keyframe-basierte Bewegungen.
• The Ultimate Guide to Flexbox für eindimensionale Layouts.
• grid und grid-template-columns für zweidimensionale Seitenlayouts.
• filter für Unschärfe, Helligkeit, Kontrast, Schlagschatten und andere grafische Effekte.
• transform und transition für visuelle Effekte und sanfte Zustandsänderungen.
• border-radius und box-shadow für moderne dekorative Gestaltung.

Übungen