esse est percipi
Das Weblog eines Grafikdesigners. Seit 2003.

.bildschatten {
 background: url(images/bildschatten.png) no-repeat bottom left;
 padding: 4px 7px 17px 7px;
}

<img class="schatten" src="/images/schattentest2.jpg" width="404" height="606" alt="Sonnenuntergang" />

Ähnliche Beiträge:

PNG-24-Dateien für CSS-Schatten

Text dynamisch durch Bilder ersetzen

Eigener Lupen-Cursor mit reinem CSS (Update: Cross Browser-Lösung)

Eisiges Potsdam (Update)

Mac OS X-Programm: MailReminder.app (Update 4)

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

Ist natürlich nur minimal, aber ich finde schon, das man merkt, das der Schatten oben „abgeschnitten“ ist. Vielleicht fällt das jetzt nur besonders ins Auge, weil ich jetzt natürlich auf den Schatten achte und wenn man den Effekt irgendwo „nur so im Vorrübergehn“ sieht, nicht…

Trotzdem gefällt mir der Schatten mit 2-4 img’s (je nach festen Längen) im „fuzzy“-Look besser, und wenn das semantisch (z.B. @@-Tag, Box mit Caption o.ä. drumherum) zufällig möglich ist, würde ich es auch unbedingt so machen.

Das wäre ein a-Tag, Code klappt nicht, sorry.

Stimmt, code klappt leider nur, wenn links und rechts der beiden @ ein Leerzeichen steht.

Ich finde das mit dem Schatten oben übrigens überhaupt nicht schlimm, im Gegenteil: dem Auge wird optisch so der fehlende obere Abschluss des Bildes vorgegaukelt.

In Safari 2.0.4 OS X.4.10, tuts bei mir (G5) nicht.

Gruß
dirk

Das Problem mit der oben abgeschnittenen Kante könntem man doch mit einem einpixeligen border-top in hellem Grau lösen. Ich hab’s jetzt auf die Schnelle nur in Photoshop getestet – ich finde aber, es sieht ganz gut aus:

http://www.wolke-fan.de/border-test.jpg

@ MartinZ: So hatte ich das zuerst auch, das sah aber deshalb blöd aus, weil die Linie sichtbar über die Schatten links und rechts hinausläuft. Ich habe jetzt aber aus der ursprünglichen #aaa Linie mal eine #fefefe Linie gemacht, so geht’s.

@ dirk: Was genau tut’s denn nicht? Bei mir werden die Schatten mit Safari 2.0.4 auf einem Mac Pro und einem Powerbook G4 einwandfrei angezeigt …

Eine Klasse namens „bildschatten“ finde ich sehr unglücklich. Besser wäre „photo“ oder so etwas was den Inhalt und nicht das Aussehen beschreibt, damit das auch noch sinnvoll ist wenn schatten mal wieder out sind ;-)

Das ist schick, aber wie schon bemerkt, nicht ganz perfekt. Nur fast. Was spricht denn dagegen, die Bilder in Photoshop einfach zu bearbeiten? Dann könnte man diese klitzekleinen Feinheiten umgehen …

@ Jeena: Ach, ich verhalte mich da antizyklisch ;-) Für mich waren Schatten die letzten 5 Jahre out, jetzt fange ich wieder an, sie gut zu finden. Und da es neben den Bildern mit Schatten weiterhin auch welche mit oder ohne Rahmen geben wird, ist das mit dem Klassen-Namen schon in Ordnung.

@ Bloch & Kaminski: Für meine Ansprüche finde ich es perfekt. Und gegen eine Bearbeitung in Photoshop spricht erstens der zusätzliche Aufwand und zweitens die Tatsache, dass ich ziemlich aufgeschmissen wäre, wenn ich eines Tages feststellte, dass ein zwei Pixel längerer Schatten eigentlich viel besser aussieht – oder dass mir Schatten tatsächlich zum Halse raushängen ;-)

Finde ich sehr schick! Darf man sich „bedienen“?

@ Robert: Aber natürlich, deshalb habe ich’s ja veröffentlicht.

Wird noch schicker mit javascriptgesteuerter Zufallsauswahl verschiedener Schatten.

@Michael: Da ist allerdings was dran, wobei ich den zusätzlichen Aufwand eher nebensächlich finde. Es sei denn, Sie entscheiden sich irgendwann, dutzende von Artikeln pro Tag zu schreiben. Die Flexibilität aber ist wirklich klasse. Daher danke für den guten Tipp …

Hi,

gefällt mir sehr gut – aber der IE will mal wieder nicht. Hintergrund wird im Firefox angezeigt, aber nicht im IE7 – muss ich was beachten beim IE?

Bei mir wird der Schatten unter Windows XP und IE7 (unter IE6 übrigens auch) absolut korrekt angezeigt – keine Ahnung, was da los sein könnte …

Sieht wirklich schick aus.
Der Laie fragt sich hier, ob so ein Schatten auch auf einem Hintergrund mit Muster funktioniert – also ein transparenter Schatten. Hab mal was von ‘nem Fix für PNG-Transparenz im IE6 gehört, aber ich bin unsicher wie sich das ganze in der Mac-Welt darstellt.

Also bitte, Mac-Browser haben keine Probleme mit PNG-Bildern. Die wissen, was es heißt, im Jahre 2007 zu leben ;)

Hallo, Michael
ich finde diesen Tipp von Dir prima. Auch dass Du so freundlich bist, mich teilhaben zu lassen am Deinem Wissen finde ich ganz wunderbar.
An alle die hier so ein bißchen sauertöpfisch, nörglerisch rumverbessern: Eure Tipps sind natürlich auch klasse, aber der Ton ist so wenig inspirativ.

;-), Danke Michael

Hallo Michael
Wieder ein prima Tipp den ich bei meiner Site (noch nicht auf weiteren Browsern getestet) eingebaut habe. Da ich deine Feeds und Tipps sehr gerne lese, ists immer wieder spannend und lehrreich bei dir vorbeizuschauen.
Ich knobel nebenbei an einer Version rum die es ermöglicht, die Bildbreite flexibel zu halten …

Liebe Grüsse nach Potsdam und ein herzliches Dankeschön aus der Schweiz.
Patrick

Patrick • Freitag, 30.11.2007, 00:15 Uhr

Leider hab ich das mit der flexiblen Bildbreite und dem Schatteneffekt noch nicht hingekriegt.
Den Schatten habe ich jetzt aber mal umgekehrt. Trotz der schmalen Bilder im netdrops design, macht auch dieser Effekt eine gute Figur :-)

Vielen Dank für diese tolle Idee :-)

Werd gleich mal versuchen, den Schatten einzubaun ;-) Hab zwar 2 verschiedene Bildbreiten, aber mit 2 CSS-classes dürfte das auch hinhaun :-)

Besten Gruss
Livia

Super :-) Es hat gefunzt!!

Vielen Dank! Mit dem Tip für den border oben sieht es echt perfekto aus :-)

Toll!

Hallo,

schöne und einfache Methode um z.B. ein kleines Online-Fotoalbum grafisch aufzupeppen.

Was mir nur nicht gefällt, ist die Symmetrie des Rahmens. Wenn alles ein bisschen mehr wie aufgeklebt wirken würde und vielleicht ein klein bisschen schräg wäre, würde ich es perfekt nennen.

MfG Sebastian

Prima Ding. Danke vielmals, ich werde es als Standard auf einigen Seiten einsetzten.

super schatten. kann ich diese klass nicht auf jedes tag z.b. div anwenden? denn ich möchte bei einem textfeld so ein schatten machen.
kann mir da jemand helfen?

Das geht ganz einfach: <div class="bildschatten"> Hier steht dein Text </div>

Huebscher effekt. Werd ich auf meiner Sizilien Page einsetzen…

sehr schön! gibt es den Hintergrund auch als photoshop datei, damit man den weißen hintergrund ändern kann? (meine Baslterei sieht leider nicht gut aus um das Weiß zu ändern…:-))

Nette kleine Spielerei der „Bildschatten“.
Danke für die Idee und Umsetzung, Michael; habe es auch gleich in mein Blog zur Umrahmung eingebaut.
Vielleicht sieht es etwas „unvollständig“ aus, weil sich oberer und rechter Rand nicht genug vom Hintergrund abheben?
Wer Zeit und Lust hat, kann ja selbst einmal gucken und hat vielleicht auch einen Tipp zu einer optimaleren Darstellungsmöglichkeit für mich.

Danke fürs lesen
HDS

Vielen Dank. Habe das gleich mal auf meine Webseite eingebaut. Ist wirklich ein hingucker.

sieht echt Spitze aus.

ich bin Anfänger: Wie heißt die Datei die ich in Wordpress ändern muss um die Sache generell auf meine geposteten Bilder anzuwenden.

habe /wp-include/post-template.php ausprobiert, scheint aber falsch zu sein.

könnt ihr mir da helfen?

ps. wenn man diese css nimmt, hat man oben auch ncoh abgeschnitten:

.bildschatten {
background: url(images/bildschatten.png) no-repeat bottom left;
padding: 4px 7px 17px 7px;
border-top: 2px solid #efefef;

Kleiner Hinweis: Wer Probleme mit dem IE6 oder IE7 hat sollte das mal ausprobieren.

Die Abbildung wird in ein separates div gesetzt.

img.bild{
margin:0;
padding:0;
display:block;
}

.bildschatten {
background: url(../bildschatten.png) no-repeat bottom left;
padding: 4px 7px 17px 7px;
border-top: 1px solid #F1F1F1;
width:404px;
}

Wow,

habe nun auch eines dieser tollen Schattenbilder auf meinem blog installiert. Und ich muß sagen, mein blog sieht gleich mal viel besser damit aus. Die Bilder kommen so besser zur Geltung.

Vielen Dank für Deinen kleinen Service!!!

Kannst Du uns evtl. erklären, wie Du diese Vorlagen/Bildschatten erstellst? Dann könnten Deine Leser evtl. auch selbst welche erstellen. Ohne dich jedesmal belästigen zu müssen?? Wär super

Weiter so
Peter

der schatten ist klasse!

ein transparenter schatten wäre allerdings für farbige oder muster-hintergründe besser. so kann man ihn nur für weiss gebrauchen.

bitte den selben schatten als transparentes png!!!
das würde mich freuen…

Wow super Rahmen, gibt es dieses PNG auch in Transparent, habe leider einen blauen Hintergrund.

Würde mich freuen.
Ganz liebe Grüsse
Susanne

Susanne, schau doch mal oben, da, wo direkt unter dem Artikel steht Update 29.05.08.

Ui, „nicht mit Bildern wechselnder Breiten“ steht oben – ne, stimmt nicht, geht selbstverständlich auch mit Bildern oder Menufeldern kleinerer Breiten und kleinerer Höhen. Kann man ja bei selfhtml mit den hier angebotenen transparenten Schatten nachmachen.
Dazu muß man halt die Schatten in 4 Quadranten aufteilen. Und dann fehlt bei selfhtml style=„max-width: *px;", womit man eben

…womit man eben

Pardon, au weia, er mag keine größer-kleiner-Zeichen.
Also nochmal den Rest, weils viell. wichtig ist:
….womit man eben kleiner als die Schattenbilder werden kann. Geht auch mit blockquote, womit man dann mit 'right repeat-y' VERTIKAL sogar BELIEBIG GROSS werden kann.

Hm, so ganz verstehe ich das alles nicht. Was meinst du mit „selfhtml“? Und was mit „4 Quadranten“? Und was hat blockquote damit zu tun?

Fakt ist, dass es genügend Schattenanleitungen gibt, die mehr CSS- und mehr HTML-Aufwand erfordern.

Fakt ist ebenso, dass meine Methode bewusst darauf verzichtet, also ganz, ganz einfach bleibt, dafür aber eben nicht so ohne weiteres breitenskalierbar ist. Es sei denn, man hat sich verschieden breite Hintergrundschatten und dazu passende CSS-Klassen angelegt.

Hallo!

Hätte das auch gerne. Aber bei mir funtzt es nicht.
Kann es daran liegen, daß ich die Bilder in einer speziellen Inhaltsbox brauche (die scrollbar ist) und die auf einem fixierten Hintergrundbild liegt?
Jedenfalls ist kein Schatten zu sehen!

Schade
martin

Also ich finde es super. Funktioniert wunderbar und sieht top aus. Aber könnte mir vielleicht jemand sagen, wo ich noch breitere PNGs herbekomme?
Hier ist ja die maximale Breite 50opx, ich bräuchte aber um die 900px.
Vielen Dank im Voraus!

Tolle sache danke danke :-)

Bei mir funktionierts in Mozilla problemlos. Im IE leider nicht. Woran könnte das liegen? Beim oftmaligen neu Laden sehe ich, dass die PNG-Datei im IE schon da ist, aber offenbar hinter meinem Bild liegt?!

Moin Michael,
wenn auch schon ein bischen älter, immer noch ein prima Beitrag. Vielen Dank dafür! Habe es mir für ein Wordpress-Projekt zurecht gebastelt und auch da sieht es gut aus … solange kein umfließender Text und ein Bilduntertitel (CSS-Klasse wp-caption-text) hinzu kommen. In diesem Fall werden die Abstände zwischen Bildrahmen und umfließenden Text leider nicht eingehalten und der Text läuft über den Rahmen.

Hast Du oder jemand anderes eine Idee, was da schief läuft bzw. was ich ändern könnte?
Link mit dem Beispiel, wie es nicht aussehen soll: www.archaeofirm.de/sondagearbeiten-in-der-wedemark/

Gruß Nils

Nachtrag zu meinem Problem oberhalb: Im Internet Explorer 8 hat es bei mir schließlich funktioniert, als ich nicht "

@Nils: Mit dem umfließenden Text klappt es ja, zumindest zeigt mir Safari deine Beispielseite korrekt an. Wenn du Bildunterschriften daruntersetzen willst, musst du Bild mit Schatten und Bildunterschrift in ein DIV legen, das vom umgebenden Text umflossen wird.

… sorry – aber in meinem blog (http://vossyline.blogspot.com) taucht nur der linke bzw. untere rand auf ;-(

mit „border-top: 2px solid #D6D6D6;“ generiere ich zwar einen oberen rand, aber ragt dann leider in der oberen linken ecke 1-2px heraus

ähnlich mit „border-right: 2px solid #D6D6D6;“ der hängt dann rechts unten durch ….

help!
- rudi -

…. geschaft …

.bildschatten {
background: url(…bildschatten.png) no-repeat bottom left;
padding: 4px 7px 17px 11px;
display: block;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #f1f1f1;
}

Das große Problem bei mir ist der Internet Explorer 8, da wird das hintergrundbild einfach nicht angezeigt.

Hat jemand eine Lösung wie der Rahmen genauso schön wie im FIrefox angezeigt werden kann?

Super! Vielen Dank!

Beste Grüße
Dominik

Ich wollte anfragen mit welchem Programm der Schatteneffekt erzeugt wurde.

Die Auswirkungen sind tatsächlich nur minimal, das macht sie natürlich nicht schlechter. Mir gefällt es durchaus, danke für diese Anleitung :) Schon ein ganz schön alter Beitrag, wird dennoch sehr hoch gerankt bei Google.

Viele Grüße
Stefan

Kommentar schreiben:

RSS-Feed

Impressum/Datenschutz/AGB