Schattierung von Elementen in HTML mittels CSS
Ein Element, wie zum Beispiel ein Container (div), ein Bild (div) oder ähnliches, zu schattieren ist mit CSS ganz einfach. Möglich ist dies mit folgendem Code:
box-shadow
Als Parameter kann die Fallrichtung des Schattens, die Breite des Schattens und die Farbe des Schattens angegeben werden. Ein Beispiel:
box-shadow:0px 0px 3px 5px black;
Der erste Parameter steht für die Verschiebung in X-Richtung, der zweite für die Verschiebung in Y-Richtung, der dritte Parameter für den Verlauf des Schattens, der vierte für die Breite des Schattens und der fünfte Parameter schließlich für die Farbe des Schattens.
Will man zum Beispiel einen roten Schatten unten rechts haben könnte man das wie folgt machen:
box-shadow:5px 5px 3px 0px red;
Analog dazu ein Schatten oben links:
box-shadow:-5px -5px 3px 0px red;
Das ganze funktioniert natürlich auch mit anderen Code-Kombinationen:
box-shadow:0px 3px 7px 0px black; border-radius:100px;
23.02.2014
