Dank CSS3 verfügen wir inzwischen über zahlreiche Möglichkeiten, Elemente mit Schatten zu versehen. So gibt es neben Text- und Elementschatten auch einen Schattenfilter. Allerdings erzeugen alle CSS3-Schatten lediglich einfache Schlagschatten, bei denen neben der Farbe bloß noch die Unschärfe, der Versatz und die Ausbreitung definiert werden können. Die JavaScript-Bibliothek „shine.js“ hingegen ermöglicht weitaus komplexere und realistischere Schatteneffekte.
Schatten erzeugen
shine.js von Benjamin Bojko und Naim Sheriff kommt ohne andere JavaScript-Bibliotheken wie beispielsweise jQuery aus und kann daher sehr einfach eingesetzt werden. Ist das Tool im Headbereich eingebunden, wird per JavaScript einfach ein Schatten auf ein beliebiges Element angewendet.
var schatten = new Shine(document.getElementById("ueberschrift"));
Mit „Shine()“ definieren wir jeweils eine neue Instanz. Neben der Angabe eines Elementes können weitere optionale Parameter definiert werden. So gibt es einen Konfigurationsparameter, über den das Aussehen des Schattens bestimmt wird.
var schatten_konfig = new shinejs.Config({ numSteps: 10, offset = 0.25, blur: 100, opacity: 0.5, shadowRGB: new shinejs.Color(255, 0, 0)});var schatten = new Shine(document.getElementById("ueberschrift"), schatten_konfig);
Im Beispiel wird per „shinejs.Config()“ ein Schatten definiert, den wir später als zweiten Parameter der „Shine()“-Instanz übergeben. Es gibt mehrere Angaben, mit denen das Aussehen des Schattens festgelegt wird. „Shine.js“ generiert die Schatten mit den CSS3-Eigenschaften „text-shadow“ für Textschatten beziehungsweise „shadow“ für Elementschatten. Per „numSteps“ wird die Anzahl der Schatten festgelegt, die auf das jeweilige Element angewendet werden sollen.
Je mehr Schritte angegeben werden, desto komplexer wird der Schatten. Per „offset“ legen wir den Versatz des Schattens fest, per „blur“ die Unschärfe. „opacity“ gibt die Deckkraft an und „shadowRGB“ die Farbe. Diese wird über eine eigene „shinejs.Color()“-Instanz definiert.
Lichtquelle definieren
Das Besondere an „shine.js“ ist, dass für jeden Schatten jeweils eine eigene Lichtquelle angegeben werden kann. Dies erfolgt gängig per X- und Y-Koordinaten.
schatten.light.position.x = 500;schatten.light.position.y = 10;schatten.light.intensity = 1;
Je größer die Werte für die Koordinaten sind, desto länger wird der Schatten gezogen. Neben „light.position.x“ und „light.position.y“ für die Angabe der Koordinaten wird mit „light.intensity“ die Lichtintensität angegeben. Je höher der Wert ist, desto stärker wird der Schatten dargestellt.
Beispiel
Damit sich die Lichtquelle auf den zuvor definierten Schatten auswirkt, muss der Schatten per „draw()“ neu gezeichnet werden.
schatten.draw();
Schatten auf Element statt Text anwenden
Standardmäßig werden Schatten auf Texte angewendet. Dazu umschließt man die Buchstaben des Textes mit je einem „<span>“-Element. Optional kann jedem dieser Elemente ein Klassenpräfix zugewiesen werden. So hat man die Möglichkeit, per CSS weitere Eigenschaften für bestimmte Schatten festzulegen.
var schatten = new Shine(document.getElementById("ueberschrift"), schatten_konfig, "praefix");
Statt einen Schatten auf einen Text anzuwenden, besteht auch die Möglichkeit, einen Schatten auf ein Element zu legen. Dazu wird als vierter optionaler Parameter für die „Shine()“-Instanz der Wert „boxShadow“ angegeben.
var schatten = new Shine(document.getElementById("ueberschrift"), schatten_konfig, "praefix", "boxShadow");
Der Standardwerte für diesen Parameter ist „textShadow“.
Browsersupport und Lizenz
Shine.js läuft auf allen Browsern, welche die CSS3-Eigenschaften „text-shadow“ und „shadow“ unterstützen. Da alle gängigen Browser diese beiden Eigenschaften bereits seit einigen Versionen unterstützen, kann die Bibliothek gefahrlos eingesetzt werden. Shine.js wird unter der MIT-Lizenz angeboten. Daher kann Sie unentgeltlich für eigene Projekte, egal ob kommerziell oder privat, verwendet und angepasst werden.
(dpe)
4 Antworten
Sicherlich nette Spielerei – aber wie verhält sich die Performance (PageSpeed, SEO) im Vergleich zu CSS und wo ist (außer der Optik) der Vorteil? Ich versuche ja so schon so wenige .js wie möglich zu verwenden …
Schön, dass man das ganze auf einer Demo-Seite bewundern kann. Das hätte ich mir auch für den Artikel http://www.drweb.de/magazin/html5-sprechstunde-mit-der-speech-synthesis-api-48090/ gewünscht
@Torsten: Finde ich auch, CSS funktioniert sauberer als JS. Abgesehen davon glaube ich, dass 3D-Effekte nicht mehr aktuell sind. Ich habe schon vor mehr als einem Jahr alle runden Ecken und Schatten von meiner Website entfernt. Auch hier unter drweb ist das eher nicht eingesetzt. Das Problem ist derzeit, dass viele Webseiten schon viel zu sehr mit JS beladen sind, dass der Seitenaufbau bei nicht schnellster Verbindung ähnlich rupfig ist wie vor fast 20 Jahren die mit Tabellen aufgebauten Seiten.
@felix: Ich denke, das ist immer mit einer gewissen Sichtweise verbunden. Design, speziell von schnell wandelbaren Dingen wie dem Web selbst, hängt immer vom gefühlten Geschmack derjenigen Masse ab, die das Web nutzt bzw. von der vorherrschenden Meinung des Entwicklers/Auftraggebers etc., wie dieser Geschmack derzeit aussehen könnte. Ob runde Ecken nun Mehrwert bringen, sei mal dahin gestellt. Meiner Meinung nach sind Schatten auf Webseiten zwar nicht nötig, wandeln Webseiten aber in ein, für uns Menschen eher fassbares Erlebnis – schließlich ist die “reale” Welt um uns herum geprägt vom Wechsel zwischen Licht und Schatten. Wieso also nicht die Welt des Webs? – Dass Seiten derzeit so stark versetzt mit JavaScript und dazugehörigen Libraries sind, hängt denke ich primär davon ab, dass der Nutzer immer mehr “Live”-Events auf der Clientseite erwartet und es nicht wirklich eine etablierte Alternative zu JavaScript gibt (soweit mir bekannt | man möge mich korrigieren). Alles in Allem bleibt es Spannend, wohin die Reise noch so geht…
Gruss