Bilderrahmen ohne Grafik

cherry.jpg

Rahmen um Graphiken mit CSS

Bilder auf Internetseiten sehen manchmal schöner aus, wenn Sie eingerahmt sind. Dazu muss man nicht einen Rahmen erstellen, das Bild hineinkopieren und als neues Bild abspeichern. Mit CSS (Cascading Style Sheets) geht dieses einfacher und die „schwere“ der Internetseite erhöht sich nur um wenige Bytes.

Das Image Tag <img> bietet hierzu das Attribute Border an. Wenn Sie jetzt einen Rahmen um ein Foto haben möchten, so editieren Sie das image tag dafür in folgender Weise:

Beispiel für ein normales Image Tag

cherry
<img xsrc=“https://www.mtw-office.de/images/stories/fruit/cherry.jpg“ border=“0″ alt=“cherry“ title=“cherry“ hspace=“10″ vspace=“0″ width=“150″ height=“112″ />

Beispiel für ein normales Image Tag mit einem Rahmen drumherum

Zur Darstellung nutzen wir das Attribute Style, welches für jedes HTML Tag zur Verfügung steht. Durch das background-color:#ffffff;padding:5px; wird ein 5 Pixel breites, weisses Passepartout um das Bild erzeugt. Zur Abgrenzung gegen den Hintergrund wird dieses dann noch mit einem 4 Pixel breiten und doppelten, silbernen (grau) Rand eingefasst.

cherry
<img xsrc=“https://www.mtw-office.de/images/stories/fruit/cherry.jpg“ alt=“cherry“ title=“cherry“ style=“background-color: #ffffff; padding: 5px; border: 4px double Silver;“ width=“150″ height=“112″ border=“0″/>

 

MTW OFFICE on EmailMTW OFFICE on FacebookMTW OFFICE on GoogleMTW OFFICE on LinkedinMTW OFFICE on PinterestMTW OFFICE on TumblrMTW OFFICE on TwitterMTW OFFICE on Youtube
MTW OFFICE
Geb. im August 1964 und bis zum 34. Lebensjahr in Hamburg Wohnhaft. Nach der Geburt unseres Sohnes zogen wir in die Nähe von Flensburg auf das Land, wo wir zusammen mit meinen Schwiegereltern auf einen Resthof leben.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.