Erstellen eines Rocking-CSS3-Suchfelds
CSS3 ist die Stylesheet-Sprache der nächsten Generation. Es enthält viele neue und aufregende Funktionen wie Schatten, Animationen, Übergänge, Grenzradius usw. Obwohl die Spezifikationen noch nicht fertiggestellt sind, unterstützen viele Browserhersteller bereits viele der neuen Funktionen.
In diesem Lernprogramm werden wir einige dieser Funktionen untersuchen Text-Schatten, Grenzradius, Box-Schatten und Übergänge, um ein Schaukel-Suchfeld zu erstellen.
Die Photoshop-Version dieses Suchfelds wurde von Alvin Thong erstellt und kann hier heruntergeladen werden. Ich habe versucht, dieses Suchfeld mit reinem CSS3 neu zu erstellen. Es ist darauf hinzuweisen, dass Nicht alle Browser unterstützen CSS3-Funktionen Um dieses Tutorial auszuprobieren, sollten Sie einen der modernen Browser verwenden, der CSS 3-Funktionen unterstützt.
Bereit? Lass uns anfangen!
1. HTML5 Doctype
Wir beginnen mit dem HTML-Markup. Es ist sehr einfach, nach dem HTML5-Doktyp und die Erklärung, wir haben eine mit einer ID aufgerufen #Verpackung Innerhalb . Dies geschieht einfach, um die Breite der Inhaltsbox zu definieren und sie an der Mitte der Seite auszurichten.
Darauf folgt ein So sieht der Code aus: Um die große Box um das Formular herum zu erstellen, fügen wir dem Formular Stile hinzu Der wichtige Code hier ist der Erläuterung: Hier gibt der Schlüsselworteinschub an, ob sich der Schatten im Feld befindet. Die ersten beiden Nullen geben den x-Versatz und den y-Versatz an und die 3px zeigt die Unschärfe an. Als nächstes kommt die Farbdeklaration. Ich habe hier Rgba-Werte verwendet; rgba steht für rot, grün, blau und alpha (deckkraft). Somit geben die 4 Werte in der Klammer die Menge an Rot, Grün, Blau und dessen Alpha (Opazität) an. Sie werden feststellen, dass 5 Sätze von Schattendeklarationen zusammengemischt wurden. Dies kann durch ein Komma getrennt werden. Die ersten beiden Schatten definieren den weißen "inneren Schein" -Effekt, und die darauffolgenden Deklarationen verleihen der Box ihren festen / klobigen Look. Spielen Sie mit diesen Werten, um zu verstehen, wie es funktioniert. Nun, da die Box abgeschlossen ist, können Sie mit dem Styling des Eingabefelds fortfahren. Die für das Eingabefeld deklarierten Stile ähneln denen, die für das große Feld deklariert wurden Erläuterung: Sie werden feststellen, dass dieses Mal die Schattenunschärfe auf 0 gehalten wurde, um einen scharfen Schatten zu erhalten, und es wird ein vertikaler Versatz von 5 Pixeln verwendet. In den nachfolgenden Deklarationen wurde die Unschärfe auf 0px gehalten, aber die Farbe und der y-Versatz wurden geändert. Spielen Sie wieder mit diesen Werten, um unterschiedliche Ergebnisse zu erzielen. Lassen Sie uns die Suchschaltfläche formatieren. Abgesehen von den Farben hat die Suchschaltfläche meistens die gleichen Stile wie die der äußeren Box. Ein ähnlicher Rahmenradius und Box-Schatten wurden für die Schaltfläche verwendet. Das neue Feature ist das Erläuterung: In dem Der aktive Status der Schaltfläche hat etwas mehr Änderungen. Hier habe ich dem Button eine absolute Position und einen 'oberen' Wert von 5px gegeben. Dies wurde gemacht, um ein natürlicheres Aussehen zu erzielen, so dass der Eindruck entsteht, dass die Schaltfläche tatsächlich um 5 Pixel nach unten gedrückt wurde. Andere Änderungen am aktiven Zustand sind die Hintergrundfarbe und die Schatten. Beachten Sie, dass ich den y-Versatz der Schatten reduziert habe, um ein "heruntergedrücktes" Aussehen zu erhalten. Hier ist der Code für den aktiven Status der Senden-Schaltfläche: Damit ist unser Suchfeld abgeschlossen. Wir haben einige der neuen CSS3-Funktionen verwendet. Hier ist das vollständige CSS und HTML dieses Suchfelds. Ich hoffe, Ihnen hat dieses Tutorial gefallen. Experimentieren Sie mit diesen Funktionen und vergessen Sie nicht, Ihre Gedanken mitzuteilen. Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Bharani M für Hongkiat.com. Bharani ist ein Designer / Entwickler aus New Delhi, Indien.#Main. Diese ID enthält die Stile, die das große weiße Feld um das Eingabefeld und die Suchschaltfläche definieren. Diese in ihm deklariert. Das Formular hat die Texteingabefeld und die sSuchtaste. So sieht das Formular aus, ohne dass Stile darauf angewendet werden: 
CSS3-Suchfeld
2. Erstellen Sie den Begrenzungsrahmen
#Main. Anhand des unten gezeigten Codes werden Sie feststellen, dass die Box eine Breite von 400px und eine Höhe von 50px erhalten hat. #main width: 400px; Höhe: 50px; Hintergrund: # f2f2f2; Polsterung: 6px 10px; Grenze: 1px fest # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; -moz-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,8), Einfügung 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0.8), Einfügung 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; Box-Schatten: Einfügung 0 0 3px rgba (255, 255, 255, 0.8), Einfügung 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Grenzradius Erklärung und die Box Schatten Erklärung. Um abgerundete Ecken zu erstellen, haben wir die CSS3-Border-Radius-Deklaration verwendet, Browser-Präfixe "-moz-" und "-webkit-" wurden verwendet, um sicherzustellen, dass dies in Gecko- und Webkit-basierten Browsern funktioniert. Die Box-Shadow-Deklarationen sehen vielleicht etwas verwirrend aus, sind aber eigentlich sehr einfach. Box-Schatten: Einfügung 0 0 3px rgba (255, 255, 255, 0.8), Einfügung 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Vorschau
3. Gestalten Sie das Eingabefeld
input [type = "text"] float: left; Breite: 230px; Polsterung: 15px 5px 5px 5px; Rand oben: 5px; Rand links: 3px; Grenze: 1px fest # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; -moz-box-shadow: Einfügung 0 5px 0 #ccc, Einfügung 0 6px 0 # 989898, Einfügung 0 13px 0 #dfdede; -webkit-box-shadow: Einfügung 0 5px 0 #ccc, Einfügung 0 6px 0 # 989898, Einfügung 0 13px 0 #dfdede; Box-Schatten: Einfügung 0 5px 0 #ccc, Einfügung 0 6px 0 # 989898, Einfügung 0 13px 0 #dfdede;
#Main. Wir haben denselben Randradius (5px) verwendet. Wieder wurden mehrere Box-Schatten abgeschlagen. Box-Schatten: Einfügung 0 5px 0 #ccc, Einfügung 0 6px 0 # 989898, Einfügung 0 13px 0 #dfdede;
Vorschau
4. Gestalten der Senden-Schaltfläche
input [type = "submit"]. solid float: left; Cursor: Zeiger; Breite: 130px; Polsterung: 8px 6px; Rand links: 20px; Hintergrundfarbe: # f8b838; Farbe: rgba (134, 79, 11, 0,8); Text-Transformation: Großbuchstaben; Schriftdicke: fett; Grenze: 1px fest # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; Textschatten: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; Box-Schatten: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-Übergang: Hintergrund 0,2s
Text-Schatten. Textschatten: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
Text-Schatten Deklaration, die ersten drei numerischen Werte sind der x-Versatz, der y-Versatz und die Unschärfe. Die rgba-Werte geben die Schattenfarbe an. In der nächsten Deklaration (durch Komma getrennt) wird dem y-Offset der Wert -1 zugewiesen. Dies geschieht, um den Text an zu geben “inneren Schatten” bewirken. Der Schwebeflug- / Fokuszustand der Schaltfläche "Senden" hat unterschiedliche Werte für Hintergrundfarbe und Schatten. Vorschau
"Aktiv" -Zustand für die Taste
input [type = "submit"]. solid: aktiv background: # f6a000; Position: relativ; oben: 5px; Grenze: 1px fest # 702d00; -moz-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; Box-Schatten: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Der vollständige Code (CSS)
#main width: 400px; Höhe: 50px; Hintergrund: # f2f2f2; Polsterung: 6px 10px; Grenze: 1px fest # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; -moz-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,8), Einfügung 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0.8), Einfügung 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; Box-Schatten: Einfügung 0 0 3px rgba (255, 255, 255, 0.8), Einfügung 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; Breite: 230px; Polsterung: 15px 5px 5px 5px; Rand oben: 5px; Rand links: 3px; Grenze: 1px fest # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; -moz-box-shadow: Einfügung 0 5px 0 #ccc, Einfügung 0 6px 0 # 989898, Einfügung 0 13px 0 #dfdede; -webkit-box-shadow: Einfügung 0 5px 0 #ccc, Einfügung 0 6px 0 # 989898, Einfügung 0 13px 0 #dfdede; Box-Schatten: Einfügung 0 5px 0 #ccc, Einfügung 0 6px 0 # 989898, Einfügung 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; Cursor: Zeiger; Breite: 130px; Polsterung: 8px 6px; Rand links: 20px; Hintergrundfarbe: # f8b838; Farbe: rgba (134, 79, 11, 0,8); Text-Transformation: Großbuchstaben; Schriftdicke: fett; Grenze: 1px fest # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; Textschatten: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; Box-Schatten: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-Übergang: Hintergrund 0,2s input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus background: # ffd842; -moz-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,9), Einfügung 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,9), Einfügung 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; Box-Schatten: Einfügung 0 0 3px rgba (255, 255, 255, 0,9), Einfügung 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"]. solid: active background: # f6a000; Position: relativ; oben: 5px; Grenze: 1px fest # 702d00; -moz-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; Box-Schatten: Einfügung 0 0 3px rgba (255, 255, 255, 0,6), Einfügung 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
