einfach persoenlich Weblog

Droped Shadows - Bilder-Schatten mit CSS simuliert

05.10.2005 | CSS | 19 Kommentare | Print

Bilder mit einem automatisch generierten Schattenwurf stehen immer noch hoch im Kurs. Bedingt durch eine Safari-Bug fand ich zufällig bei meinem Redesign eine Lösung, die mit purer CSS auskommt und somit zusätzliche Bilder überflüssig macht.

Bilder mit automatischem CSS-Schatten haben in den letzten Jahren zu den unterschiedlichsten Artikeln und Veröffentlichungen inspiriert und Anlass gegeben. So war auch für mich neben anderen die Veröffentlichung von CSS Drop Shadows Inspiration und Anregung für die Bilder-Schatten. Ursprünglich war es nicht meine Absicht, diesen keinen weiteren Artikel hinzuzufügen. Zuschriften von Lesern belegen aber immer wieder, dass das Interesse an solchen Lösungen ungebrochen scheint.

Ausgangspunkt: ein Safari-Bug

Doch nach der Anschaffung meines iMac sah ich in der neuen Safari-Version 2.0 einen Bug, der mir gar nicht gefallen wollte. Auf der rechten Seite des Bildes zeigte sich ein zusätzlicher weißer Streifen. Der eigentlichen Ursache bin ich schlussendlich nicht auf den Grund gegangen. Im Rahmen des Redesigns hatte ich eine Idee, die auf die Grundidee abwandelte und ganz auf CSS setzt.

Feedback verfeinert Lösung

Im Eifer des Gefechtes war mir trotz aller Tests ein Detail aus dem Fokus geraten. Das Feedback von Robert zu diesem Thema machte mich nicht nur auf einen IE-Bug aufmerksam. Dank seinem Hinweis konnte ich die Lösungsmöglichkeit noch weiter verfeinern. Dieser Beitrag soll diesen kleinen Code-Schnipsel nun einfach vorstellen, einem Praxistest unterziehen und zur Diskussion stellen.

Grundidee: einfach vereinfachen

Ausgangspunkt war der Gedanke, den Perfektionsanspruch der Lösung zugunsten einer einfachen ballastfreien schlanken CSS-Lösung zurückzustellen. Statt zusätzliche Grafiken einzusetzen verwende ich einen hellen CSS-Schatten, der bewusst ohne Gradient in der Darstellung auskommen muss.

1. <p class="ii r">
   <img src="http://domain.de/bild.jpg" alt="" /></p>

Kompatibel sollte die Lösung sein, einfach zu ändern per CSS. In meinem Weblog trägt jeder beliebiger Movable Type Beitrag ggf. auch den Bildcode. So wird er in einen Absatz eingebettet, der mit einer CSS-Anweisung den eigentlichen Bildschatten simuliert.

1. * {
2. margin:0;
3. padding:0;
4. }
5. #content .ii{
6. margin-left:4px;
7. float:left;
8. background:#efefef;
9. }
10. #content .ii img{
11. position:relative;
12. top:-4px;
13. left:-4px;
14. background:#fff;
15. padding:4px;
16. border:1px solid #ccc;
17. }
18. #content .r{
19. margin:8px 0 10px 10px;
20. float:right;
21. }

Wer die Lösungen vergleicht, erkennt schnell das gleiche Grundmuster. Statt der Zusatzgrafik dient einfach ein hellgrauer Hintergrund. So einfach die Lösung zu Beginn war, sie stellte sich als trügerisch heraus.

Robert Hartl machte mich darauf aufmerksam, dass der IE mal wieder aus der Reihe tanzte. Er stellte den Schatten ohne Versatz dar. Die Lösung für den IE lag näher als vermutet.

1. position:relative;

Die relative Positionierung des Bildes überredet den IE verbunden mit einer Anpassung der damals existenten margin-Anweisung die Bilder wie erwünscht darzustellen.

Fazit

Die beschriebene Variante steht derzeit im praktischen Test hier im Weblog. Aus Zeitgründen habe ich einen kompletten (modernen) Cross-Browser-Vergleich noch nicht abgeschlossen. Bereits gesehen und getestet im:

• Internet Explorer 6 Win, Firefox 1.03 Win, Opera 8.02 Win, Netscape 7.02, Avant Browser 10 Win, Slimbrowser 4.00 Win
• Firefox 1.04 Mac, Safari 2.0, Camino 0.9, Opera 8.5 Mac

Robert hat den Internet Explorer 5 getestet.

Alle hilfreichen Tests, Hinweise und Anregungen rund um die Alltagstauglichkeit dieser Detail-Lösung sind herzlich willkommen und ausdrücklich erwünscht. Ob Anregung, Idee zum Weiterdenken oder einfach nur Interesse am Nachnutzen – jeder mag es nehmen wie er es mag.