Hi 
!
Ich hätte mal ne Frage: und zwar möchte ich bei meiner Seite einen Schatten rund um den Inhalt machen. Ich hab das mal zur bessern Verständlichkeit in einem Bild eingefügt.
Nur hab ich selbst keinen Plan wie ich das in CSS machen sollte. Hab mir zwar schon ein paar tuts durchgelesen aber nie so wirklich durchgeblickt…
es handelt sich dabei um diese seite
also wär super wenn wir dabei wer helfen kann.
mfg
Wie meinst du des? 
Ich hab ja schon einen grünen border. Gibts es eine CSS Eigenschaft für Schatten?
[quote=„aschachinger“]Wie meinst du des?
Ich hab ja schon einen grünen border. Gibts es eine CSS Eigenschaft für Schatten?[/quote]
jep, … des gibbet 
du guckst --> thestyleworks.de/tut-art/shadow.shtml
lg susi
Das hab ich mir schon durchgelesen. Das ist aber nicht so wie ich es haben möchte, weil dort der Schatten nicht transparent ist und ich ihn eigentlihc auch nicht wirklcih schön finde. Ich möchte es eben genau so haben wie ich es in dem Screenshoot eingefügt habe (Schlagschten - PS).
Im bplaced Forum ist es ja ähnlich gemacht. dort ist auch am oberen Rand des Boards ein Schatten der ein Transparenz hat. Nur möchte ich meinen Schatten eben nicht nur oben sondern so wie ich es im Screenshot dargestellt habe.
mfg
das ist nur ein einfaches Bild 
(mit transparenten bildern könntest du das auch umsetzen )
Ja ich weiß ,dass das nur ein einfaches Bild ist. Der Unterschied zu meiner Seite ist jedoch, dass der Hintergrund in der Höhe flexibel sein muss.
Und ich weiß eben nicht wie man das mit ein paar transparnten Bildern macht.
mfg
[quote]jep, … des gibbet 
du guckst --> thestyleworks.de/tut-art/shadow.shtml
[/quote]
…das gibt es nicht…
jedenfalls gibt es noch keine Eigenschaft mit der man das ohne umwege machen kann!
5 verschiedene div’s zu machen, welchen ich eine hintergrundfarbe gebe, damit es so aussieht als ob da ein Schatten ist, ist nicht unbedingt die schlauste Lösung!
Wie gesagt:
Näher kommt man der Schattenimitation wenn man ein Bild verwendet, das an das div drangehängt wird oder sich im Hintergrund befindet.
Beispiel hier:
Die Hintergrundgrafik ist bereits der Schatten!
Ob man transparenz verwendet oder nicht, bleibt einem selbst überlassen… ich habs gemacht…bei meiner Seite–> Hier
Wenn die Höhe flexibel sein soll, lass doch das Hintergrundbild einfach wiederholen:
.div{
background-repeat: repeat;
}
Interessant ist es auch, wenn man den Schatten nicht alsfliessenden Übergang gestaltet, sondern mit border macht:
.div{
border-bottom: 5px solid gray;
border-right: 5px solid gray;
}
Welche Methode schöner/eleganter ist, bleibt umstritten, da man ja auch Grafiken im browser deaktiviert haben kann und zu viele Grafken die Seite meist unübersichtlich machen!
Gruß Der Imperator
Das kann man mit zwei ineinander verschachtelten Elementen
erreichen, von denen das innere leicht verschoben relativ
positioniert wird.
Wenn man da einen teiltransparenten Schatten braucht, so kann
man dem äußeren der beiden Elemente entweder ein
teiltransparentes PNG (oder SVG, geht dann aber aktuell nur bei
Opera, andere browser haben da derzeit noch einen Fehler in der
CSS-Interpretation).
Die einfache PNG-Variante liefert einen scharfen Schattenrand,
mit der SVG-Variante kann man mit einigen Tricks auch diverse
Verläufe hinbekommen.
Ich meine, bei den Geckos gibt es inzwischen auch Testversionen,
wo man ausprobieren kann, SVG-Farbverläufe auf
(X)HTML-Elemente anzuwenden, damit könnte man dann
ähnliche weichere Effekte erreichen, ist aber noch nicht
ausgereift und komplett spezifiziert.
Also wenn ich das richtig verstanden habe muss ich 2 PNGs mit dem Schatten machen und die dann hinter dem div postionieren.
Kann ich es dan genau so hinbekommen wie auf dem obigen bild von mir?
Und funktionierd das dann auch in den meisten Browsern?
Moin,
kurze Form: ja, bestimmt, ja wahrscheinlich (definitionsabhängig).
Lange Form:
Ja, du musst die DIVs so positionieren. Ein anderer Weg wäre das Design in PS/GIMP zu erstellen inkl. Schatten, den Schatten zu slicen und für die Schatten 3 DIVs anzulegen (einer für die Seite, 1 für unten und 1 für die Ecke) und dort den geslicten Schatten als Hintergrundbild zu hinterlegen. Da man Hintergrundbilder auch nach unten, links/rechts wiederholen lassen kann, dürfte der sich der Ladeaufwand der Seite etwas verringern, da 1px Höhe ausreichen sollten beim Slicen.
Wenn man will, kriegt man so ziemlich alles hin - also auch so wie auf dem Bild da. Ein einfachen Schlagschatten hinzukriegen sollte net unmöglich sein.
Die Frage, ob es in den meisten Browsern, funktioniert, lässt sich nur beantworten, wenn man weiss wie “meisten” definiert ist. Außerdem hängt es von deiner Umsetzung ab, daher können wir bisher nichts weiter dazu sagen. Der Validator vom W3C hilft auf jeden Fall weiter Einzig die IE-Versionen bleiben dann noch übrig und vllt. ein paar alte Netscape-Krücken, die man m.M.n. mittlerweile eh ignoriert
MfG
myPages
Wenn man die CSS3-Eigenschaft opacity verwendet, braucht man
gar kein PNG, funktioniert aber nur bei neueren browsern, keine
Ahnung aber, ob es auch bei einer aktuellen Version vom MSIE
funktioniert.
Die Alternative mit einem teiltransparenten PNG braucht nur
ein PNG-Bild, selbst wenn man einen verschmierten Schatten
realisieren will, aufwendiger wird es erst, wenn der Schatten
auch noch ‘abgerundete Ecken’ bekommen soll, da ist die
gesamte Konstruktion komplizierter.
Teiltransparente PNGs funktionieren nicht bei antiken browsern,
also Netscape4 kann es nicht, MSIE6 auch nicht.
Da kann man dann bei etwas größeren Flächen improvisieren.
Statt eines 1-Pixel treiltransparenten PNGs kann man da ein
PNG oder GIF verwenden, wo exakt ein Kanal komplett transparent
ist. Das Bild besteht dann aus vier Pixel, zwei diagonale sind dann
transparent, die beiden anderen sind dann je nach Hintergrund
grau oder schwarz.
Also so wie ich das jetzt verstanden habe würde das mit den pngs am besten funktionieren…
Wie funktionierd das mit dem slicen? Ich hab das noch nie gemacht…Also ich mach bei meinen Seiten immer alles einzeln und setz es dann zusammen.
Kann mir das mal wer erklären wie ich das mit den 3divs und den pngs dan genau machen muss.
Lassen sich mit den pngs runde Ecken beim Schatten realisieren? Weil der ps Schlagschatten hat die ja schon!
mfg
Moin,
PNG ist ja nur ein Bildformat, ähnlich wie JPEG. Vorteile von PNG sind aber die Verlustfreiheit (besitzt JPEG auch) und vorallem die Transparenzunterstützung. Der Support von den Webbrowsern ist natürlich auch wichtig für Webentwickler.
Im Prinzip ist slicen genau das, was du machst, nur andersrum. Man erstellt zunächst das Design und zerlegt / zerschneidet es dann in einzelne, kleine Stücke. mehr dazu
Welchen Weg du nimmst, bleibt dir vorbehalten und im Endeffekt sieht es meistens eh gleich aus
Die Grundstruktur:
|Webseite...................|Schatten1|
|Schatten2.................|Schatten3|Dazu würde ich darum noch ein DIV packen, um das Ganze leichter z.B. mittig positionieren zu können, d.h. du brauchst 4 DIVs, wobei sich jeweils zwei umfliessen. float hilft hier weiter.
Schatten1-3 sind die DIVs für die Schattenbilder. Schatten1 = vertikal, Wiederholung von oben nach unten; Schatten2 = horizontal, Wiederholung von links nach rechts; Schatten3 = die runde Ecke, keine Wiederholung.
Schatten1 ist dabei gleich breit wie Schatten3 und Schatten3 genauso hoch wie Schatten2.
MfG
myPages
Mittlerweile bin ich dem ganzen schon um einiges näher gekommen! 
Ich habe es jetzt mit 3 PNGs gelöst: das Erste für die linke ober Ecke, das Zweite für den linken Rand, und das Dritte für das linke Eck, für den untern Rand und das Rechte Eck (weil die width ja immer gleich bleibt).
Mein einziges Problem ist, wie ich den div für die linke Seite so lang wie den Inhalts div mache.
Ich habe das ganze so aufgebaut:
[code]
Weiß irgendwer wie ich s2 veränder muss damit ich die richtige höhe bekomme?
Moin,
äh ja … heut morgen fällt mir auf, dass es einfacher geht
Und zwar folgendermaßen:
|DIV1-----------------------|
||Webseite----------------|.|
|Ende DIV1------------------|
|Schatten unten----------|E|Okay, sieht erstmal konfus aus, ist es aber net unbedingt. Der Trick für die Höhe des rechten Schattens liegt dabei in einem DIV, dass das Webseite-DIV enthält. Das Webseiten-DIV nimmt aber nur 90% (oder irgendeine Angabe) der Breite vom Ursprungsdiv an. Als Hintergrundbild für das Ursprungsdiv nehmen wir dann den rechten Schatten. Da die Webseite zwangsläufig nun die Höhe festlegt, verändert sich auch die Höhe von DIV1. Über die CSS Eigenschaften für den Hintergrund können wir ohne Probleme unseren Schatten festlegen
Codetechnisch würde das so ungefähr aussehen:
<div id="div1">
<div id="webseite"></div>
</div>
<div id="schatten_unten"></div>
<div id="schatten_ecke"></div>Na ja, ob das eine optimale Lösung darstellt, dürfte wohl Ansichtssache sein, immerhin sollte es funktionieren background-position dürfte für dich und div1 noch interessant sein.
Die Positionierung von schatten_unten und schatten_ecke dürfte wohl jetzt das größte Problem darstellen. Aber im Prinzip brauchst du bei dir nur dafür zu sorgen, dass s2 den wrapper beinhaltet und die geeigneten Maße bekommt - wie oben angedeutet.
MfG
myPages
du könntest die Codes von div. phpBB3-Designs klauen, bei denen die Ecken abgerundet sind
Ich hab ja schon runde Ecken!
Es geht nur darum wie ich den linken Schatten bis zur Ecke links unten “hinunterziehen” kann.
Das geht nur mit ein paar Tricks…
am Einfachsten dürfte es wohl sein einen main-container rundherum zu machen, dann sollte man die höhe auf 100% setzen können (hab ich noch nie gebraucht, also keine Garantie)
[quote=“aschachinger”]Ich hab ja schon runde Ecken!
Es geht nur darum wie ich den linken Schatten bis zur Ecke links unten “hinunterziehen” kann.[/quote]
hab ich schon beschrieben … s.o.
MfG
