Schlagschatten für Webseite
0 0 0 0 0 0 Mehrfachpostings zu diesem Thema gelöscht
Stonie
Schlagschatten für Webseite
JürgenB
AugeMorgen,
ich würde meiner Webseite gerne einen Schlagschatten verpassen. Hab mal gegoogelt. Da gibt es ja eine ganze Menge Möglichkeiten. Könnt ihr mir vielleicht eine besonders empfehlen und auch eine guten Link geben, wo erklärt ist, wie man dies umsetzt?
-
Das kommt auf das Layout/Markup an, welches Du derzeit verwendest. Geht es vielleicht ein wenig genauer, damit wir Dir sagen können, welche Lösung am Besten paßt?
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes -
Wenn dein Layout in Tabellen angeordnet ist, dann ist es vorteilhafter für dich den Schatten in Zellen dar zustellen, bei DIV-Elementen das gleiche, dann eben mit DIV-Elementen.
Den Schatten kannst du generieren lassen, oder du machst es selber, mit Grafikprogramm. Dann kannst du ihn dynamisch oder statisch ausgeben. Dabei ist statisch wesentlich einfacher ;)
-
Ich nutze zurzeit ein Zweispaltenlayout mit einem Header und einem footer. Die einzelnen Container ordne ich mit Hilfe von CSS richtig an.
Welche Schlagschattenvariante wäre denn hier am besten?
-
CSS4You hat einen simplen Vorschlag, mir persönlich wäre aber selbst das noch zuviel unnötiger HTML-Ballast.
-
Hallo gast42
CSS4You hat einen simplen Vorschlag, …
Dieser Vorschlag erfordert eine feste Größe (und wehe, der Inhalt passt nicht rein). Außerdem bleibt unterhalb des Schattens ein Bereich in Höhe des gesamten Elements reserviert, kann also keine anderen Inhalte aufnehmen.
Bei mir würde das Beispiel eher ungefähr so aussehen:
CSS
#menu { position: relative; top: 10px; left: 10px; width: 8em; background-color: #bbbbbb; } #menu ul { position:relative; top: -10px; left: -10px; background-color: #F0F4D6; border: 1px solid #000000; margin: 0; padding: 0; list-style: none; } #menu li { margin: 1em 0.5em; padding: 0; }HTML
<div id="menu"> <ul> <li><a href="#">HYPERLINK</a></li> <li><a href="#">HYPERLINK</a></li> <li><a href="#">HYPERLINK</a></li> <li><a href="#">HYPERLINK</a></li> <li><a href="#">HYPERLINK</a></li> <li><a href="#">HYPERLINK</a></li> <li><a href="#">HYPERLINK</a></li> </ul> </div>Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
Morgen,
das Problem ist, dass ich dringend Hilfe brauche. Ich brauche den Kram für nächste Woche in der Schule, da ich dann einen kleinen Vortrag diesbezüglich halten muß. Wäre echt super wenn ihr mir ein wenig weiterhelfen könntet.
Es geht darum der Webseite einen Schatten zu verpassen welcher sie komplett umläuft. Ich weiß leider garnicht wie ich dabei am besten vorgehe. Ausgangsbasis ist diese Codestruktur:
<body>
<h1 id="header">Titel der Seite</h1><ul id="navigation">
<li>Auswahl 1</li>
<li>Auswahl 2</li>
<li>Auswahl 3</li>
</ul><p id="content">Hier landet der eigentliche Inhalt</p>
<address id="footer">hier kommt das copyright hin<address>
</body>mit diesem CSS:
* {
margin: 0;
padding: 0;
}body {
width: 950px;
margin: 20px auto;
}#header {
background: green;
}#navigation {
position: left;
background: blue;
}#content {
position: right;
background: red;
}#footer{
clear: both;
background: yellow;
}Insgesamt habe ich mir vier Schattengrafiken mit einem Grafikprogramm erstellt.
1.)
Ein Schatten für die linke Seite. Diese Grafik soll abhängig von der Höhe der jeweiligen Webseite beliebig oft wiederholft werden, so das sie auf der kompletten linken Seite unabhängig von deren Höhe zu sehen ist.2.)
Ein Schatten für die rechte Seite. Diese Grafik soll abhängig von der Höhe der jeweiligen Webseite beliebig oft wiederholft werden, so das auf der kompletten rechten Seite unabhängig von deren Höhe zu sehen ist.3.)
Ein Schatten der die obere Seite sowie die Ecken abdeckt. Dieser Schatten hat die feste Breite der Webseite (950px) und kann deshalb auch die Ecken enthalten.4.)
Ein Schatten der die untere Seite sowie die Ecken abdeckt. Dieser Schatten hat die feste Breite der Webseite (950px) und kann deshalb auch die Ecken enthalten.Wie kann ich ausgehend von meinen Vorüberlegungen am besten diese Schatten in die Webseite integrieren?
-
Hallo Bernd,
Es geht darum der Webseite einen Schatten zu verpassen welcher sie komplett umläuft.
das ist meiner Meinung nach eher unüblich. Für den von Dir beschriebenen Effekt würd' ich einfach einen Rahmen verwenden.
Wie kann ich ausgehend von meinen Vorüberlegungen am besten diese Schatten in die Webseite integrieren?
Wie wäre es mit einer Grafik, die uns zeigt, wie die Seite mit dem von Dir gewünschten Schatten aussehen soll.
So kannst Du hier Grafiken einbinden: http://forum.de.selfhtml.org/hilfe/bedienung.htm#grafiken-einbinden.Freundliche Grüße
Vinzenz
-
Diese Webseite hat einen komplett umlaufenden Schatten so wie ich ihn gerne hätte:
Webseite mit umlaufenden Schatten
Geht so was nur mit Grafiken, oder kann ich so einen Verlauf auch mit CSS erzeugen?
-
Hallo,
Diese Webseite hat einen komplett umlaufenden Schatten so wie ich ihn gerne hätte:
da ist kein Schlagschatten.
Geht so was nur mit Grafiken, oder kann ich so einen Verlauf auch mit CSS erzeugen?
Da der diffuse Schatten nicht durch eine Farbe dargestellt werden kann, benötigst Du ein Hintergrundbild (oder mehrere Hintergrundbilder bei abgerundeten Ecken des Schatten).
Bei einem umlaufendem Schlagschatten kämst Du mit einem Rahmen aus :-)
Was willst Du nun?Freundliche Grüße
Vinzenz
-
Da der diffuse Schatten nicht durch eine Farbe dargestellt werden kann, benötigst Du ein Hintergrundbild (oder mehrere Hintergrundbilder bei abgerundeten Ecken des Schatten).
Bei einem umlaufendem Schlagschatten kämst Du mit einem Rahmen aus :-)
Was willst Du nun?Mir ist ist der Unterschied zwischen einem "diffusen Schatten" und einem "umlaufenden Schlagschatten" nicht so wirklich klar.
Du schreibst, dass ich bei einem umlaufendne Schlagschatten mit einem Rahmen auskomme. Brauche ich dann keine Hintergrundgrafiken? Falls ja, wäre ich sehr dankbar, wenn du mir sagen könntest wie das geht.
Ich hab das mal so gemacht. Das dumme ist das ich zusätzliche DIV-Container brauche (nur wegen der Schattenhintergrundgrafiken). Auf die würde ich am liebsten verzichten. Ist das möglich?
<body> <div id="border-left"> <div id="border-top"> <div id="edge-tl"> </div> <div id="edge-tr"> </div> </div> <div id="border-right"> <h1 id="header">Titel der Seite</h1> <ul id="navigation"> <li>Auswahl 1</li> <li>Auswahl 2</li> <li>Auswahl 3</li> </ul> <p id="content">Hier landet der eigentliche Inhalt</p> <address id="footer">hier kommt das copyright hin<address> </div> <div id="border-bottom"> <div id="edge-bl"> </div> <div id="edge-br"> </div> </div> </div> </body> </html>* { margin: 0; padding: 0; } body { width: 950px; margin: 20px auto; } #header { background: green; } #navigation { float: left; background: blue; } #content { float: right; background: red; } #footer { clear: both; background: yellow; } #border-top { overflow:hidden; width: auto; height: 20px; font-size:0; margin-bottom: -15px; background-image: url(border_top.gif); background-repeat:repeat-x; background-position:top left; } #border-bottom { overflow:hidden; width: auto; height: 20px; margin-top: -15px; font-size:0; background-image: url(border_bottom.gif); background-repeat:repeat-x; background-position:bottom left; } #border-left { border: 0 none; background-image: url(border_left.gif); background-repeat:repeat-y; background-position:left; } #border-right { border: 0 none; margin: 0 0 0 5px; padding: 0 5px 0 0; background-image: url(border_right.gif); background-repeat:repeat-y; background-position:right; } #edge-tl { float:left; width: 20px; height: 20px; font-size:0; background: url(corner_tl.gif) top left; } #edge-tr { position:relative; /* IE Fix | z-index */ float: right; width: 20px; height: 20px; font-size:0; background: url(corner_tr.gif) top right; } #edge-bl { float:left; width: 20px; height: 20px; background: url(corner_bl.gif) bottom left; } #edge-br { position:relative; /* IE Fix | z-index */ float:right; width: 20px; height: 20px; background: url(corner_br.gif) bottom right; }-
Hallo,
Bei einem umlaufendem Schlagschatten kämst Du mit einem Rahmen aus :-)
Was willst Du nun?Mir ist ist der Unterschied zwischen einem "diffusen Schatten" und einem "umlaufenden Schlagschatten" nicht so wirklich klar.
Du schreibst, dass ich bei einem umlaufendne Schlagschatten mit einem Rahmen auskomme.
Ja.
Brauche ich dann keine Hintergrundgrafiken?
Nein.
Ich hab das mal so gemacht. Das dumme ist das ich zusätzliche DIV-Container brauche (nur wegen der Schattenhintergrundgrafiken). Auf die würde ich am liebsten verzichten. Ist das möglich?
Ja sicher. Wozu den ganzen Kram mit den Ecken. Schlimmstenfalls benötigst Du *einen* umgebenden Container, dessen Rahmen Du mit CSS festlegst. Wie Du dem Wikipedia-Artikel entnehmen kannst, sind beim Schlagschatten selbstverständlich die Ecken hübsch scharf und rechteckig wie die des schattenwerfenden Objektes. "Runde Ecken" wären beim Schlagschatten fehl am Platz - es sei denn, das schattenwerfende Objekt hätte selbst welche.
Freundliche Grüße
Vinzenz
-
Du schreibst, dass ich bei einem umlaufenden Schlagschatten mit einem Rahmen auskomme.
Ja.
Wie soll ich denn hier mit einem Rahmen auskommen? Ich bin jetzt total verwirrt.
Brauche ich dann keine Hintergrundgrafiken?
Nein.
Wie bekomme ich denn einen Schlagschatten für meines ganzen Body hin ohne das ich dafür eine Hintergrundgrafik benötige?
Ja sicher. Wozu den ganzen Kram mit den Ecken. Schlimmstenfalls benötigst Du *einen* umgebenden Container, dessen Rahmen Du mit CSS festlegst.
OK, mal angenommen ich bastel mir einen Container der den ganzen body umgibt. Diesem Container kann ich dann einen Rahmen zuweisen. Nun muss ich doch irgendwie den Schlagschatten in den Rahmen bekommen. Wie mache ich das denn ohne Grafiken zu verwenden?
-
Hallo,
Du schreibst, dass ich bei einem umlaufenden Schlagschatten mit einem Rahmen auskomme.
Ja.
Wie soll ich denn hier mit einem Rahmen auskommen? Ich bin jetzt total verwirrt.
Ein Schlagschatten ist wunderbar scharf (schwarz, vielleicht dunkelgrau - sehr dunkles dunkelgrau).
Wie bekomme ich denn einen Schlagschatten für meines ganzen Body hin ohne das ich dafür eine Hintergrundgrafik benötige?
Mit dem Rahmen. Gib dem Rahmen die gewünschte Farbe: schwarz bzw. ein sehr dunkles dunkelgrau. Fertig. So einfach ist das.
Freundliche Grüße
Vinzenz
-
Endlich ist bei mir der Groschen Gefallen. Ich war irgendwie die ganze Zeit der Meinung, dass ein Schlagschatten am Rand einen Verlauf haben muss (was ja nicht so sein muß). Da ich bereits vorher wußte, dass ich mit CSS diesen Verlauf nicht erzeugen kann war mir nicht klar wie ich einen Schlagschatten ohne Grafik erzeugen soll.
Was ich will:
Ich würde gerne einen Schlagschatten erzeugen, der langsam nach außen verblast (einen Verlauf also) und schlußendlich in der Hintergrundfarbe der Webseite (in meinem Fall weiß) endet.
Diesbezüglich werde ich wohl nicht um Grafiken herumkommen oder?
Hier werde ich wohl auch nicht auf die zusätzlichen DIV-Container die ich oben in dem Beispiel nutze herumkommen oder bist du da anderer Meinung.
-
Hallo Bernd,
kennst du schon diesen Artikel?
http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/
Der dürfte auch für dein Problem einige Ideen liefern.
Gruß, Jürgen
-
Hallo Bernd,
Was ich will:
Ich würde gerne einen Schlagschatten erzeugen, der langsam nach außen verblast (einen Verlauf also) und schlußendlich in der Hintergrundfarbe der Webseite (in meinem Fall weiß) endet.
dann beachte bitte, dass Du *keinen* Schlagschatten haben willst.
Was Du beschreibst ist *nicht* ein Schlagschatten.Da es kein Schlagschatten ist, kommst Du um Grafiken nicht herum - wie ich bereits in meiner ersten Antwort schrieb. Jürgens Tipp dürfte Dir weiterhelfen.
Ich verstehe jedoch nicht, warum Du stets von einem Schlagschatten sprachst. Spätestens nach meinem Wikipedia-Link hätte Dir klar sein müssen, dass Du keinen Schlagschatten haben willst. Ich habe doch den Unterschied zu einem diffusen Schatten klar herausgestellt :-(
Freundliche Grüße
Vinzenz
-
Hallo
Ich verstehe jedoch nicht, warum Du stets von einem Schlagschatten sprachst. Spätestens nach meinem Wikipedia-Link hätte Dir klar sein müssen, dass Du keinen Schlagschatten haben willst. Ich habe doch den Unterschied zu einem diffusen Schatten klar herausgestellt :-(
Ich will ja hier nicht den Beckmesser spielen, aber der Schlagschatten ist jener Schatten, den ein angeleuchteter Körper auf einen anderen Körper wirft. Und der darf (grundsätzlich), je nach Abstand zwischen Lichtquelle, schattenwerfendem Körper und beschattetem Körper, was hier nach Augenschein nicht zutrifft, auch diffus sein. Es handelt sich hier also um die Simulation eines solchen.
Warum Bernd nicht einfach die gegebenen Tips durchprobiert, weiß ich aber auch nicht. Sie waren reichlich und auch zielführend. Vielleicht sollte man mal wieder das alte Wort von der "Beratungsresistenz" hervorkramen.
Tschö, Auge
-
Moin Auge,
Warum Bernd nicht einfach die gegebenen Tips durchprobiert, weiß ich aber auch nicht. Sie waren reichlich und auch zielführend. Vielleicht sollte man mal wieder das alte Wort von der "Beratungsresistenz" hervorkramen.
Meinst du, dass davon irgendetwas besser wird?
File Griese,
Stonie
--
It's no good you trying to sit on the fence
And hope that the trouble will pass
'Cause sitting on fences can make you a pain in the ass.
Und im Übrigen kennt auch Stonie Wayne.-
Hallo
Warum Bernd nicht einfach die gegebenen Tips durchprobiert, weiß ich aber auch nicht. Sie waren reichlich und auch zielführend. Vielleicht sollte man mal wieder das alte Wort von der "Beratungsresistenz" hervorkramen.
Meinst du, dass davon irgendetwas besser wird?
Mitnichten. Der Verlauf des (der) Threads ließ mich halt (kopfschüttelnd) an genau diesen Begriff denken.
Tschö, Auge
-
-
-
-
-
-
-
-
-
-
-
-
-
Hallo Bernd,
nur zur Info: Deine beiden letzten neuen Postings zu diesem Thema habe ich inzwischen gelöscht und so werde ich mit jedem weiteren verfahren, solange der vorliegende Thread noch aktiv ist. Wir haben dir deutlich genug gesagt, dass Doppelpostings hier nicht erwünscht sind und auch warum. Bitte halte dich an die Regeln, die in diesem Forum gelten und informiere dich, warum Postings, die in der Forumshauptdatei, wie du sie aufrufst, nicht ganz oben stehen, durchaus Beachtung erhalten.
File Griese,
Stonie
--
It's no good you trying to sit on the fence
And hope that the trouble will pass
'Cause sitting on fences can make you a pain in the ass.
Und im Übrigen kennt auch Stonie Wayne.