Vollständige Version anzeigen : Web-Design 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, 18: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, 19:10
hy dula,
:wpsc
stehe im moment auch auf dem schlauch, wo genau das problem ist.
gruß
volker
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.
#aussen{
width:900px;
background:schatten.jpg repeat-y center;
}
#innen{
width:800px;
margin:auto;
}
<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*)
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 :(
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/
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.
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.
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.
Man muss ja nicht alles von yaml drin lassen. Da gibts ne light version. Und dort ist das nicht valide css nicht drin, soweit ich weiß...
Man kann YAML einsetzen, es gibt schlimmeres. Man braucht es aber nicht, egal was man Umsetzen möchte. Muss man sich sowieso einarbeiten, stellt sich einfach die Frage warum YAML lernen, anstatt HTML/CSS. Aber ich glaube die Diskussion hatten wir schon mal :emo_biggr
Echt?
Ich kann mich garnicht erinnern :bleh:
Warum ist eigentlich dieses shadow css nicht valide? Geht doch gut...
Hallo!
Warum ist eigentlich dieses shadow css nicht valide?
Also bei mir ist box-shadow valide!
Wie kommt ihr darauf, dass es nicht valide sei???
In CSS3, aber nicht in CSS2.1. Und ist denn CSS3 bereits offiziell verabschiedet?
Hallo!
Ach so! Das ist natürlich in CSS3 neu dazugekommen, daher kann es natürlich in CSS2 nicht valide sein...
Allerdings: box-shadow funktioniert in allen neuesten Versionen aller gängigen Browser.
Ja, sogar im IE9!!!
Wenn es allerdings als echtes Stilmittel eingesetzt werden soll, so dass es auch im IE8 und früher funktionieren MUSS, dann ist natürlich die background-repeat-y-Variante in jedem Fall vorzuziehen.
Ansonsten spricht aber rein gar nix gegen box-shadow.
edit: Nein! Offiziell verabschiedet ist CSS3 noch immer nicht!
Und solange ist es Beta und sowas setzt man für gewöhnlich nicht produktiv ein ;)
Hmmm... Ansichtssache...
Die Übernahme von box-shadow in CSS3 sollte zu 99,8% sicher sein.
Daher wäre ich in diesem speziellen Fall nicht päpstlicher als der Papst himself.
Beta und produktiv ist eigentlich keine Ansichtssache.
Aber mal davon abgesehen, ist box-shadow weniger individuell anwendbar als alternative Methoden. Und spätestens bei IMG und inset guckst Du wieder in die Röhre und wendest Alternativen an ;)
Beta und produktiv ist eigentlich keine Ansichtssache.
Nun lass uns das mal nicht zu einer Glaubensfrage machen...:emo_biggr
Wenn ein Schatten zwar schön, aber nicht zwingend notwendig ist, dann nimm box-shadow!
Der box-shadow wird kommen. CSS3 beta hin oder her...
Du kannst dich ja auch nicht HTML5 verweigern, bloß weil es noch nicht durch ist.
Ob du's schon anwendest, bleibt dir natürlich selbst überlassen, aber beschäftigen sollte man sich damit dennoch schon jetzt mMn.
Wenn ein Schatten zwar schön, aber nicht zwingend notwendig ist, dann nimm box-shadow!
Anstatt den Schatten auf andere Art individueller und überall zugänglich zu machen? Ja das macht total Sinn.
Ich frage mich manchmal wie man auf die Idee kommen kann, eine Webseite mal so und mal anders aussehen zu lassen. Nur damit man CSS3 Anweisungen verwendet anstatt andere Methoden die überall funktionieren? IE7, der Hinterletzte noch zu unterstützende Browser kann transparente PNG, aber keine CSS3 Anweisungen. Und ich bin mir sicher das Du Chef dann erklärst dass die Webseite halt in der Firma auf den installierten IE7 anders aussieht als überall sonst, nur damit Du box-shadow anwenden konntest :emo_biggr
Ach komm, lass gut sein!
Wer's vernünftig bauen kann, der verschachtelt zwei div's und macht's per background und 'nem 1px-png.
Ich frage mich manchmal wie man auf die Idee kommen kann, eine Webseite mal so und mal anders aussehen zu lassen.
Das wirst du aufgrund unterschiedlicher Browser und unterschiedlicher Betriebssysteme nie ganz umgehen können!
Also genau genommen sehen die seiten doch in jedem browser irgendwie anders aus. Deswegen weiter krücken zu verwenden, die dann auch im ie 5 angezegit werden halete ich für nicht sinnvoll. Wenn die pc-anwender ihren browser nicht aktualisieren, dann haben sie nicht jeden gimmick. Schatten sind ja jetzt nichts lebensnotwendiges. Außerdem kann man ja, wenns wichtig ist, über eine browserweiche arbeiten.
Ich für meinen Teil finde diese neuen befehle super, weil sie die Arbeit erleichtern. Das gehampel mit den bildchen etc. ist mir für einen simplen schatten schon immer suspekt gewesen.
Gruß
Heike
Manchmal ist so etwas ohne CSS3 halt nicht sinnvoll zu lösen. Um die komplette Seite kann man natürlich grafiken machen, das Problem dazu ist, dass du halt noch ein Abschlussbild am Ende der Seite brauchst.
Wenn man aber in der Seite Container mit nem Schatten versehen will, kommt man kaum um box-shadow herum.
box-shadow ist im neusten Twenty-Ten und Twenty-Eleven theme von Wordpress drin, das zählt für mich wie ein offizielles Release:emo_biggr
IE5/6 sind wirklich nicht mehr zu berücksichtigen. Aber IE7 kommt noch in x Unternehmen vorinstalliert zur Anwendung.
Übrigens sieht z.B. apple.de überall gleich aus. Und korrekt umgesetzt, braucht es nicht mal extra Anweisungen für den 7ner. Ausserdem gibt es natürlich Unterschiede zwischen der Firmenseite und dem privaten Blog :)
Hallo!
Übrigens sieht z.B. apple.de überall gleich aus.
Nein, das tut sie nicht!!!
Und wenn du in den Quellcode schaust, dann weißt du auch warum:
<style>
.promos ul li .alt-curve-down-1 { display:inline-block; _display:inline; _zoom:1; border:1px solid #e0e0e0; border-top-color:#efefef; border-bottom-color:#ccc; }
.promos ul li .alt-curve-down-1:nth-child(1n) { border:none;
-webkit-border-radius:0% 0% 100% 100% / 0% 0% 8px 8px;
-moz-border-radius:0% 0% 100% 100% / 0% 0% 8px 8px;
border-radius:0% 0% 100% 100% / 0% 0% 8px 8px;
-webkit-box-shadow:rgba(0,0,0,.30) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.30) 0 2px 3px;
box-shadow:rgba(0,0,0,.30) 0 2px 3px;
}
</style>
Also: Selbst Apple nutzt bereits box-shadow und weitere CSS3-Features wie border-radius und auch rgba...
Scheint experimental zu sein, sonst wären die Browserkürzel vor box-shadow nicht mehr angegeben. Und wo ist der Schatten angewendet bzw wo fehlt er im 7ner?
Hallo!
Die vier Bildchen unten haben abgerundete Ecken und Schatten.
Die haben sie im IE7 und IE8 nicht. (Zumindest nicht im IE-Tester.)
hihihi - ich liebe diese Grundsatzdiskussionen und witzigerweise ist ja immer bei jeder homepage irgendwas anders ;)
vBulletin® v3.8.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd.