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


Modernizr – HTML5 und CSS3 mit Fallback
Manchmal ist der Teufel ein Eichhörnchen, und scheinbar hat er sich an einem langen Winterabend überlegt, der beste Weg die Menschheit zu quälen wären...


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...


Favicon mit Javascript austauschen
Nach meiner bescheidenen Meinung sind Favicons innerhalb einer Webanwendung die Elemente, denen die wenigste Beachtung geschenkt wird. Ich habe ja sch...


HTML-Tables mit jQuery
Ich hoffe ihr benutzt Tabellen nur noch zur Datenvisualisierung, und nicht mehr für das Design! ;) Aber zumindest dort sind sie unumgänglich. Dummerwe...

Kommentare

Schreibe einen Kommentar

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