Eine sehr aufwendige Möglichkeit Bilder mit einem Rahmen zu versehen, wäre jede Grafik in einem Grafikbearbeitungsprogramm zu editieren und dort den Rahmen einzufügen.

Das geht mit ein bisschen CSS wesentlich einfacher. Heute möchte ich euch zeigen, wie man Bilder mit CSS einrahmt und mit ein paar kleinen Tricks sogar noch recht schöne Effekte bei rausholt.

Ein standard Rahmen um ein Bild mit CSS würde so aussehen:
Voraussetzung ist natürlich eine erstellte class namens img_rahmen !!

3D Rahmen mittels CSS realisieren:
Hierbei wird ein ganz einfacher Trick angewendet. Die Farben der einzelnen Linien werden unterschiedlich gesetzt. Der Rahmen oben und links sollte etwas heller sein als der Rahmen unten und rechts. So eintsteht ein 3D Effekt.

Hinweis: Im nächsten Teil der Artikelserie Bilder mit CSS Stylen werde ich Schlagschatten ansprechen und diese dann auch live zeigen. Ich denke bei normalen Rahmen und Positionieren war dies noch nicht nötig.

Ich würde den Code für meine Artikelserie gerne mittels Code Markup Plugin darstellen, leider habe ich keine Möglichkeit gefunden die Ausgabe des Plugins mit CSS zu formatieren.

Vielleicht kann mir da ja jemand weiter helfen ?
Wie stellt ihr Code in euren Artikeln dar ?

Dieser Artikel gehört zur Artikelserie “Bilder mit CSS stylen”:

• Bilder ordentlich mit CSS positionieren
• Rahmen um Bilder mit CSS
• Schlagschatten mittels CSS erzeugen
• Opazitäten mit CSS realisieren
• Opazitäten in der Praxis
• Transparente und ansprechende Bildtitel

Ähnliche Posts:

1. Bilder mit CSS Stylen – Artikelserie
2. Bilder ordentlich mit CSS positionieren