Antworten auf deine Fragen:
Neues Thema erstellen

Durchsichtigen Schatten mittels CSS

Vlled

Nicht mehr ganz neu hier

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

Aktives Mitglied

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

Hat es drauf

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

Nicht mehr ganz neu hier

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

Mod | Web

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.
 
Zuletzt bearbeitet:

Vlled

Nicht mehr ganz neu hier

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

undefined

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

Mod | Web

AW: Durchsichtigen Schatten mittels CSS

ausserdem scheint dir nicht aufgefallen zu sein, dass dein Layout für die meissten Bildschirmauflösungen zu breit ist.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben