Besser als pures CSS3: realistische, komplexe Schatten mit Shine.js

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)