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

TinyMCE in Version 3.2.2 veröffentlicht 4 Monate hat es gedauert, aber nun ist sie da, die neue Version von TinyMCE. Stellt sich nur die Frage, was eigentlich neu ist. Zunächst einmal ist zu...
Neue CSS3 Snippets für die heimische Werkbank Ich habe ja letztens erst über PHP Snippets berichtet und Methoden zu deren Verwaltung. Zumindest bei letzterem bin ich seitdem weder schlauer geworde...
Animierte Sprites in jQuery ohne Flash Ich gebe zu das ich ein echter Fan von vektorbasierenden Blog-Headern bin. Noch cooler wäre es allerdings, wenn die Teile animiert wären, dafür gäbe e...
jQuery Boilerplate – jQuery Plugins für Dumm... Im Bereich der Webentwicklung bewegen wir uns derzeit in einem Bereich, in dem Code nicht nur funktionieren, sondern auch wiederverwendbar sein muss. ...

Ein Kommentar

Schreibe einen Kommentar