✔ flexibler schatten um thumbnails

[supersalzi]

Hi,
mich plagt eine Überlegung.

Man hat Thumbnails sagen wir 80x120 pixel groß. Diese stehen nun mal verikal oder mal horizontal in einem größeren Div, welches dann noch ein Bildtitel enthält.

Ist es möglich eine allgemeine Lösung zu finden, um dieses Bild einen schattierten Rahmen, sprich eine Grafik zu packen, egal ob es Hoch- oder Querformat hat?

Mein erster Gedanke war, ein weiteres Div um das Bild zu legen und dieses mit einer Hintergrundgrafik zu versehen. Geht aber nicht, da es immter so breit wie möglich wird, sprich beim vertikalen Bild auf jeden Fall zu breit ist.

Mein 2. Gedanke, dem Bild selbst, also <img /> eine Hintergrundgrafik zu geben. Kann die größer sein als das Objekt selbst (negaive position oder so)?

Und nochmal ganz anders gefragt, wie machen das die "profi"Galleries mit denn Schatten, jedes mal eine serverseitige Entscheidung wie groß der Container sein muss?
Mir würde eine saubere CSS Variante viel besser gefallen...

hat jemand eine Idee?

gute nacht, salzi

 

[Maik]

Vielleicht helfen Dir da Stu Nicholls' Simple fluid drop shadows weiter?

Hierbei müßtest Du dann zwei Klassen mit der entsprechenden Breitenangabe für das Hoch- und Querformat deklarieren. In dem Beispiel sind dies die Klassen .narrow, .normal, .wide und .image.

 

[supersalzi]

well, ich habe mich dumm ausgedrückt;

Das Beispiel Simple fluid drop shadows verwendet ja keine Grafik als Schatten, also es ist ein einheitlicher grauer Schatten. Ich würde aber gern eine Grafik als Schatten verwenden, da das wesentlich "schattiger" aussieht.

Und ich habs nicht weiter untersucht, aber wenn ich zwei verschiedene Container für Hoch-und Querformatbilder brauche, geht es auch nicht, die Bilder sind immer im gleichen Container.

Noch eine Idee?

 

[Maik]

Wie wär es denn mit der "Zwiebelschalen-Technik" A List Apart: Articles: Onion Skinned Drop Shadows?

 

[supersalzi]

Dank dir

Wenn die das so machen, gibt es wahscheinlich keinen einfacherern Weg.

Und das ergebnis ist spitze.

J