Be KreaTief

[CSS] Style Your Inputs/Search Fields ✤✤✤

Halli Hallöchen :)
Heute nach einer gefühlten Ewigkeit mal wieder eine kleine CSS Spielerei.
Vielleicht ist es euch schon aufgefallen, mein Suchfeld.
Ich hatte in den alten Vorlagen immer eins und bei der neuen hatte ich es einfach vergessen. -.-''
Nachdem ich allerdings etwas gekämpft habe, habe ich es dann endlich geschafft.
Ehe ich es allerdings eingebaut habe, habe ich mir Gedanken über solche Inputfenster gemacht und wie man die so stylen könnte.
Das Suchfeld habe ich übrigens mit Olivers Tutorial gemacht. Und da er das so gut erklärt hat, werde ich mich gar nicht damit beschäftigen, sondern nur mit der Gestaltung der Input-Felder.
Ich hab euch ein kleines DEMO zusammengestellt in der verschiedene Styles präsentiert werden. Wie man so eine Gestaltung angeht, möchte ich euch allerdings an einem konkreten Beispiel zeigen. Und zwar diesem hier:


 Die Felder funktionieren alle nicht, also suchen könnt ihr damit noch nicht, aber eingeben. :)

Zu Beginn müsst ihr allerdings wissen, wie man einen Input baut. Wenn ihr Olivers Tut verwendet, werdet ihr sehen, dass ihr bloss die CSS werdet ändern müssen, aber wenn es um Inputs geht (vielleicht braucht ihr mal anderweitig einen) dann sollte man schon auch den HTML-Aufbau kennen.
Also einen Input baut man folgendermassen:
<input class="demo" placeholder="Search" type="text" />
Wie ihr sehen könnt, ist das nicht sonderlich kompliziert. Ihr gebt dem Input eine Klasse, oder eine id, wie ihr wollt. Ich hab's mit Klassen gemacht. Und dann definiert ihr noch einen Platzhalter, also Text der angezeigt wird, wenn noch keine Eingabe passiert ist. Dieser Text wird ersetzt, sobald die Person zu tippen beginnt. :)
Okay, also fügen wir als erstes einen input ein.

So schaut das aus.
Nicht wirklich spannend...
Um das zu ändern, stylen wir unser Feld ein bisschen. Wir öffnen also die style-Klammern und entfernen erstmal die ganze Grundformatierung. <style> .demo{
border: none;
}

.demo:focus{
outline: none;
}
</style>


Folgendes kommt alles in die .demo-Klammer.
Als nächstes runden wir die Ecken ab. und weil es so zusammengepresst ausschaut, fügen wir oben und unten noch etwas padding ein.
-webkit-border-radius: 3px 30px 30px 3px;
border-radius: 3px 30px 30px 3px;
-moz-boder-radius: 3px 30px 30px 3px;
padding-top: 5px;
padding-bottom:5px;


Als nächstes fügen wir einen Schatten ein, einen äusseren.
-webkit-box-shadow: 0px 0px 2px 2px rgba(204, 22, 150, .7);
box-shadow: 0px 0px 2px 2px rgba(204, 22, 150, .7);
background: rgba(204, 22, 150, .3);

Als nächstes leiten wir den kleinen "3D-Effekt" ein. Wir fügen einen zweiten Schatten ein, diesen setzen wir allerdings inset. Wir setzen ihn unten, und beim focus kommt er dann oben hin. Zu beginn aber den im "normalen" Bereich.
Um die beiden Schatten anzuzeigen, müsst ihr jetzt einfach ein Komma nach der Klammer setzen und den Code hinzufügen.
Wir erweitern den Code also so: -webkit-box-shadow: 0px 0px 2px 2px rgba(204, 22, 150, .7),inset 1px -1px 1px 1px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 2px 2px rgba(204, 22, 150, .7),inset 1px -1px 1px 1px rgba(0, 0, 0, .7);


Als letztes fügen wir eine Transition ein, sowie die Schriftfarbe und die Schrift soll noch fett sein. Dann ist die Normalansicht fertig.
-webkit-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-ms-transition: 1s ease-out;
-o-transition: 1s ease-out;
transition: 1s ease-out;
color: rgba{0, 0, 0, 0.6};
font-weight: bold;


Okay. Jetzt zum focus. Das ist der Zustand in dem ihr den Input markiert habt, also nicht der hover (der kommt auch noch) nicht das mouseover sondern dann, wenn ihr schreiben könnt.
Hier wollen wir den umgekehrten Schatten und der Rand soll etwas grösser werden. Das unterstütz den "runterdrück"-Effekt. Und dann gibt's auch hier noch eine transition. Mehr brauchts beim focus gar nicht. :)
-webkit-box-shadow: 0px 0px 2px 3px rgba(161, 84, 156, .7),inset -1px 1px 1px 1px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 2px 3px rgba(161, 84, 156, .7),inset -1px 1px 1px 1px rgba(0, 0, 0, .7);
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: 0.5s ease-out;

Im Allgemeinen war's das schon. einfach weil's fancy ist, hab ich noch einen hover hinzugefügt bei dem die Schrift dunkler wird. :) .demo:hover{color:black;}
Ihr seht, es ist ganz einfach, ein spannendes Suchfeld zu gestalten. :) Ich hoffe das Tut war für jemanden hilfreich, vielleicht auch nur um euch die Möglichkeiten von CSS etwas genauer zu zeigen. Oh und zum Schluss noch schnell für die, die nicht wollen, dass das Search auch dann angezeigt wird, wenn man schreibt. Dazu müsst ihr den HTML-Code ändern. Und zwar folgendermassen: <input class="demo" type="text" placeholder="Search" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search'">
edit