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.

Im ersten Teil der Atikelserie Bilder mit CSS Stylen möchte ich euch zeigen, wie Bilder mittels CSS ordentlich positioniert werden.

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.

Da ich meine Posts immer ein wenig an das Blogsystem Wordpress anlehne, habe ich mich entschieden eine CSS Artikelserie zu starten.

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.