CSS: Box Shadow / Boxschatten und Text Shadow / Textschatten

Wie der Name schon sagt, erzeugen wir mit dem Box-Shadow (box-shadow) bzw. Text-Shadow (text-shadow) per CSS3 – ganz ohne Grafiken oder Hintergrundbilder – einen Schatten in einem Element oder auf einem Text. Wir können die Schatten-Verschiebung, die Weichzeichnung nach außen sowie den Überfluss einstellen. Der Überfluss regelt dabei, ab wann der Schatten weichgezeichnet wird. Ebenso können wir eine Schattenfarbe zuweisen. Komma-separiert ist es möglich, mit diesen CSS Befehlen auf Elementen mehrere Schatten zu definieren.

Weitere Anpassungen der Schriftdarstellung bieten CSS Befehle für Schriften. Für Rahmen und Innenabstände sowie Außenabstände gibt es ebenfalls CSS Anweisungen.

Beispiele

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
    -moz-box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
    box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
    box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
  
    text-shadow: 2px 2px 1px #000000;
    filter: dropshadow(color=#000000, offx=2, offy=2);
}

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
3 Bewertungen
93 %
1
5
4.65
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.