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

Cached Commons – CDN für JavaScript und CSS Neuerdings lädt man ja Javascript nicht mehr vom eigenen Server, sondern verwendet die Google Libraries API, das ist zwar ganz nett, aber der Dienst b...
Notifier für Benutzer-Nachrichten in jQuery Jede halbwegs vernünftige Community-Software oder Internet-Anwendung braucht ein Nachrichten-System, um demjenigen angemeldeten Benutzer, der gerade a...
Glimmer – der Editor für jQuery Animationen jQuery Animationen sind eine lustige Sache, lustig deshalb, weil man mehr als „Einblenden“ und „Ausblenden“ im Web nicht zu Gesicht bekommt. Soll eine...
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...

Ein Kommentar

Schreibe einen Kommentar