Schatteneffekte sind eine sehr beliebte und ele­gante Möglichkeit, um deinem Webdesign auf­zu­peppen. Eine ein­fache und gän­gige Methode, um einen sol­chen Schattenwurf zu pro­gram­mieren, ist ein Jquery Javascript-Plugin zu ver­wenden.

1. Schatteneffekt mit Javascript

Javascript ist Browser-kompatibel, vor­aus­ge­setzt Javascript ist nicht deak­ti­viert. Außerdem ist die Methode sehr leicht zu verwenden.

Lade dir ein­fach das Jquery-Plugin drop­Shadow und die neuste Version des Jquery-Library Scripts her­unter, und füge den fol­genden Code ein.

<script type="text/javascript" src="http://DEINEDOMAIN.de/js/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.dropShadow.js"></script> <script type="text/javascript"> $(function(){ $('.box').dropShadow({ left: 7, top: 7, opacity: 1.0, color: 'black' }); }); </script> <div class="box"> <!--deinen Inhalt hier --> </div>

2. Schatteneffekt mit CSS3

Eine super ein­fache Methode, um einen Schatteneffekt zu erzeugen bietet CSS3. Leider wird diese Methode im Augenblick nur von den aktu­ellen Versionen gän­giger Browser wie Firefox, Google Chrome, und Safari unter­stützt. Eine Ausnahme ist leider, wie könnte es anders sein, der geliebte Internet Explorer ;-).

Der CSS-Code, um einen Schattenwurf um ein Rechteck anzu­zeigen, sieht dann im CSS Style Sheet so aus:

<style type="text/css">
.box { box-shadow: 7px 7px 5px black; -moz-box-shadow: 7px 7px 5px black; -webkit-box-shadow: 5px 5px 3px black; }
</style>
<div class="box">
  <!--deinen Inhalt hier-->
</div>

Einen tollen Artikel, der etliche neue Methoden von CSS3 vor­stellt, fin­dest du hier bei Nettuts.

Was denkst du über die Verwendung von Schatteneffekten? Kennst du tolle Webseiten, die Schatten ein­setzen, oder ver­wen­dest du selbst Schatteneffekte auf deiner Webseite?

Schreib doch ein­fach unten einen Kommentar, ich freue mich auf dein Feedback!