Effekte

Mit CSS ist es möglich, einige „Effekte“ zu erzeugen, welche wir Ihnen auf dieser Seite vorstellen möchten.

Schatten

Nicht nur für Text ist es möglich, einen Schatten zu erstellen (text-shadow), sondern auch für Elemente. Diesen sogenannten Box-Schatten können wir mittels der box-shadow-Eigenschaft festlegen. Als Wert werden 2 bis 5 Parameter angegeben. Der erste Parameter gibt den horizontalen Versatz an und der zweite den vertikalen Versatz. Mit dem dritten und somit dem ersten optionalen Parameter wird der Radius des Weichzeichens angegeben. Der vierte Parameter dient zur Angabe der Größe des Schattens. Mit Hilfe des 5. und letzten Parameters wird die Farbe des Schattens festgelegt, wovon die Standardeinstellung schwarz ist.

div
{
	background-color: red;
	width: 200px;
	height: 200px;
	box-shadow: 20px 10px 25px blue;
}

Transparenz

Mit Hilfe der Transparenz (Durchsichtigkeit) ist es möglich, die Deckkraft eines Elements zu verringern, wodurch das dahinterliegende Element oder der Hintergrund des Eltern-Elements durchschimmert. Die Deckkraft kann mittels der Eigenschaft opacity festgelegt werden. Die Angabe erfolgt in einer Fließkommazahl (ohne Einheit) mit Werten zwischen 0 (für keine Deckkraft) und 1 (für volle Deckkraft).

Wie Sie in der Vorschau des untenstehenden Beispiels bemerken werden, wird bei der Verwendung der opacity-Eigenschaft nicht nur der Hintergrund des aktuellen Elements durchsichtig, sondern zugleich auch die Schrift. Dieser Effekt ist nicht immer erwünscht, weshalb oft an Stelle der opacity-Eigenschaft der Wert der Hintergrundfarbe angepasst wird, denn durch die Angabe eines RGBA- oder HSLA-Farbwerts an Stelle eines RGB- oder HSL-Farbwerts kann der Hintergrund eines Elements ebenfalls transparent gemacht werden. Das untenstehende Beispiel enthält deshalb zwei Beispiele, bei welchem die beiden genannten Varianten direkt verglichen werden können.

body
{
	background-color: lightgray;
}

#text1, #text2
{
	color: yellow;
	width: 200px;
	padding: 5px;
}

#text1
{
	background-color: blue;
	opacity: 0.5;
}

#text2
{
	background-color: rgba(0, 0, 255, 0.5);
}