18. Januar 2006 in Journal » XHTML/CSS
Eingabefelder im Mac OS X-Stil
Ich persönlich finde die Standard-Eingabefelder von aktuellen Mac Systemen sehr klar und sauber. Besonders auf Websites machen sie einen guten Eindruck auf mich.
Vorschau
Um im Voraus zu wissen, wie das Ergebnis aussieht, kann man sich den kleinen Bildausschnitt rechts anschauen.
Hintergrund vorbereiten
Da in der aktuellen CSS-Version keine Schatten generiert werden können, muss man einen Schatten vortäuschen. Dies erreicht man ganz einfach per background und border.
Der Hintergrund muss gerademal 1*1 Pixel groß sein und nur die Farbe #CECECE enthalten. Damit er sich am oberen Rand wiederholt, bindet man in wie folgt ein:
input, textarea{
background:#fff url(background-image.jpg) top left repeat-x;
}
Ränder einfärben
Durch das background-image haben wir oben zwar schon einen Rand, für einen Schatteneffekt können wir nun noch border-top und auch alle anderen Ränder nutzen. Oben wird die dunkelste Randfarbe, an den Seiten etwas hellere und unten eine sehr helle Randfarbe zugewiesen. Hier die CSS-Properties für die optimalen Ränder:
input, textarea{
background:#fff url(background-image.jpg) top left repeat-x;
border-top:1px solid #909090;
border-left:1px solid #CECECE;
border-right:1px solid #CECECE;
border-bottom:1px solid #E4E4E4;
}
Das Ergebnis im Einsatz
Ich nutze diese Formular-Eingabefelder in meinem CMS. Diese sehen durch eine abweichende Zeilenhöhe und einer anderen Typo natürlich ein wenig anders aus. Der Effekt ist aber jedenfalls da.
Diskussion geschlossen
Die Kommentarfunktion dieses Artikels wurde deaktiviert. Private Mitteilungen an Martin bitte per E-Mail an martin@labuschin.com. Danke.
6 Kommentare
robert am 18. Januar 2006 #
hi, für das redesign meiner website habe ich eben diese eingabefelder geplant :D
als ich den safari test von snugtech gemacht habe ist mir aufgefallen, wie toll das aussieht. wie du schon sagst: klar und sauber.
danke für die anleitung, so muss ich nicht rumprobieren ;)
robert am 18. Januar 2006 #
und du hast sie für deine website schon übernommen. gerade erst gemerkt...
tomsw am 18. Januar 2006 #
Sehr gut erklärt..! aber bist du dir sicher ob das in allen Browser funktiniert? (Safari?)
Martin Labuschin am 18. Januar 2006 #
@robert: Nein, die Felder auf Labuschin Webdesign sind anders gestaltet.
@ Tomsw: *g* Im Safari sehen die Eingabefelder doch eh schon so aus
robert am 18. Januar 2006 #
auch kurz danach gemerkt, wollte aber nicht 3 einträge hintereinander schreiben ;)
roland am 21. Januar 2006 #
oh...