Bild mit CSS3-Eigenschaft box-shadow erzeugen

Mit Hilfe der CSS3-Eigenschaft box-shadow kann man beeindruckende grafische Creationen erzeugen. Kern dieser grafischen Werke ist die Tatsache, dass box-shadow mehrere Schatten haben kann.

Doch langsam, nähern wir uns der Angelegenheit Schritt für Schritt. Dieser Code

<style>
#bs01 {
width:50px;
height:50px;
background-color:#fff;
box-shadow:2px 2px 1px 0px rgba(255,0,0,1.0);
</style>
<div id="bs01">
</div>

erzeugt eine 50x50 px große Box, die rechts und unten einen 2 Pixel dicken roten Rahmen hat.

Weitere Schatten kann man, vom ersten durch ein Komma getrennt, hinzufügen:

box-shadow:1px 1px 2px 0px rgba(255,0,0,1.0),2px 1px 2px 0px rgba(0,0,255,1.0);

Bei der Anwendung von box-shadow muss man beachten, dass dieser Schatten die Größe der Box selbst nicht beeinflusst.

Bei solchen Kreationen darf der div-Bereich selbst keine Ausdehnung haben.






Einige interessante Tricks zu box-shadow findet man auf http://css-tricks.com/snippets/css/css-box-shadow/. Bei einfachen Anwendungen lässt sich, so wird dort gezeigt, auch eine Alternative für ältere Versionen des Internet Explorer gestalten. Ansonsten wird box-shadow durch alle modernen Browser unterstützt:

  • Internet Explorer ab Version 9
  • Firefox ab Version 3.5 mit -moz-Präfix, Version 4.0 ohne Präfix
  • Chrmoe mindestens ab Version 4.0 mit Präfix -webkit, ab Version 10.0 ohne Präfix.
  • weitere Details:http://caniuse.com/#feat=css-boxshadow

Um aus einer PNG-Datei ein CSS-Bild zu erzeugen siehe das kleine PHP-Programm Image2CSS.