Designbeispiel: ein Login-Formular
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Das Web ist voll von Login-Formularen, beispielsweise wenn Sie Ihre E-Mail über das Web lesen, bei Amazon Bücher bestellen und selbst bei der Online-Bezahlung Ihrer "Knöllchen".
Für den Benutzer sind nur wenige Teile des Formulars sichtbar: der Submit-Button für das Eingabefeld sowie die Felder für Benutzername und Passwort und deren Beschriftungen. Sie sehen hier den Markup-Code für das Formular, das mit Stildefinitionen versehen werden soll (in folgender Abbildung sehen Sie das Eingabefeld ohne Stildefinitionen):
<form action="login.php" method="post">
<label for="uname">Benutzername</label>
<input type="text" name="uname" id="uname" value="" />
<br />
<label for="pword">Passwort</label>
<input type="text" name="pword" id="pword" value="" />
<br />
<input type="submit" name="Submit" value="Abschicken" />
</form>
Abbildung: Das Login-Formular ohne Stildefinitionen.
Mit Hilfe des Pseudoelements :after erzeugen Sie das Zeichen, das nach dem regulären Text im label-Element eingefügt werden soll:
label:after {
content: ": ";
}Damit sich die Beschriftungen optisch von den Eingabefeldern unterscheiden, werden sie per CSS-Regel mit einem grauen Hintergrund und einer fetteren (schwarzen) Schrift versehen (siehe nächste Abbildung):
label {
background-color: gray;
color: black;
font-weight: bold;
}
Abbildung: Die Formular-Beschriftungen mit gesondert definierten Farben.
Nun können Sie den Text komplett in Großbuchstaben darstellen und zusätzlich mit Innenabständen versehen (siehe nächste Abbildung):
label {
background-color: gray;
color: black;
font-weight: bold;
padding: 4px;
text-transform: uppercase;
}
Abbildung: In Großbuchstaben dargestellter Text.
Damit die Beschriftungen nicht zu sehr von den Eingabefeldern ablenken, verringern wir nun die Schriftgröße. Außerdem wird ein serifenloser Zeichensatz (Verdana) festgelegt, der auch bei kleinen Schriftgrößen noch gut zu lesen ist (siehe nächste Abbildung):
label {
background-color: gray;
color: black;
font-weight: bold;
padding: 4px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
}
Abbildung: Der fertige Text im label-Element.
Jetzt ist es an der Zeit, die Eingabefelder zu gestalten. Da das Formular zwei Arten von Eingabefeldern enthält, unterscheiden wir diese durch die Verwendung eines class-Attributs im Submit-Button. Dadurch können die Eingabefelder und der Submit-Button mit unterschiedlichen Stilen versehen werden. (Das wäre auch durch die Verwendung von Attributselektoren möglich, die aber von Internet Explorer 5.x und 6 für Windows nicht unterstützt werden.) Durch die Verwendung von Klassenselektoren können Sie die für ein Element vorgesehenen Eigenschaften ändern, ohne dass dies auf die anderen Elemente Einfluss hätte:
<input type="submit" name="submit" value="Abschicken" class="buttonSubmit" />Damit die einzelnen Formularelemente etwas mehr Abstand voneinander bekommen, definieren wir die input-Felder als Block-Elemente und versehen sie an der Unterseite mit einem Außenabstand (siehe folgende Abbildung):
input {
display: block;
margin-bottom: 1.25em;
}
Abbildung: Die Eingabefelder befinden sich nun unterhalb der Beschriftungen.
Die Breite der Eingabefelder wird auf 150 Pixel festgelegt. Gleichzeitig erhalten sie einen 1 Pixel breiten Rahmen, wodurch die standardmäßig von den meisten Browsern dargestellte Vertiefung überschrieben wird. Um dem Ganzen etwas mehr Tiefe zu verleihen, erhält der Rahmen rechts und unterhalb der Eingabefelder eine Breite von jeweils 2 Pixeln (siehe nächste Abbildung):
input {
display: block;
margin-bottom: 1.25em;
width: 150px;
border: solid black;
border-width: 1px 2px 2px 1px;
}
Abbildung: Die modifizierten Eingabefelder.
Nachdem die Stildefinitionen für die input-Felder zugewiesen sind, wenden wir uns nun dem Submit-Button zu. Da dieser ein eigenes Design erhalten soll, wird auch hier ein Klassenselektor benutzt.
Wir beginnen damit, die Größe und Position des Buttons anzupassen. Dafür wird seine Breite auf 100 Pixel festgelegt (zwei Drittel der Breite der Eingabefelder). Durch einen rechten Außenabstand wird der Button außerdem um 50 Pixel nach rechts verschoben und schließt dadurch bündig mit den übrigen Feldern ab (siehe nächste Abbildung):
.buttonSubmit {
width: 100px;
margin-left: 50px;
}
Abbildung: Der angepasste Submit-Button.
Im folgenden Schritt erhält der Button eine grüne Farbe und einen grünen Rahmen. Über die Eigenschaft text-transform werden alle Buchstaben als Großbuchstaben dargestellt (siehe nächste Abbildung):
.buttonSubmit {
width: 100px;
margin-left: 50px;
color: green;
text-transform: uppercase;
border: 1px solid green;
}
Abbildung: Der grüne Submit-Button mit einer komplett in Großbuchstaben dargestellten Beschriftung.
Um das Design abzurunden, werden die br-Elemente, die im Formular für zusätzlichen Leerraum sorgen, verborgen. Das Ergebnis sehen Sie in der folgenden Abbildung.
br {
display: none;
}
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln