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.
Um im Voraus zu wissen, wie das Ergebnis aussieht, kann man sich den kleinen Bildausschnitt rechts anschauen.
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;
}
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;
}
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.
und du hast sie für deine website schon übernommen. gerade erst gemerkt...
Sehr gut erklärt..! aber bist du dir sicher ob das in allen Browser funktiniert? (Safari?)
@robert: Nein, die Felder auf Labuschin Webdesign sind anders gestaltet.
@ Tomsw: *g* Im Safari sehen die Eingabefelder doch eh schon so aus
auch kurz danach gemerkt, wollte aber nicht 3 einträge hintereinander schreiben ;)
oh...
robert
17.01.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 ;)