Css3 Text-shadow verstehen und anwenden
CSS ist das Handwerkszeug eines jeden Webdesigners, damit bestimmen wir Formen, Farben, Abstände und noch vieles mehr.
Doch wie so oft nutzen die meisten nur einen kleinen Teil der möglichkeiten. Die einen aus bequemlichkeit, andere aus Unwissenheit und Unerfahrung.
Mit dem heutigen Standard CSS3 wurde Webdesignern eine fast grenzenlose Palette an möglichketen an die Hand gegeben, um Designs immer mehr auf Basis von Quellcode zu schreiben, anstatt hierfür extra Bilder einfügen zu müssen.
Eine der am wenigsten beachteten Option ist der Text-Shadow. Die meisten werden sich jetzt fragen wieso, man sieht doch immer wieder Seiten auf denen jemand seinen Text einen Schatten gegeben hat, da ist dann ein Dunkler Schatten der den Text ein wenig hervorhebt, mal größer mal dezenter gehalten. Doch mit der Option hat man noch so viel mehr möglichkeiten. Ein paar davon werde ich hier einmal aufzeigen und beschreiben wie diese erstellt werden.
Damit möchte ich dir einmal das Verständnis näherbringen und vielleicht auch die neugierde auf kreative versuche bei dir wecken.
Erklärung zum text-shadow in CSS3
Eigentlich ist die Option schon sehr alt im CSS, eingeführt in der Version 2.0 wurde sie in der Version 2.1 erstmal wieder entfernt, da die Browser wie so oft die Funktion einfach nicht unterstützten. Nachdem die Option dann in CSS Version 3 wieder eingeführt wurde, fingen die Browser an diese auch zu nutzen und Umzusetzen.
Heutzutage ist diese Option in allen modernen Browsern Kompatible und wird richtig interpretiert.
Lediglich der Internet Explorer < 10 ist mal wieder die Spaßbremse, welcher sein eigenes Süppchen kocht. Hier lässt sich die Option mit dem filter:DropShadow() emulieren, aber nicht sehr ansehnlich.
Wie du diesen nun richtig einsetzt, erkläre ich dir nachdem ich kurz den Aufbau der anweisung erklärt habe.
text-shadow: 1px 2px 3px #323232;
Der erste Wert bestimmt den versatz auf der X-Achse. Negativ werte ziehen den Schatten nach Links, Positiv werte nach Rechts.
Der Zweite Wert bestimmt den versatz auf der Y-Achse. Negativ nach oben, Positive werte nach unten.
Der Dritte Wert ist der sogenannte Blur oder Spread, das heist die ausdehnung des Schattens.
Mit der Raute wird der Farbwert für den Schatten eingeleitet, in diesem Fall als Hex Wert, dies kann aber auch beispielsweise als RGB Wert gesetzt werden.
1.) Beispiel:
GAMBIT24 EINFACHER SCHATTEN
Einfacher Textschatten
p {
color: #888888;
text-shadow: 1px 1px #323232;
}2.) Beispiel:
GAMBIT24 VOLLTON 3D
Volltonschatten 3D Effekt
p {
text-shadow:
1px 1px #cdcdcd,
2px 2px #cdcdcd,
3px 3px #cdcdcd,
4px 4px #cdcdcd,
5px 5px #cdcdcd;
}3.) Beispiel:
GAMBIT24 SCHATTEN GESTAPELT
Schatten Gestapelt
p {
text-shadow:
1px 0px #dcdcdc, 0px 1px #cdcdcd,
2px 1px #dcdcdc, 1px 2px #cdcdcd,
3px 2px #dcdcdc, 2px 3px #cdcdcd,
4px 3px #dcdcdc, 3px 4px #cdcdcd,
5px 4px #dcdcdc, 4px 5px #cdcdcd,
5px 5px #dcdcdc;
}4.) Beispiel:
GAMBIT24 SMOOTH SHADOW
Schatten Smooth
p {
text-shadow:
1px 0px 1px #dcdcdc, 0px 1px 1px #cdcdcd,
2px 1px 1px #dcdcdc, 1px 2px 1px #cdcdcd,
3px 2px 1px #dcdcdc, 2px 3px 1px #cdcdcd,
4px 3px 1px #dcdcdc, 3px 4px 1px #cdcdcd,
5px 4px 1px #dcdcdc, 4px 5px 1px #cdcdcd,
5px 5px 1px #dcdcdc;
}5.) Beispiel:
GAMBIT24 KONTUR OUTLINE
Schatten als Kontur
p {
text-shadow:
color: #f1f1f1;
text-shadow: 0px -1px #cdcdcd, 1px 0px #cdcdcd, 0px 1px #cdcdcd,-1px 0px #cdcdcd;
}6.) Beispiel:
GAMBIT24 LETTERPRESS INSIDE
Text Gestanzt (Letterpress)
p {
text-shadow:
color: #dedede;
text-shadow: 0px -1px 1px #565656, 0px 1px 1px #f2f2f2;
}7.) Beispiel:
GAMBIT24 EMBOSS OUTSIDE
Text Emboss Aussenprägung
p {
text-shadow:
color: #efefef;
text-shadow: 0px -1px 1px #f2f2f2, 0px 1px 1px #565656;
}8.) Beispiel:
GAMBIT24 RETRO VINTAGE
Text Vintage Retro
p {
text-shadow:
color: #565656;
text-shadow: 2px 2px 0px #f2f2f2, 3px 3px 0px #565656;
}Dies waren jetzt nur ein paar der Möglichkeiten. Da, wie du anhand der Beispiele erkennen kannst, mehrere Einstellungen auf der text-shadow Option setzbar sind lassen sich hier unzählige effekte erzielen.
So kann man mit den richtigen Werten und Farben Neon Effekte erstellen, Anaglyphen unter verwendung von rgba als Farbwerte sowie auch Glühende, Brennende optiken.
Auch Animationen lassen hier noch Spielraum für weitere VIsuelle effekte. Der Kreativität sind hier kaum grenzen gesetzt.