Einen Augenblick Geduld...
Schatten von Texten und Objekten werden sparsam eingesetzt, damit sie sich vom Rest des gezeigten Inhalts auf einer Webseite besser abheben. So schön dieser Effekt ist, aber genau deswegen würde ich ihn nicht immer und überall anwenden.
Die Befehle für das Setzen von Schatten für Texte und Ebenen unterscheiden sich von ihrem Syntax voneinander, aber nicht von der grundsätzlichen Funktionalität. Bei einem Text eignet sich die Überschrift eines Textblocks am besten für eine Schattierung.
Es ist notwendig den Text zunächst in einen div-Container zu packen damit er entsprechend formatiert werden kann.
Wir bereiten hier wieder das Dokument vor um den nötigen Bereich in den styles zu schaffen. Auch hier werde ich diese wieder in das HTML-Dokument selbst integrieren.
Bei vielen Einträgen in den styles würde ich sie aber - wie immer - auslagern in eine eigene Datei (z.B. ''styles.css'').
Der Syntax und die Verfahrensweise dazu ist im ersten meiner Tutorials (''Grundlagen: HTML, CSS und Javascript'') erklärt.
Für die Vorbereitung richte ich mir einen Bereich für die styles im head-Bereich des HTML-Dokumentes ein (Siehe Zeile 7-9).
Anschließend erstelle ich einen div-Container im Bereich body des HTML-Dokumentes (Siehe Zeile 15-17).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Schatten</title>
<style>
</style>
</head>
<body>
<div class="text">
Schattenspiel
</div>
</body>
</html>
Von nun an werde ich im Quelltext nur das zeigen, was sich im Bereich der styles abspielt. Der Rest des HTML-Dokumentes bleibt eh gleich und davon unberührt.
Kümmern wir uns also um die Formatierungen in den styles:
Zunächst möchte ich den Hintergrund des HTML-Dokumentes wieder auf eine dunklere Farbe festlegen, da die Standardfarbe immer weiss ist. Ich entscheide mich für ein leichtes grau. Dazu verwende ich den Befehl background-color: #9D9D9E im Eintrag body.
Wie immer in den styles, bitte nicht die geschweiften Klammern vergessen die jeweils um eine Befehlskette gesetzt werden müssen. Dazu gehören auch die Semilokons am Ende einer jeden Befehlszeile.
Als nächstes möchte ich nun den Text-Container formatieren und nutze .text mit den geschweiften Klammern um eine Befehlskette in den styles anzulegen. Diese muss bekanntermaßen der Bezeichnung des div-Containers im HTML-Teil des Dokuments entsprechend. Der Aufruf erfolgt zusammen mit einem Punkt davor.
Ich möchte dem Text eine Größe von 50px geben und ihn ''serifenlos'' in einer Schriftart Arial, Helvetica, bzw. Gotham, etc. erscheinen lassen. Deswegen nutze ich den Eintrag font-family für die Schriftart und font-size für die Größe. Da er zudem fett erscheinen soll trage ich bei font-weight: bold ein.
Jetzt kommt der Schatten. Dieser besteht bei Texten im Wesentlichen aus drei Zahlen mit dem Zusatz px (für Pixel) und der Angabe der Schattenfarbe.
Gestartet wird der Befehl mit text-shadow: . Dahinter folgt ein Wert zur Verschiebung in x-Richtung (also horizontal). Ein Leerzeichen trennt ihn von der Verschiebung in y-Richtung (also vertikal).
Nach einem weiteren Leerzeichen folgt der Wert für die Weichzeichnung (blur) ebenfalls mit einer Zahl. Diese ist i.d.R. größer als die beiden vorherigen Werte.
In Summe sind es trotzdem sehr kleine Werte um den Schatten sichtbar zu halten.
Ein weiteres Leerzeichen trennt nun die Angabe der Schattenfarbe von den voherigen Werten. Ich entscheide mich für ein dunkles grau (''#222222'').
So entsteht nun der gesamte Eintrag in einer Zeile: text-shadow: 2px 2px 8x #222222.
body {
background-color: #15323F;
}
.text {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFFFFF;
font-size: 50px;
font-weight: bold;
text-shadow: 2px 2px 8px #222222;
}
Würde man den Wert von blur wegelassen ensteht unter Umständen auch ein interessanter Effekt - je nach gewünschtem Stil, z.B. so.
Um den Effekt etwas zu verstärken habe ich hier allerdings auch die beiden Werte für die horizontale und vertikale Verschiebung auf 4px erhöht. Der Befehl dazu sieht so aus: text-shadow: 4px 4px #222222.
Im Vergleich dazu erhält der Schatteneffekt auch eine Dreidimensionalität, aber eben mit scharfen Kanten, da nun keine Weichzeichnung mehr vorgenommen wird.
Im Prinzip ist die Erzeugung eine Schattens für einen div-Container gleich dem Prinzip zur Erzeugung eines Textschattens. Es kommt aber noch ein Wert hinzu und natürlich ist der Syntax dadurch etwas anders.
In diesem Bespiel möchte ich einen Schatten erzeugen, der einen farbigen div-Container vom Hintergrund abhebt. Dazu habe ich also anschließend wieder die nötige Verschiebung in die horizontale und vertikale Richtung. Ebenfalls notwendig ist wieder der Wert für blur, also die Weichzeichnungskomponente.
Um den Effekt gut zu sehen verschiebe ich zusätzlich den div-Container um 50px nach rechts und nach unten.
Nicht zu vergessen ist die Größenangabe des div-Containers. Hierfür habe ich 500 x 80px gewählt.
Der Eintrag im HTML-Teil (body) des Dokuments sieht dazu so aus und passt wiedermal in eine Zeile:
<div class="ebene">Ebene mit Schatten</div>
Dieser startet lediglich den div-Container ''ebene''.
Nun folgen die Einträge in den styles:
body {
background-color: #9D9D9E;
}
.ebene {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000000;
font-size: 20px;
width: 500px;
height: 80px;
display: block;
margin-top: 50px;
margin-left: 50px;
background-color: #4F8BA1;
-webkit-box-shadow: 5px 5px 10px #222222;
box-shadow: 5px 5px 10px #222222;
}
Um die Ebene zu beschriften habe ich wieder eine serifenlose Schriftart in der Farbe schwarz mit color: #000000 in der Schriftgröße 20px gewählt.
Die Ebene auf display: block zu setzen empfiehlt sich grundsätzlich für Ebenen die ansonsten keine speziellen Eigenschaften haben sollen. Ein display: none z.B. würde bedeuten, dass die entsprechende Ebene ausgeblendet wird. Weiterführende Ergänzungen zum Befehl display kann man z.B. HIER erhalten (externer Link).
Die beiden Befehlszeilen 15 und 16 zeigen die notwendigen Eintragungen.
Warum werden zwei Zeilen benötigt?
Hier geht es wieder um die Kompatibilität zu sämtlichen Webbrowsern - um es abzukürzen: diese benötigen manchmal einen unterschiedlichen Syntax damit der gewünschte Effekt auch korrekt interpretiert wird.
Dennoch bleibt der Syntax nach der unterschiedlichen Zuordnung gleich:
5px (Verschiebung in horizontaler Richtung) 5x (Verschiebung in vertikaler Richtung) und 10px (Wert für die Weichzeichnung) und last but not least der Farbwert für den Schatten (hier wieder ein dunkles grau).
Natürlich lässt sich dieser Effekt auch mit Bildern realisieren. Diese müssen sich am besten dann auch in einem div-Container befinden. Idealer Weise ist der Container dann genauso groß wie das Bild. Der Container benötigt dann keine Hintergrundfarbe. Das erzeugt bei dem Bild dann den gewünschten Schatten.
Der Vorteil bei dieser Methode: ich benötige kein Bildbearbeitungsprogramm um meine Bilder mit einem Schatten zu versehen, UND ich fertige lediglich einmal diesen ''Bildcontainer'' an und kann ihn bei allen Bilder benutzen - sehr praktisch!
Ich hatte es ja Eingangs schon erwähnt: es gibt noch einen vierten Wert bei den Ebenen. Dieser nennt sich spread und bedeutet die Ausdehnung eines Schattens oder besser gesagt einer Hintergrundbeleuchtung in alle vier Richtungen. Anders als bei einem Schatten, bei dem ja bekanntlich eine gerichtete Lichtquelle simuliert wird, ist bei dem Wert spread eher ein Lichteffekt, der bei von vorne beleuchteten Objekten entsteht zu sehen. Deswegen würde ich ihn nicht wirklich auch als ''Schatten'' bezeichnen wollen.
Um ihn etwas realistischer zu halten habe ich ein paar andere Parameter etwas verändert. Der spread-Wert hat in meinem Fall einen Eintag von 6px.
Damit es wirklich ein Lichteffekt wird, sollte man die anderen ''Schattenparameter'' - also die Verschiebung in horizontale und vertikale Richtung - auf 0 setzen.... ok, ok, nicht alle Werte: ich habe festgestellt, das der Wert für die vertikale Richtung den Wert 1px annehmen muss, damit man wirklich ein Lichteffekt erhält der genau von vorne kommt.
Zudem habe ich natürlich hier die dunkelgraue Farbe des Schatteneffektes auf einen gelben Farbton eingestellt (''#FFD02D''). Der Wert für die Weichzeichnung (''blur'') habe ich auf 10px belassen.
body {
background-color: #9D9D9E;
}
.ebene {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000000;
font-size: 20px;
width: 500px;
height: 80px;
display: block;
margin-top: 50px;
margin-left: 50px;
background-color: #4F8BA1;
-webkit-box-shadow: 0px 1px 10px 6px #FFD02D;
box-shadow: 0px 1px 10px 6px #FFD02D;
}
Das Ergebnis sieht dann so aus:
Ich hoffe, das Tutorial war hilfreich.
Ich wünsche viel Erfolg beim Hinzufügen von Schatten - ein tolles Stilmittel!