Das Problem mit den Schatten

[Patrick 123]

Hallo Leute,
ich habe folgendes Problem:
ich würde um ein bild gern einen weichen schlagschatten legen und suche dafür einen code der auf älteren und neueren browsern funktioniert.
Der CSS3 Boxshadow (box-shadow:3px 3px 10px #333333) wird z.b. bei IE und anderen nicht angezeigt.

Folgenden Code habe ich gefunden, funktioniert auch aber gibt es da nicht etwas kürzeres? ist doch schon sehr umständlich...vielen dank für eure hilfe!
Patrick

im CSS:

DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {
   padding: 1px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   }
DIV.shadow5:hover DIV.shadow,
DIV.shadow5:hover DIV.shadow2,
DIV.shadow5:hover DIV.shadow3,
DIV.shadow5:hover DIV.shadow4,
DIV.shadow5:hover {
   padding: 0;
   border-radius: 5px;
   -moz-border-radius: 5px;
   }
DIV.shadow {
   background-color: #8e8e8e;
   border: 1px solid #959595;
   margin: 0px;
   }
DIV.shadow2 {
   background-color: #aaa;
   border: 1px solid #bebebe;
   margin: 0;
   }
DIV.shadow3 {
   background-color: #d1d1d1;
   border: 1px solid #e1e1e1;
   margin: 0;
   }
DIV.shadow4 {
   background-color: #ededed;
   border: 1px solid #f6f6f6;
   margin: 0;
   }
DIV.shadow5 {
   float: left;
   background-color: #fcfcfc;
   border: 1px solid transparent;
   margin: 10px 14px;
   }
DIV.shadow5:hover {
   border-width: 5px;
   }

DIV.shadow5 IMG {
   border: 0px solid #666;
   margin: -2px;
   display:block;
   position: relative;
   top: -3px;
   left: -3px;
   -moz-opacity:0.67;
   }
DIV.shadow5:hover IMG {
   margin: -1px;
   top: -1px;
   left: -1px;
   -moz-opacity:1;
   }

IM HTML-Body:

<div class="shadow5"><div
 class="shadow4"><div
 class="shadow3"><div
 class="shadow2">
  <div
 class="shadow"><img class="bilder"src="BILD.jpg" width="200" height="200" />
  </div></div></div></div></div>

[Metalgurke]

Hi Patrick 123,

Folgenden Code habe ich gefunden, funktioniert auch aber gibt es da nicht etwas kürzeres? ist doch schon sehr umständlich...vielen dank für eure hilfe!

Eine weitere Möglichkeit wäre ein halbtransparentes Schlagschatten-Hintergrundbild (bspw. PNG). Für den IE6 gibt es dbzgl.(PNG Problematik) etliche Bugfix-Möglichkeiten.

Gruß Metalgurke

[suit]

Eine weitere Möglichkeit wäre ein halbtransparentes Schlagschatten-Hintergrundbild (bspw. PNG). Für den IE6 gibt es dbzgl.(PNG Problematik) etliche Bugfix-Möglichkeiten.

Was ist mit rgba()? Und wer braucht den IE6? Der Browser ist mittlerweile wirklich ziemlich tot.

[patrick123]

hmm...kann ich denn auch das mit dem Filter für IE und den Boxshadow für resstliche browser definieren?
oder funktioniert der dann nicht mehr?
wenn ja, in welcher reihenfolge gebe ich das an, zuerst das, was vielleicht nicht, dann das was sicher funktioniert (wie bei Schriftarten)?
danke euch!

[suit]

hmm...kann ich denn auch das mit dem Filter für IE und den Boxshadow für resstliche browser definieren?
oder funktioniert der dann nicht mehr?

Die Internet-Explorer Filter streiken teilweise, wenn man andere Workarounds verwendet - z.B. funktioniert ein Gradient + Schatten nicht gleichzeitig mit runden Ecken per VML usw. Aber das betrifft nur alte Browser - und wenn im Internet Exlorer 6 mit ~ 2 % Marktanteil mal irgendwas fehlt, sollte das wurst sein.

wenn ja, in welcher reihenfolge gebe ich das an, zuerst das, was vielleicht nicht, dann das was sicher funktioniert (wie bei Schriftarten)?
danke euch!

Herstellerspezifsche Eigenschaften
CSS-Eigenschafen
IE-Filter

also etwa so:

-moz-box-shadow
-box-shadow
filter:DropShadow

[blhr]

ich habe folgendes Problem:
Der CSS3 Boxshadow (box-shadow:3px 3px 10px #333333) wird z.b. bei IE und anderen nicht angezeigt.

doch - natürlich erst ab IE9, und das restliche lumpenpack muss mit prefixen gefüttert werden, aber ich würde dennoch auf css3 schatten setze ehe ich die divsuppe da löffeln muss. wer mit ie<9 unterwegs ist, ist eh nicht besseres gewohnt und braucht es wohl auch nicht. netscape5 berücksichtigst du ja schließlich auch nicht udn schatten sind so oder so nicht wirklich wichtig.

[dave]

Hi,

Der CSS3 Boxshadow (box-shadow:3px 3px 10px #333333) wird z.b. bei IE und anderen nicht angezeigt.

Falls dir der IE so wichtig ist könntest du probieren ob du mit filter:DropShadow oder filter:Shadow zufrieden bist.

~dave