logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


CSS3 Text Shadow

Auch Text kann mittels CSS-Anweisungen mit Schatten versehen werden. Hierzu sind im Prinzip vier Angaben nötig. Siehe unteres Beispiel mit den Werten des "text-shadow" - Befehls. Der erste Wert gibt den Abstand in der X-Achse, der zweite Wert den der Y-Achse wieder. Der 3. Wert die Breite des Auslaufs des Schattens. Der 4. Wert dient der Farbangabe des Schattens. Mit font-size läßt sich die Größe des Textes festlegen und die Color-Angabe färbt den Text ein.

 

HTML5 CSS3 Playground


.my_CSS3_class {
text-shadow:2px 2px 7px #111;
font-size:3.0em;
color:#f5f5f5;
}

 

Natürlich ist es auch möglich, wie im unteren Beispiel angezeigt, Texten mehrere Schatten zuzuweisen, mit unterschiedlichen Positionierungen zur X,Y - Achse, Auslauf des Schattens und Schattenfarbe. Der Text an sich kann wie gewohnt natürlich positioniert werden und mit Hintergrundfarbe versehen werden.

 

HTML5 CSS3 Playground

 


.my_CSS3_class {
text-shadow:0px -11px 10px #C60,
            0px -3px 9px #FF0;
font-size:2.8em;
color:#ccc;
text-align:center;
padding:10px 0px 5px 0px;
background:#28333e;
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tags

HTML5 META Artikel Doctype Header Footer