Schatten und Farbverläufe in CSS
Zu den gestalterischen Aufgaben bei der Erstellung einer Website gehören Farbverläufe und Schatten. Vor CSS3 war das nicht immer einfach, da man hierfür in der Regel Hintergrundbilder verwendete und den Elementen zuwies. Das ist mittlerweile nicht mehr notwendig und man kann Schatten und Farbverläufe auch allein mit CSS erstellen. Dadurch spart man sich die Erstellung und Verwaltung der Hintergrundbilder und die Ladezeiten verkürzen sich aufgrund der geringeren Serveranfragen und den wegfallenden Bildern. Unterhalb dieses Knotens sind stehen zu dem Thema die folgenden Anleitungen bereit.
- linear-gradient (Linearer Verlauf)
- radial-gradient (Kreis-Verlauf)
- text-shadow (Textschatten)
- box-shadow (Box-Schatten)
Eigenschaft linear-gradient
Vor CSS3 konnten Hintergründe nur mit einer Farbe oder mit Bildern versehen werden. Für Farbverläufe musste man häufig auf Bilder zurückgreifen, um den Verlaufseffekt zu erzielen. Ab CSS3 ist hierfür die Eigenschaft linear-gradient vorgesehen.
Eigenschaft radial-gradient
Für Farbverläufe in Kreisen und Ellipsen ist die Eigenschaft radial-gradient vorgesehen.
Eigenschaft text-shadow
Früher musste man ebenfalls Bilder verwenden, um Texte mit einem Schatten darzustellen. Ab CSS3 ist das nicht mehr notwendig und für solche Fälle ist die Eigenschaft text-shadow vorgesehen.
Eigenschaft box-shadow
Die Elemente einer Website nehmen ihren Platz in einer Box ein. Man kann nicht nur Texte mit einem Schatten versehen, sondern auch Boxen. Hierfür ist ab CSS3 die Eigenschaft box-shadow vorgesehen.
Die Eigenschaften funktionieren nicht bei allen Browsern. Zum Teil sind gewisse Browser-Präfixe notwendig.