Schatteneffekte erzeugen – mit Javascript oder CSS3

Schatteneffekte sind eine sehr beliebte und elegante Möglichkeit, um deinem Webdesign aufzupeppen. Eine einfache und gängige Methode, um einen solchen Schattenwurf zu programmieren, ist ein Jquery Javascript-Plugin zu verwenden.

1. Schatteneffekt mit Javascript

Javascript ist Browser-kompatibel, vorausgesetzt Javascript ist nicht deaktiviert. Außerdem ist die Methode sehr leicht zu verwenden.

Lade dir einfach das Jquery-Plugin dropShadow und die neuste Version des Jquery-Library Scripts herunter, und füge den folgenden 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 einfache Methode, um einen Schatteneffekt zu erzeugen bietet CSS3. Leider wird diese Methode im Augenblick nur von den aktuellen Versionen gängiger Browser wie Firefox, Google Chrome, und Safari unterstützt. Eine Ausnahme ist leider, wie könnte es anders sein, der geliebte Internet Explorer ;-).

Der CSS-Code, um einen Schattenwurf um ein Rechteck anzuzeigen, 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 vorstellt, findest du hier bei Nettuts.

Was denkst du über die Verwendung von Schatteneffekten? Kennst du tolle Webseiten, die Schatten einsetzen, oder verwendest du selbst Schatteneffekte auf deiner Webseite?

Schreib doch einfach unten einen Kommentar, ich freue mich auf dein Feedback!

2 Kommentare zu “Schatteneffekte erzeugen – mit Javascript oder CSS3

  1. Hi ,
    die Seite von John Elliot Stocks http://elliotjaystocks.com/ hat so subtile Schatteneffekte bei den Rollovern, ich finde das Spitze und sehr stimmig.

  2. Hi Ellen
    Bin noch relativ neu mit WP unterwegs. Die Schatteneffekte wären natürlich interessant. Woran erkenne ich denn, ob ich CSS3 habe? Ich benutze WP 342. Wo muss ich dann den Code einfügen?
    LG von G aus F an der E ;-)

Hinterlasse einen Kommentar zu Gerscher Antworten abbrechen

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