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.