Schatten als Hintergrund

[dula]

Hallo,

es geht um folgendes. Ich habe momentan ein Template was ich umsetzen will, nur macht mir der Schatten zu schaffen. Es ist eig. nichts aufregendes, ich habe mein Content Div und um dies will ich ein Schatten erzeugen.

Im Photoshop versuch ich schon mehrere Varianten um ein guten Schatten hin zu bekommen, dies klappt allerdings nciht so wie ich will. Wenn dann ab und an doch mal etwas raus kommt was wie schatten aussieht und ich diese dann als Background festlege, ist dieser dann allerdings oben gerade und sieht einfach nur Mist aus..

Er müsste eigentlichen Weiche Kanten haben, allerdings ist er bei mir einfach nur gerade.

Wenn ich das ganze mit box-shadow mache sieht es so aus wie ich es gerne hätte, allerdings soll das nicht die Lösung sein.

Hat jemand eine Ratschlag für mich?

lg

[gelöschter User]

Ferndiagnosen finde ich immer schwierig, kannst du nicht ein Beispiel hochladen, bei dem man in etwa sieht wo du den Schatten haben willst?

[blindguard]

hy dula,
willkommen im Photoshop Cafe.

stehe im moment auch auf dem schlauch, wo genau das problem ist.

gruß
volker

[Photron]

Du brauchst zwei div's. In meinem Beipsiel das Äußere 900px breit, das Innere 800px.

Du machst bei dem Äußeren so einen Schatten als Hintergrund:



und das Innere kommt da zentriert hinein.

PHP-Code:

#aussen{
   width:900px;
   background:schatten.jpg repeat-y center;
}

#innen{
  width:800px;
  margin:auto;
} 


<div id="aussen">
   <div id="innen">
   Lauter toller Content...
   </div>
</div>

Falls Deine Seite nicht bis zum "Boden" reicht, musst Du am ende noch ein div mit einem Anschlussbild anhängen.

Mit CSS3 gehen Schatten wesentlich einfacher, aber manche Browser zicken da ein wenig rum (*unschuldiger_blick_richtung_microsoft*)

[heikehk]

Warum ist denn box-shadow nicht die lösung.
Ich hab das jetzt bei einem aktuellen projekt gemacht und finde die lösung sehr schön.
Die alten browser müssen eben auf den schatten verzichten...
Macht ja keine fehler, wenns der browser nicht nutzt. Nur der w3c check funzt nicht

[dula]

Vielen Dank erstmal für die schnellen Antworten.

box-shadow ist zwar eine Lösung, allerdings wird er glaube schon ab ie8 oder ie7 nicht unterstütz. Somit haben Leute die den ie verwenden keinen Schatten, des wegen die Lösung mit den Bild.

Ich versuch mal ein Bild hoch zu laden damit ihr seht was ich meine.

http://imageshack.us/f/651/unbenanntikw.png/

[heikehk]

Du kannst ja mal schauen, ob Dir YAML zusagt. Da gibt es eine Version, in der Schatten schon in der YAML-Vorlage drin sind. Muss man sich aber mit CSS und HTML schon beschäftigen und sich mit der Vorlage auseinandersetzen.
Wenn man den Aufbau begriffen hat, kann man leicht fast jedes Layput umstetzen.

[dula]

Was ist YAML ?

[heikehk]

Yet Another Multicolumn Layout


Allerdings musst du Dich da einarbeiten und mit CSS auskennen.
Der Nachteil ist, dass Du viel Ballast mitnimmst, den Du vielleicht nicht unbedingt brauchst, aber es gibt auch eine Light Version und einen Generator.

schaus Dir unter www.yaml.de einfach mal an.

[phoenix]

Ich würde in jeder professionellen Webpräsenz sowohl auf box-shadow (weil nicht valide) als auch YAML (der PageSpeed dankts Dir) verzichten. Photrons Lösung ist meiner Meinung nach zu bevorzugen.