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″/>

 

You May Also Like

Leave a Reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert