Durchsichtigen Schatten mittels CSS

[Vlled]

Hallo,

ich baue gerade meine erste Website und bin gerade beim Umsetzten meines Designs mittels CSS und HTML. Leider bin ich noch ziemlicher Neuling auf dem Gebiet und kriegs einfach nicht hin.
Mein Problem: Ich will unter meinem Header einen Schlagschatten. Nur wie kriege ich den so hin.

Hier ein Bild, wie es eignetlich aussehen sollte, aus Photoshop:



Und hier ein Bild, wie es gerade aussieht:



mfg
Martin

 

[kleinerVampir]

AW: Durchsichtigen Schatten mittels CSS

Ich gehe mal davon aus, dass du den Schlagschatten im Photoshop hinzugefügt hast und dass dieser dort auch sichtbar ist. Falls dem so ist stellt sich folgende Frage:
Hast du deine Grafiken auch als png gespeichert um die Transparenz zu erhalten ?

 

[CrazyLopp]

AW: Durchsichtigen Schatten mittels CSS

Entweder kannst du es als Grafik lösen, oder mittels CSS3...
Wenn du es als Grafik verwendest können fast alle auch so sehen, bei CSS3 ist es ein wenig anders da sehen es nur diejenigen die den neusten Browser verenden...

In CSS3 ist es mit box-shadow: 0px 0px 15px #000; möglich....

 

[Vlled]

AW: Durchsichtigen Schatten mittels CSS

Hallo,

also ich habe das Bild schon in PNG-24 gespeichert. Es siet so aus, dass oben der verlauf ist , dann die weiße Linie und dann derdurchsichtig werdende Schatten.
Wollte es eigentlich schon mehr als Grafik lösen. Habe noch ein wenig rumprobiert. Kann ich einen Div-Tag über einen anderen legen? Wenn ja wie?

Wollte dann nur den Schatten speichern und über meinen Content-Wrapper einbauen. leider verschiebt sich halt der Content-Wrapper logischer weise nach unten.
Kann man das irgendwie umgehen?

mfg
Martin

 

[sokie]

AW: Durchsichtigen Schatten mittels CSS

über css3 muss man eigentlich nicht reden, wenn man eine Seite erstellen will, die von vielen(möglichst allen) Besuchern korrekt dargestellt werden soll. Microsoft ist zwar am kämpfen den Anschluss zu behalten(zu bekommen) aber bis die Anwender tatsächlich updaten (oder wechseln) wird noch einige Zeit brauchen.
Also muss eine (png)grafik und css her.

leider verschiebt sich halt der Content-Wrapper logischer weise nach unten.
Kann man das irgendwie umgehen?

ja, kannst du. dazu legst du einen eigenen container für den 'schatten' an und positionierst den absolute (top:0;left:0;width:100%) im Content Wrapper(<- dieser braucht dann ein position: relative; )
eine andere Lösung wäre dem nachfolgenden bereich ein negatives Margin-top zu geben.

 

[Vlled]

AW: Durchsichtigen Schatten mittels CSS

Hallo nochmal,

habs gerade hinbekommen. Leider liegt nun der Content wrapper über dem Schatten. Kann ich den Schatten auf die vorderste Ebene hole?

 

[cebito]

AW: Durchsichtigen Schatten mittels CSS

Es ist nunmal so, das nachfolgende Elemente die vorigen überlappen. Du müsstest dem Element, das den Schatten beinhaltet ein position:relative; geben, damit du ihm dann noch einen z-index:1; zuweisen kannst, was das Element dann über dem folgenden positioniert. Es wäre aber, wie immer auch hilfreich, wenn du uns hier nicht nur raten lässt, sondern deine Versuche hier oder noch besser einen Link zu nem Testcase postest.

 

[sokie]

AW: Durchsichtigen Schatten mittels CSS

ausserdem scheint dir nicht aufgefallen zu sein, dass dein Layout für die meissten Bildschirmauflösungen zu breit ist.