nicht angemeldet
Wie gehe ich das an: Runde Ecken, Schatten innen CSS
Hallo
Ich stehe grade vor der Umsetzung eines Kundenprojektes und wollt hier im Forum noch ein paar Meinungen zur Lösung einholen. Es geht um eine Gestaltung von Bildern, welche innenliegende Schatten und runde Ecken haben. Hab damit mal bisschen rumgespielt, bin mir aber nicht so sicher, ob ich da den richtigen Ansatz gewählt habe oder nicht. Dazu mal ein Müsterchen meines Vorab-Tests:
Die Liveversion wird dann noch etwas kniffliger, da die Bilder verschiedene Breiten und Höhen haben. Die Breite kann ich wahrscheinlich auf 2 Werte festlegen, bei den Höhen geht das wahrscheinlich nicht. Die Musterdatei ist nur mal eine Umsetzung meines Lösungsansatzes.
Beim oberen Bild habe ich zwei Divs hintereinander ausgegeben: Im Unteren das Bild platziert und darüber mit einem transparenten Ping die «Schattenmaske» platziert. Das untere Bild funzt genau gleich, hier habe ich aber via Pseudoklasse :after versucht die Sache mit CSS zu lösen um unnötigen HTML Code zu vermeiden. Da zickt dann aber IE. Dachte dass ab IE7 die :after Geschichte läuft.
Mich würde eure Meinung zu dieser Vorgehensweise interessieren. Gibts da bessere, andere oder bekannte Lösungen für mein Problem, oder kennt vielleicht jemand ein Tutorial? Kann man den Code noch flexibler und auch mittels CSS für IE7/8 kompatibel machen? Ist mein Lösungsansatz ok, oder total falsch? Freu mich auf eine angeregte Diskussion.
Pierre
-
Das ist tatsächlich mit einfachem CSS nur schwer machbar. Allerdings möchte ich Dir folgendes zum Nachdenken mitgeben: warum verwendest Du nicht einfach die CSS3-Eigenschaften border-radius und box-shadow (mit inset, bei Eigenschaften sollten natürlich auch proprietär, also mit -moz-,-webkit-Präfix angesprochen werden) und ignorierst die Darstellung auf den veralteten Browsern, die sie nicht unterstützen?
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Hi LX
Deinen Tipp würd ich sofort umsetzen, wenns um ein eigenes Projekt ginge, ist aber hier nicht möglich. Die Site muss auch unter IE7 mit Schatten und runden Ecken angezeigt werden. Für mich sicher am einfachsten, die Bilder in PS so zu erstellen, aber eine dynamische Lösung wär natürlich spannender umzusetzen... Na ja, ich schau mal noch weiter.
Vielleicht stolpern ja noch ein paar andere über meinen Beitrag hier :-)
-
Hi Pierre,
Deinen Tipp würd ich sofort umsetzen, wenns um ein eigenes Projekt ginge, ist aber hier nicht möglich. Die Site muss auch unter IE7 mit Schatten und runden Ecken angezeigt werden. Für mich sicher am einfachsten, die Bilder in PS so zu erstellen, aber eine dynamische Lösung wär natürlich spannender umzusetzen... Na ja, ich schau mal noch weiter.
serverseitig mit PHP generieren und dann entsprechend cachen?
Brillo
-
aber eine dynamische Lösung wär natürlich spannender umzusetzen... Na ja, ich schau mal noch weiter.
Ich löse es mit einem Wasserzeichen so, dass beim Upload das Bild auf eine bestimmte Auflösung runtergerechnet wird und dann das Wasserzeichen eingerechnet wird.
In deinem Fall könntest du zwei Bilder (also den Schatten als eigenes Bild) per PHP übereinanderlegen und dann auf dem Server abspeichern. -
Falls Du die Bilder serverseitig behandeln kannst, solltest Du Dir mal libgd anschauen - dafür gibt es Bindings für fast jede Sprache (PHP, C, Java, Lua, etc.) und damit kann man durchaus das, was Du da statisch machst, direkt im Bild einbauen (einschließlich PNG-Transparenz).
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
-
-
Das ist tatsächlich mit einfachem CSS nur schwer machbar.
Unsinn - mit den CSS3-Eigenschaften die du nachher selbst nennst ist das extrem einfach.
und ignorierst die Darstellung auf den veralteten Browsern, die sie nicht unterstützen?
Das lässt sich doch mit Filtern, Rahmen und VML nachreichen. Shadow, DropShadow und Border liefern im IE7 und 8 mit etwas Spielerei ganz gute Ergebnisse, im IE6 siehts aber etwas grottig aus ;)
Im genannten Fall würde ich aber eher dazu tendieren, das Bild einfach so zu erzeugen - ich gehe davon aus, dass man heutzutage ein CMS verwendet, was sowas ohne Probleme bewerkstelligen kann.
-