Tutorial – Bilder mit Rahmen und Schatten per CSS
Das Tutorial von Michael hatte ich schon vor langer, langer Zeit gefunden und es damals nur bei Seite gelegt, weil ich mich später mit dem Einbau und dem Erstellen das Schattens beschäftigen wollte. Aber wie es eben so ist, habe ich es irgendwann vergessen und da ich meine Fotos eh immer in Photoshop bearbeite, habe ich da immer gleich einen Rahmen und Schatten um das Bild gelegt. Doch da es manchmal mehr Aufwand ist, als nötig wäre, hilft mir diese kleine CSS-Anwendung was automatisch einen Rahmen und einen Schatten um das Bild legt.
Ich hoffe der Vorführeffekt klappt:
Wichtig hierbei ist nur, dass das Foto immer die gleich Breite haben muss, sonst klappt es nicht. Die Höhe ist hier (fast) egal, sofern man das Schattenbild auch hoch genug gemacht hat. Bei Michael kann man sich 3 fertige Schattenbilder runterladen in den Breiten 418px, 468px und 500px. Die Bilder sind alle 800px hoch und das dürfte eigentlich reichen 
Nach einer kleinen Anpassung bei mir, da das der vorgegebene Abstand nicht ganz bei mir hinhaut und nach erstellen eines eigenem Hintergrundbild, weil ich eine andere Breite brauchte, hat es gestern bei einem Testbeitrag super geklappt.
Dafür kommt nun auch das FancyBox-Plugin bei mir zum Einsatz, da ich nun die Bilder mit einem großen Bild hinterlegen kann. Konnte ich vorher natürlich auch, aber jetzt sind es ein paar Klicks weniger Arbeit und somit schneller für mich zu lösen Für noch größere Auflösungen, nehme ich nach wie vor Flickr, was ich dann aber extra noch mal unterm Bilder verlinke.
Also vielen Dank noch mal an Michael für die einfache und leicht zu verstehende Anleitung!
Irgendwann will ich aber noch mal Hand anlegen und vielleicht andere Formen des Schattens ausprobieren. (wenn ich es nicht vergesse 
)
Ähnliche Beiträge:
Keine ähnlichen Beiträge.
26 Antworten zu "Tutorial – Bilder mit Rahmen und Schatten per CSS"
Ja, stimmt, den Overeffekt für Bilder muss ich mal ausschalten.
Ich mag das Bild 
Aber der Schatteneffekt is natürlich auch toll.
Danke für den Tipp, dieses Thema hatte ich erst am Samstag und wollte so gern ohne viel drumherum Schatten haben. Gucke mir deine Anleitung die Tage mal genauer an und werde den Tipp sicher anwenden 
So, der Mouseovereffekt müsste nun wesch sein
@Yannick: dankscheen
@NickmalOlle: die Anleitung wie oben ist aber von Michael. Die die ich noch verlinkt habe ist das Tutorial von mir via Photoshop
Oder man nutzt die tolle CSS3 Eigenschaft box-shadow. Nachteil hierbei ist die Browserunterstützung. 
@Ocean: ja habe ich schon von gehört was dann alles so möglich ist, aber leider, leider dauerts noch Jahre bis man damit arbeiten kann, also so das jeder Besucher auch was von hat
Du hattest schon mal “‘nen Schatten” am 18. September 2007 und seit dem hab ich den auch schon 
auwei und ich dachte noch das mal was war, aber es dann aufs Alter geschoben, das nix sein kann *gg* Naja, doppelt hält besser und nach 2 Jahren kann mans noch mal auffrischen
Also mir gefällt das auch sehr gut, finde das ganze Bild sieht dadurch weicher aus, werde ich auch mal ausprobieren 
wirklich schön geworden. ich kann mich mit ps gar nicht anfreunden und es liegt mehr oder weniger nur auf meiner platte hier rum. ich arbeite am liebsten mit psp ;-)
Schönes Ergebnis
wow, dass bild ist richtig richtig schön!
Schön sieht’s aus, aber irgendwie stelle ich mich ein wenig zu doof an. Bei mir funktioniert es nicht! 
@Melli: und was genau funktionierts nicht? Wirds nicht angezeigt? Oder ist es nur verschoben?
Nein, der Rahmen wird gar nicht angezeigt!
hmm, hast du nen Beitrag wo du das eingebunden hast? vielleicht kann ich mal schauen und prüfen ob es nicht lädt oder falsch eingebunden ist.
http://blog.sepianet.de/?p=1178
Am ersten Bild hatte ich es ausprobiert.
also das schaut so aus als wenn das bild nicht im Ordner ist.
schiebe es mal in den Image-Ordner von deinem Theme und lösche in der CSS das “wp-admin/” weg. mal schauen ob es dann geladen werden kann.
Nö, nö …. geht nicht!
Doch, jetzt zeigt es was an, wenn man genau hinschaut. Jetzt müsstest das Bild noch kleiner machen, da es das Schattenbild verdeckt. Also ich habe in der Breite 20px weniger als das Hintergrundbild.
Hast du etwas Ahnung von CSS? Du müsstest alles was in den geschweiften Klammern zu img steht auskommentieren. Dann siehst es deutlicher.
genau sowas suche ich für den photoshop! kann mir da jeman weiterhelfen?
@Drachenkind: Bilderrahmen mit Photoshop – Tutorial
danke cindy. so schlau war ich auch schon aber das ist nicht das selbe (bzw das gleiche). genau wie das obige sollte es aussehen! hab schon alle tuts abgesucht, aber nix gefunden..
Und was schaut jetzt da anders aus?
der hier im tut ist ganz einfach schöner. der schatten ist natürlich und im cs link tut nicht. den unterschied sehe ich ganz deutlich, zumal er hier an drei seiten und oben ansatzweise verläuft und das foto wie aufgelegt aussieht und cs tut ist der schatten starr und eben langweilig. was ist eigentlich css?
Also ich seh beim Mouseover unter dem Bild einen erscheinenden Hooverbalken.
Ist sicherlich einstellungssache, oder ?
^^ getestet mit Firefox, Opera und Safari