Reale Schatten mit jQuery

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

Tutorial zur Passwortstärke mit jQuery Der Fall YouPorn hat eindrucksvoll bewiesen, wie simpel Passwörter sind. An der Uni habe ich in einem Kurs echt wilde Dinge gelernt um Systeme zu bela...
FireQuery – jQuery für Firebug Zugegebenermaßen ist jQuery ganz nett, auch die Art & Weise, wie es JavaScript anzeigt und bearbeitet ist ganz nett, aber sobald man ein Prototype...
jQuery & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...
In Place Editing mit jQuery In Place Editing ist das nächste große Ding, aber was heisst das eigentlich? Normalerweise funktionieren die meisten CMS über ein Backend, und ein Fro...

Eine Antwort auf „Reale Schatten mit jQuery“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.