# Farbverlauf und Schlagschatten um Div



## Teilzeitphilosoph (1. September 2010)

Moinz.
Ich bastel an einer Seite und hab ein Problem...vielleicht hat jemand einen Hinweis für mich. Die Seite ist recht simpel aufgebaut. Im gesamten Hintergrund soll ein Farbverlauf von oben nach unten gehen. Die Seite selbst hat in der Mitte ein Div mit purem Text. 
Jetzt soll das Div links und rechts einen Schatten kriegen. Den Farbverlauf zu basteln war nicht schwer.


```
body		{ text-align: center; background:url("../background.jpg") repeat-x scroll left bottom transparent; margin: 0; }
```

Das jpg fängt oben hell an und wird nach unten hin immer blauer. Klappt.

Aber wie bastelt man fachmännisch einen Schatten links und rechts am Div? Der Schatten soll vom Rand des Divs weg immer heller werden. Bin für Vorschläge offen. 

-bedank-


----------



## Teilzeitphilosoph (1. September 2010)

So, ich hab schon mal das hier gefunden.

http://www.thestyleworks.de/tut-art/shadow.shtml

Sieht ja ganz nett aus aber das Problem ist, dass es nur bei komplett weißem Hintergrund klappt. Das ist nur die halbe Miete, denn der Schatten muss sich dem Farbverlauf anpassen...da ist ein weißer Abstand unschön. ^^


----------



## hela (1. September 2010)

Hallo,

ich habe die Schatten selber noch nicht ausprobiert, aber versuch doch mal für Mozilla-, KHTML- und Opera-Browser die CSS3-Eigenschaften zu verwenden:
CSS3-Generator -> Box Shadow

Für den Internet-Explorer könntest du vielleicht das Shadow-Filter verwenden:
http://mariofink.de/code/css3-box-shadow-fuer-internet-explorer-6-8/

Ob sich das an "den Farbverlauf anpasst" weiß ich nicht, aber eine Rückmeldung von dir wäre prima.


----------



## Teilzeitphilosoph (1. September 2010)

Ich dank dir für den Vorschlag, hab aber was anderes gefunden. Von

http://www.alistapart.com/articles/cssdropshadows/

hab ich mir aus dem Katzenbild den Schatten geklaut. Ja, ich bin kein Vorbild. 
Dann in Photoshop einen Teil von der rechten Seite ausgeschnitten, ein neues Bild mit der Breite meines Divs gemacht und links und rechts den Ausschnitt eingefügt, gespeichert als png und das dann als außen-rum-Div eingebaut, fertig.


----------

