Rahmen-Effekte

Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/1023358715.shtml

Moderne Browser können verschiedene Arten von Rahmen darstellen, beispielsweise zu sehen auf unserer Startseite. Damit lassen sich hübsche Effekte realisieren. Im Folgenden zeigen wir Ihnen die für Rahmen relevanten CSS-Attribute.

Anwendbarkeit
Erstaunlicherweise kann man einen Rahmen um fast alle Tags ziehen lassen - sogar um <span>.

Rahmendicke
Das Attribut border-width gibt die Breite des zu zeichnenden Rahmens an. Erlaubt sind Angaben in allen CSS-Einheiten, also z.B. border-width: 10px; oder auch border-width: 1cm;.

Rahmenfarbe
Mit border-color legen Sie die Farbe des Rahmens fest. Beispiele: border-color: red; oder auch border-color: #00FF00.

Rahmentyp
border-style gibt die Art des zu zeichnenden Rahmens an. So lassen sich z.B. gestrichelte Rahmen oder solche mit 3D-Effekt zeichnen. Folgende Werte sind erlaubt:
Einzelrahmen
Sie können die obigen drei Attribute auch für einzelne Seiten eines Rahmens festlegen, so z.B. nur die obere Kante sichtbar machen und den Rest verstecken.

Beispiel:
<span style="border-style: none; border-top-style: solid; border-top-width: 3px; border-top-color: red;">Test</span>

erzeugt folgenden Effekt:

Test

Anstelle von top lassen sich hier auch left, right und bottom verwenden, auch in mehrfacher Kombination.

Rahmen-Abstände
Wie weit ein Rahmen vom Inhalt entfernt ist, den er umschließt, wird mit dem padding-Attribut angegeben, das es auch in Variationen wie padding-top gibt.

<span style="border-style: solid; border-width: 3px; border-color: red; padding: 0px;">Test</span>

erzeugt:

Test

<span style="border-style: solid; border-width: 3px; border-color: red; padding: 5px;">Test</span>

erzeugt:

Test

Beispiele

Tabelle mit gestricheltem Rahmen:

Inhalt


Code dazu:

<table style="border-style: dashed; border-width: 1px; border-color: black;">
    <tr>
        <td>Inhalt</td>
    </tr>
</table>

Rahmen als Textmarker:

Besondere Inhalte sind wichtig, da sie wertvolle Infos enthalten!

Code dazu:

<span style="border-width: 1px; border-style: solid; border-color: lime; padding: 1px;">wichtig</span>

Kombination von Hintergrundfarbe und Rahmen:

Heading1



Code dazu:

<h1 style="font-size: 15pt; border-width: 2px; border-style: solid; border-color: navy; padding: 4px; background-color: #9999ff; display: inline">Heading1</h1>