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 Beiträge:

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

Bilder und Grafiken sind Inline-Elemente und werden in der Regel in einer Zeile mit nachfolgendem Texten platziert. Möchte man eine Grafik von einem Text umfließen lassen, so griff man früher noch auf das HTML Atrribut align zu. Heutzutage erledigt man soetwas besser mit CSS. In der Regel unterscheidet man drei Anordnungsarten: Bilder werden entweder links oder rechts oder eben auch zentriert angeordnet.

Diese Anordnungen werden mit CSS sehr einfach realisiert.


Wir packen die zu positionierende Grafik in einen DIV Container:

Grafik links ausgerichtet und rechts vom Text umgeben:

(Ich habe hier noch ein margin-right und ein margin-bottom eingefügt um den Abstand zwischen Bild und Text zu definieren.)


Grafik rechts ausgerichtet und links vom Text umgeben:

Achtung: Wird ein margin in die selbe Richtung, in die gefloated wird, definiert, so tritt der so genannte Double Float Margin Bug im Internet Explorer 6 auf. Hiergegen hilft uns das Element display:inline :

Grafik zentrieren:

Möchte man eine Grafik mit CSS zentrieren, so greift man auf das Element display:block zu und setzt den rechten und linken Außenabstand auf  auto.

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 Beiträge:

1. Rahmen um Bilder mit CSS
2. Bilder mit CSS Stylen – Artikelserie

Genauer gesagt, wird die erste Artikelserie die Formatierung von Bildern mittels CSS ein wenig unter die Lupe nehmen. Ich werde zeigen, wie durch ordentliche Positionierung, Rahmen, Schlagschatten und Opazitäten, Bilder auf Webseiten mittels CSS zu richtigen Eyecatchern werden.

In dieser Artikelserie werden folgende Themen behandelt:

• 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 Beiträge:

1. Rahmen um Bilder mit CSS
2. Bilder ordentlich mit CSS positionieren