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