Ein Artikel von Paul Lunow, erschienen 2008 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

Einbindung

Um in den Genuss dieses wahnsinnigen Effekts zu kommen, wird die aktuelle jQuery Version benötigt (oder das Dimension Plugin), dann die Datei jquery.shadow.js und jquery.shadow.css. Anschließend den Überschriften zuweisen:

$(document).ready(function() {
  $("h3.shadow").shadow();
});

Optionen

Es gibt zwei mögliche Optionen: Die Farbe des Schatten und die zugewiesene Klasse:

$(document).ready(function() {
  $("h3.shadow").shadow({
    class: "meinSchatten",
    color: "red"
  });
});

Arbeitsweise

Das Plugin umschließt das gewählte Element mit einem Div Container (mit der Klasse shadowWrap) und weißt diesem die Höhe des gewählten Elements zu. Anschließend wird das Element kopiert (clone()) und per CSS in den Hintergrund gerückt. Damit der gewünschte Effekt entsteht müssen die Elemente innerhalb des Divs absolut positioniert sein. Das könnte bei verschiedenen Konstrukten zu unerwarteten Ergebnissen führen. Das sollte beachtet werden.

Download

Das Plugin und die CSS Datei gibt es als praktische ZIP Datei!