Photoshop-Cafe.de :: Dein Photoshop-Forum

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)
-   Hilfestellung, Tipps und Tricks (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=30)
-   -   Web-Design Schatten als Hintergrund (https://www.photoshop-cafe.de/forum/showthread.php?t=15334)

dula 18.04.12 16:56

Schatten als Hintergrund
 
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 18.04.12 17:31

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

blindguard 18.04.12 18:10

hy dula,
willkommen im Photoshop Cafe.

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

gruß
volker

Photron 18.04.12 20:46

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:

https://www.photoshop-cafe.de/bildupload/pics/sonst/1334774248_shadow.jpg

und das Innere kommt da zentriert hinein.


PHP-Code:

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

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


HTML-Code:

<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 19.04.12 08:51

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 19.04.12 12:25

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 19.04.12 13:41

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 20.04.12 18:49

Was ist YAML ?

heikehk 20.04.12 19:18

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 26.04.12 18:47

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:23 Uhr.

Powered by vBulletin® Version 3.8.7 (Deutsch)
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
©2005-2024 photoshop-cafe.de

Seite wurde generiert in 0,01989 Sekunden mit 8 Queries