CSS3-Eigenschaften

Auf dieser Seite finden Sie alle CSS3-Eigruppen mit Verweisen und kurzen Beschreibungen.

Liste der CSS3-Eigenschaften

Animations-Eigenschaften

Property	Description
animation	Animiert CSS-Eigenschaften mit diskreten Werten (ändert sie schrittweise von einem Stil zu einem anderen).
animation-delay	Legt fest, wann eine Animation startet.
animation-direction	Legt fest, wie die Animation abgespielt werden soll: vorwärts, rückwärts oder in alternierenden Zyklen.
animation-duration	Definiert die Dauer (in Sekunden oder Millisekunden), die eine Animation für einen Zyklus benötigt.
animation-fill-mode	Legt einen Stil für das Element fest, wenn die Animation nicht ausgeführt wird (bevor sie startet, nachdem sie endet oder beides).
animation-iteration-count	Definiert, wie oft die Animation abgespielt werden soll.
animation-name	Definiert den Namen der @keyframes-Regel, die Sie anwenden möchten. Sie hat zwei Werte: none und keyframename.
animation-play-state	Gibt an, ob die Animation läuft oder pausiert ist.
animation-timing-function	Definiert, wie die Animation während der Dauer jedes Zyklus fortschreitet, nicht über die gesamte Animation hinweg.
@keyframes (at-rule)	Die @keyframes-At-Regel ist die Grundlage für keyframe animations, die verwendet werden, um viele CSS-Eigenschaften zu animieren (sie schrittweise von einem Stil zu einem anderen zu ändern).

Hintergrund-Eigenschaften

Property	Description
background-clip	Gibt an, wie weit background-color und background-image vom Element entfernt sein sollen.
background-origin	Gibt den Positionierungsbereich des Hintergrunds für ein background-image an.
background-size	Definiert die Größe des Hintergrundbildes.

Rahmen-Eigenschaften

Property	Description
border-bottom-left-radius	Definiert die abgerundete Form der linken unteren Ecke des Elements.
border-bottom-right-radius	Legt die Abrundung der rechten unteren Ecke des Elements fest.
border-image	Ermöglicht es, ein Bild als Rahmen um ein Element anzugeben.
border-image-outset	Gibt an, um wie viel das Rahmenbild über den Rahmenbereich des Elements hinaus erweitert wird.
border-image-repeat	Gibt an, ob das border-image abgerundet, wiederholt oder gestreckt wird.
border-image-slice	Gibt an, wie das durch border-image-source angegebene Bild in neun Bereiche aufgeteilt wird: vier Ecken, vier Kanten, ein Mittelteil.
border-image-source	Legt das Quellbild für die Erstellung eines Rahmenbildes des Elements fest.
border-image-width	Definiert die Breite des Rahmenbildes.
border-radius	Erzeugt abgerundete Ecken für die äußere Rahmenkante eines Elements.
border-top-left-radius	Definiert die Abrundung der linken oberen Ecke des Elements. Es gibt drei Arten der Abrundung.
border-top-right-radius	Definiert die abgerundete Form der rechten oberen Ecke des Elements. Es gibt drei Arten der Abrundung.

Farb-Eigenschaften

Property	Description
opacity	Gibt die Transparenz eines Elements an.

Flexible Box Layout

Property	Description
align-content	Richtet die Zeilen eines flex-Containers aus, wenn vertikal verfügbarer Platz vorhanden ist (auf der Querachse).
align-items	Definiert die Standardausrichtung für Flex-Items entlang der Querachse.
flex	Gibt die Bestandteile einer flexiblen Länge an.
flex-basis	Definiert die anfängliche Hauptgröße des flexiblen Elements.
flex-direction	Definiert die Hauptachse eines Flex-Containers und legt die Reihenfolge fest, in der Flex-Items angezeigt werden.
flex-flow	Eine Kurzform für die Eigenschaften flex-wrap und flex-direction.
flex-grow	Gibt an, wie stark das Element im Verhältnis zu den übrigen Elementen des Flex-Containers wachsen soll.
flex-shrink	Gibt an, wie stark das Element im Verhältnis zu den übrigen Elementen des Flex-Containers schrumpfen soll.
flex-wrap	Gibt an, ob die flexiblen Elemente umbrechen sollen oder nicht.
justify-content	Richtet die Elemente aus, wenn sie nicht den gesamten verfügbaren horizontalen Platz nutzen.
order	Gibt die Reihenfolge eines flexiblen Elements innerhalb des Flex- oder Grid-Containers an.

Schrift-Eigenschaften

Property	Description
font-size-adjust	Steuert die Schriftgröße, wenn die zuerst ausgewählte Schriftart nicht verfügbar ist.
font-stretch	Macht den Text schmaler oder breiter.

Mehrspalten-Layout-Eigenschaften

Property	Description
column-count	Gibt die Anzahl der Spalten an, in die der Inhalt eines Elements aufgeteilt wird.
column-fill	Steuert den Inhalt des Elements, wenn er in Spalten aufgeteilt wird.
column-gap	Legt die Breite des Abstands zwischen den Spalten fest.
column-rule	Definiert Stil, Breite und Farbe der Linie zwischen den Spalten.
column-rule-color	Legt die Farbe der Linie fest.
column-rule-style	Definiert den Stil der Linie zwischen den Spalten.
column-rule-width	Definiert die Breite der Linie zwischen den Spalten.
column-span	Gibt an, ob sich das Element über eine Spalte oder über alle Spalten erstreckt.
column-width	Definiert die Breite der Spalten.
columns	Eine Kurzform für column-count und column-width.

Umriss-Eigenschaften

Property	Description
outline-offset	Gibt den Abstand zwischen einem Umriss und der Rahmenkante eines Elements an.

Text-Eigenschaften

Property	Description
tab-size	Legt die Breite eines Tabulatorzeichens fest.
text-align-last	Legt die Ausrichtung der letzten Zeile des Textes fest.
text-decoration-color	Legt die Farbe der Textdekoration fest.
text-decoration-line	Gibt die Art der Linie an, die für die Textdekoration verwendet wird.
text-decoration-style	Gibt den Stil der Textdekoration an.
text-justify	Definiert das Verhalten des Abstands zwischen Wörtern oder Zeichen.
text-overflow	Gibt an, wie überlaufender Inline-Text dem Benutzer signalisiert werden soll.
text-shadow	Ermöglicht das Hinzufügen von Schatten zum Text.
word-break	Gibt an, wo die Zeilen umbrochen werden sollen.
word-wrap	Ermöglicht das Umbrechen von Zeilen in Wörter, damit sie in den Container passen.

Transformations-Eigenschaften

Property	Description
backface-visibility	Gibt an, ob die Rückseite eines Elements sichtbar sein soll oder nicht.
perspective	Verleiht einem 3D-positionierten Element eine Perspektive und bestimmt den Abstand zur z=0-Ebene.
perspective-origin	Definiert die Position, von der aus der Benutzer das 3D-positionierte Element betrachtet.
transform	Gibt eine zweidimensionale oder dreidimensionale Transformation des Elements an.
transform-origin	Ermöglicht das Ändern der Position der Transformation des Elements.
transform-style	Gibt an, wie die Kindelemente im dreidimensionalen (3D-)Raum gerendert werden.

Übergangs-Eigenschaften

Property	Description
transition	Kurzform für die folgenden Eigenschaften: transition-property, transition-duration, transition-timing-function, transition-delay
transition-delay	Gibt an, wann der Übergangseffekt starten soll.
transition-duration	Gibt an, wie lange die Übergangsanimation dauern soll.
transition-property	Gibt die Namen der Eigenschaften für den Übergang an.
transition-timing-function	Gibt den Verlauf des Übergangs über seine Dauer an und ermöglicht so die Änderung der Geschwindigkeit.

Eigenschaften der visuellen Formatierung

Property	Description
overflow-x	Gibt an, ob der Inhalt ausgeblendet, sichtbar oder horizontal gescrollt werden soll, wenn er die linke und rechte Kante des Elements überläuft.
overflow-y	Gibt an, ob der Inhalt ausgeblendet, sichtbar oder vertikal gescrollt werden soll, wenn er die obere und untere Kante des Elements überläuft.
resize	Gibt an, wie die Größe des Elements geändert werden kann.
box-shadow	Ermöglicht die Implementierung mehrerer Schatten um das Element herum, indem Werte für Farbe, Größe, Unschärfe, Versatz und inset angegeben werden.
box-sizing	Definiert die Berechnung von width und height eines Elements, wenn sie padding und borders einschließen.

Practice

Finden Sie das nützlich?