Reale Schatten mit jQuery

Screenshot von jQuery Shadows

Schatten gehen ja super mit CSS3, aber zugegebenermaßen muss man etwas Aufwand betreiben um diese realistisch erscheinen zu lassen. Insbesondere wird es dann kompliziert, wenn nicht alle Schatten im gleichen Winkel liegen, sondern der Lichtpunkt irgendwo mitten auf der Seite (so zum Beispiel dem Logo) liegt. Für den Fall müsste man nämlich jedem HTML-Element eine andere Definition des Schattens mitgeben.

Screenshot von jQuery Shadows

Das jQuery Plugin Shadows kocht an der Stelle auch nur mit Wasser und macht nichts anderes als mit CSS3 Schatten auf HTML-Elemente zu packen. Dabei legt es allerdings Wert auf das Stichwort „Real Shadow“ – also einem realistischem Schatten. Das gingt zur Not auch noch selbst mit CSS3 zu machen aber das tolle an dem Plugin ist, das man eine Lichtquelle definieren kann. Von dieser Lichtquelle aus werden die Winkel aller Schatten automatisch berechnet. Dies geht sogar so weit, das die Schatten länger werden, wenn sie sich weiter von der Lichtquelle entfernt befinden.

Um bei obigem Beispiel zu bleiben: man könnte ein Logo als Lichtquelle definieren und so die gesamte Webseite von diesem Element beleuchten lassen. Als Anwendungsbeispiel kann man übrigens auf der Seite ein wenig die Maus bewegen, die Lichtquelle liegt nämlich direkt unter dem Mauszeiger. Entsprechend folgend die Schatten der Maus und auch deren Länge variiert. Eine nette Spielerei für das es bestimmt den einen oder anderen sinnvollen Einsatz gibt.

Ähnliche Beiträge

Initializr – HTML5 Template Generator Nachdem uns derzeit wie blöde Boilerplates um die Ohren geworfen werden stellt sich zu Recht die Frage: welche ist passend für mich, und was mache ich...
knockout.js – was ist es, was kann es? Nicht zuletzt durch ein Tutorial bei tutsplus.com bin ich auf knockout.js aufmerksam geworden. Da inzwischen ein regelrechter Hype um das relative kle...
Webflow – komplettes CSS3 für Seiten online ... CSS3 Online-Editoren gibt es ja einige in der Cloud. Meistens sind diese für spezialisierte Anwendungen wie zum Beispiel Gradients oder Buttons. Will ...
HTML5 & CSS3 – Was funktioniert in welc... HTML5 und CSS3 nähert sich in großen Schritten, und spätestens dann wird sich im Bereich der Webentwickler die Spreu vom Weizen trennen, da beides ebe...

Ein Kommentar

Schreibe einen Kommentar