Schüler-Autoren dieses Artikels sind Marian Czajka und Henning Pfeiffer

Rahmen:

Mit den verschiedenen Rahmen- Befehlen lassen sich unterschiedliche Stile an Umrandungen darstellen. Man leitet einen Rahmen mit dem „border-style:“ -Befehl ein. Im Anschluss schreibt man dahinter, welchen Stil den Rahmen bekommen soll. Dazu zählen:

dotted – Für einen gepunkteten Rahmen

dashed – Für einen gestrichelten Rahmen

solid – Für einen durchgehenden Rahmen

double – Für einen doppelten Rahmen

groove – Für einen rilligen Rahmen mit 3D Effekt

ridge – Für einen Rahmen mit hervorstehender Rille und 3D Effekt

inset – Für einen eingesetzten Rahmen mit 3D Effekt

outset – Für einen aufgesetzten Rahmen mit 3D Effekt

none – Kein Rahmen

hidden – Für einen versteckten Rahmen

Erweitern kann man diese Befehle mit weiteren Stilelementen erweitern. So kann man z.B. die Farbe (border-color: Farbe;), Breite (border-size: Größe;) oder die einzelnen Seiten anpassen (border-top/right/bottom/left-style: Stil;).

Beispiel:

p {
border-top-style: dotted solid;

border-color: green;

border-width: 5px;

}

Boxen:

HTML Elemente werden als Boxen deklariert. Der Begriff „Boxen“ wird verwendet, wenn über das Design oder Layout gesprochen wird. Es besteht aus „margin“, „border“, „padding“ und „content“.

Content - Inhalt der Box, dort erscheint der Text

Padding - Ein leerer Bereich um den Text, dieser ist unsichtbar

Border - Ein Rahmen um den content und padding

Margin - Ein leerer Bereich um den Rahmen, dieser ist unsichtbar

Beispiel:

div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

Schatten:

Mit dem „-shadow“ Befehl gibt man einem Text oder einer Box einen Schatteneffekt.

Für einen schattigen Text benutzt man den „text-shadow:“ Befehl. Nach dem Doppelpunkt gibt man mit einer Pixelangabe an, wie groß der Versatz vom Schatten zum Text sein soll. Die erste Angabe bezieht sich auf den horizontalen Versatz, die zweite auf den vertikalen und der dritte auf den „blur“ Effekt, welcher für ein verschwommenes Aussehen des Schattens sorgt.

Im Anschluss kann man dem Schatten noch eine Farbe zuweisen. Der „box-shadow“ Befehl ist auf die selbe Art aufgebaut.

Beispiel:

text-shadow: 2px 2px;

text-shadow: 2px 2px 5px red;