Mit MooTools-Schatten um Rechtecke zeichnen

Um die Schatten zu benutzen, einfach das entsprechende HTML-Element mit CSS-Maßen versehen und eine CSS-Klasse zuweisen.
Diese Klasse können Sie beliebig konfigurieren um z.B. den Schatten zu färben. Anschließend nur noch den JavaScript-Aufruf starten und fertig ist der Schatten.

Es ist natürlich auch möglich das Element mit dem Schatten noch verschiebbar zu machen, dann wirkt der Schatten noch etwas besser

Hinweis: Die Höhe und Breite des Elementes müssen gesetzt werden, außerdem muss es absolut positioniert werden

HTML-Code:

<div class="contentdiv dropShadow">
<p>This is just a box to see whether there is some light to throw a shadow.</p>
</div>

CSS-Code:

.contentdiv {
width: 200px;
height: 150px;
background-color: #ccc;
}

.dropShadowBackground {
background-color: #000;
}

JS-Code:

window.addEvent('domready', function() {
new DynamicDropShadows('*.dropShadow', 'dropShadowBackground');
});

Beispiel:
meine Soffy und ich

Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.