Wer mit dem optischen Erscheinungsbild seiner Webseite ein wenig unzufrieden ist und sich denkt, dass selbige eigentlich etwas mehr Pepp vertragen könnte, der sollte mit dem Gedanken spielen, einigen Elementen einen Schattenrand hinzuzufügen. Was ich meine, veranschaulicht die folgende Gegenüberstellung am Beispiel des Contents bzw. Containers oder wie immer Du diesen Div auch bezeichnen magst:
Auch Friedhelm von meiner Partnerseite hat so seiner CSS-Fundgrube ein neues Aussehen verpasst www.ohne-css.gehts-gar.net.
Öffne in PI eine neue Leinwand in der Breite Deines Contents zuzüglich ca. 30 Pixel für den Schatteneffekt (Beispiel: 670px + 30px = 700px). Als Farbe wähle die Farbe Deines Webhintergrundes.
Mit Hilfe des Pfad-Zeichenwerkzeuges ziehst Du nun darauf ein Rechteck in der Farbe sowie Breite (width) Deines Contents auf (Beispiel ausgehend von oben: 670px) .
Vollziehe auf das aktivierte Pfadobjekt einen Rechtsklick und wähle aus dem Kontextmenü 'Schatten...'.
Setze das Häkchen vor "Schatten", wähle den Rundumschatten und spiele mit den Einstellungen. Über die verschiedenen Einstellungen für Transparenz, Schattengöße und Vignette legst Du Stärke und Tiefe des Content-Schattens fest.
Zentriere dieses Rechteck, indem Du auf das aktivierte Pfadobjekt einen Rechtsklick vollziehst und aus dem Kontextmenü zunächst "Ausrichten" und sodann "Mitte" wählst.
Wechsele zum Zuschneidewerkzeug und schneide aus dem Leinwand-Hintergrund und dem "beschatteten" Pfadobjekt einen dünnen Streifen so zu, dass der obere sowie der untere Schatten verschwinden. WICHTIG: Achte sorgfältig darauf, dass Du die komplette Gesamtbreite der Leinwand (Beispiel 700px) ausschneidest und Du lediglich ein Stück aus der Mitte, also ohne den oberen und ohne den unteren Rand, verwendest, denn nur dadurch erreichst Du einen harmonischen Übergang zu Deinem Webseitenhintergrund.
Der Streifen könnte sogar noch dünner sein als auf dem folgenden Screenshot zu sehen:
Binde jetzt alles ein und speichere die Grafik im gif-Format ab.
Baue die Grafik als Hintergrundbild für Deinen Content-Div ein. Wie das geht, erklärt Friedhelm zum Thema "Schatten-Boxen" auf seiner CSS-Fundgrube!
Hast Du einen Content-Div, der sich wie in diesem Beispiel durch mehrere Farben auszeichnet,
so kannst Du natürlich nicht mit der oben angefertigten Schattenrandgrafik arbeiten. Nach der oben erklärten Methode müsstest Du eine entsprechend bunte Schattenrandgrafik anfertigen, die genau die gleiche Höhe hat wie Dein Content-Div. Blöde nur, wenn Du dann später einen Absatz in den Div einfügst.
Aber auch hierfür gibt es natürlich eine Lösung in PI: Du musst nur in der wie oben angefertigten Schattenrandgrafik den farbigen Mittelteil transparent machen! Also:
Fertige gemäß der obigen Anleitung eine Schattenrandgrafik, wobei es unerheblich ist, welche Farbe Du dem rechteckigen Pfadobjekt gibst. Wenn Du an dem Punkt mit dem Abspeichern angelangt bist, so ACHTUNG:
Deaktiviere das Pfadobjekt und gehe in der Menüleiste auf "Web", sodann wie gewohnt auf "Bildoptimierer". Wechsele dort auf die Karteikarte "Maskenoptionen" und wähle "Farbe wählen".
Achte darauf, dass unten links die Option "Transparenz" aktiviert ist und klicke sodann auf das Icon für die Pipette.
Um die Farbe auszuwählen, die durch eine Transparenz ersetzt werden soll, klicke im linken(!) Vorschaubild auf den farbigen Bereich Deines Pfadobjektes (Bild 1) - sogleich wird der fragliche Bereich transparent. Was Du jetzt im rechten Vorschaubild siehst, ist die Schattengrafik (Bild 2), die Du nun wie gewohnt als gif-Datei über die Karteikarte "Gif-Optionen" abspeicherst:
Bild 1 
Bild 2
Und so sieht die Schattengrafik mit transparentem Mittelteil aus, die Ihr nun als Hintergrundbild für Euren mehrfarbigen Content-Div einbauen könnt:
