de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Ein Rocking CSS3 Suchfeld erstellen

Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.

CSS3 ist die Stylesheet-Sprache der nächsten Generation. Es bietet viele neue und aufregende Funktionen wie Schatten, Animationen, Übergänge, Rand-Radius usw. Obwohl die Spezifikationen noch nicht endgültig festgelegt wurden, haben viele Browser-Hersteller bereits begonnen, viele der neuen Funktionen zu unterstützen.

In diesem Tutorial werden wir einige dieser Funktionen wie text-shadow, Rahmen border-radius, box-shadows und Übergänge untersuchen, um ein Schaukel-Suchfeld zu erstellen.

Die Photoshop-Version dieses Suchfelds wurde von Alvin Thong erstellt und kann von hier heruntergeladen werden. Ich habe versucht, dieses Suchfeld mit reinem CSS3 neu zu erstellen. Es ist zu beachten, dass nicht alle Browser die CSS3-Funktionen unterstützen. Um dieses Tutorial auszuprobieren, sollten Sie einen der modernen Browser verwenden, die CSS 3-Funktionen unterstützen.

Bereit? Lass uns anfangen!

1. HTML5 Doctype

Wir beginnen mit dem HTML-Markup. Es ist sehr einfach, nach dem HTML5 Doctype und die Erklärung, wir haben eine

mit einer ID namens #wrapper drinnen . Dies geschieht einfach, um die Breite der Inhaltsbox zu definieren und sie an der Mitte der Seite auszurichten.

Dies wird gefolgt von a

mit einer ID namens #main . Diese ID enthält die Stile, die das große weiße Feld um das Eingabefeld und die Suchschaltfläche definieren. Dies
hat ein
in ihm erklärt. Das Formular enthält das Texteingabefeld und die Suchschaltfläche. So sieht das Formular aus, ohne dass Stile darauf angewendet werden:

So sieht der Code aus:

 CSS3 Suchfeld 

CSS3 Suchfeld

2. Erstellen der Begrenzungsbox

Um die große Box um das Formular herum zu erstellen, werden wir Stile hinzufügen

mit der ID #main . Aus dem unten gezeigten Code wird ersichtlich, dass die Box eine Breite von 400px und eine Höhe von 50px hat.

 #main {Breite: 400px; Höhe: 50px; Hintergrund: # f2f2f2; Auffüllen: 6px 10px; Grenze: 1px fest # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; Randradius: 5px; -moz-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.8), Einschub 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.8), Einschub 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.8), Einschub 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; } 

Der wichtige Code hier ist die border-radius Deklaration und die box-shadow Deklaration. Für die Erstellung abgerundeter Ecken haben wir die CSS3-Border-Radius-Deklaration verwendet. Die Browser-Präfixe "-moz-" und "-webkit-" wurden verwendet, um sicherzustellen, dass dies in Gecko- und Webkit-basierten Browsern funktioniert. Die Box-Shadow-Deklarationen sehen zwar etwas verwirrend aus, sind aber sehr einfach.

 box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.8), Einschub 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; 

Erläuterung: Hier gibt die Schlüsselworteinfügung an, ob sich der Schatten innerhalb der Box befindet. Die ersten beiden Nullen geben den X-Offset und den Y-Offset an und das 3px gibt die Unschärfe an. Weiter ist die Farbangabe. Ich habe hier rgba-Werte verwendet; rgba steht für Rot Grün Blau und Alpha (Opazität). Daher geben die 4 Werte innerhalb der Klammern die Menge an Rot, Grün, Blau und Alpha (Opazität) an. Sie werden feststellen, dass 5 Gruppen von Schattenerklärungen zusammengelegt wurden. Dies kann durch Trennen von ihnen mit einem Komma erfolgen. Die ersten zwei Schatten definieren den weißen "inneren Glüheffekt" und die nächsten beiden Deklarationen geben der Box ihr festes / klobiges Aussehen.

Spielen Sie mit diesen Werten herum, um zu verstehen, wie es funktioniert.

Vorschau

3. Styling des Eingabefeldes

Nun, da die Box fertig ist, können wir mit dem Styling des Eingabefeldes fortfahren.

 Eingabe [Typ = "Text"] {Float: links; Breite: 230px; Auffüllen: 15px 5px 5px 5px; Rand oben: 5px; Rand links: 3px; Rahmen: 1px einfarbig # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; Randradius: 5px; -moz-box-shadow: Einschub 0 5px 0 #ccc, Einschub 0 6px 0 # 989898, Einschub 0 13px 0 #dfdede; -webkit-box-shadow: Einschub 0 5px 0 #ccc, Einschub 0 6px 0 # 989898, Einschub 0 13px 0 #dfdede; box-shadow: Einschub 0 5px 0 #ccc, Einschub 0 6px 0 # 989898, Einschub 0 13px 0 #dfdede; } 

Die Stile, die für das Eingabefeld deklariert werden, sind denen ähnlich, die für die große Box #main . Wir haben den gleichen Umrandungsradius (5px) verwendet. Wiederum wurden mehrere Box-Schatten geworfen.

 box-shadow: Einschub 0 5px 0 #ccc, Einschub 0 6px 0 # 989898, Einschub 0 13px 0 #dfdede; 

Erklärung: Sie werden feststellen, dass diesmal die Schattenunschärfe auf 0 gehalten wurde, um einen scharfen Schatten zu erhalten, und ein vertikaler Versatz von 5px verwendet wird. In den aufeinander folgenden Deklarationen wurde die Unschärfe bei 0px beibehalten, aber die Farbe und der y-Offset wurden geändert. Spielen Sie wieder mit diesen Werten herum, um unterschiedliche Ergebnisse zu erhalten.

Vorschau

4. Styling der Schaltfläche "Senden"

Lassen Sie uns die Suchschaltfläche gestalten.

 input [type = "submit"]. solid {float: links; 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; Randradius: 5px; Text-Schatten: 0 1px 2px rgba (255, 255, 255, 0, 7), 0 - 1px 0 rgba (64, 38, 5, 0, 9); -moz-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 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 Leichtigkeit; } 

Abgesehen von den Farben hat der Suchknopf meistens dieselben Stile wie der der äußeren Box. Ähnliche Umrandungsradien und Box-Schatten wurden auf der Schaltfläche verwendet. Das neue Feature ist der text-shadow .

 Text-Schatten: 0 1px 2px rgba (255, 255, 255, 0, 7), 0 - 1px 0 rgba (64, 38, 5, 0, 9); 

Erläuterung: In der text-shadow Deklaration sind die ersten drei numerischen Werte der x-offset, y-offset und die Unschärfe. Die rgba-Werte zeigen die Schattenfarbe an. In der nächsten Deklaration (getrennt durch ein Komma) erhält der y-Offset den Wert -1. Dies geschieht, um dem Text einen "inneren Schatten" -Effekt zu verleihen. Der Hover / Fokus-Status der Schaltfläche "Senden" hat unterschiedliche Werte für Hintergrundfarbe und Schatten.

Vorschau

"Aktiv" -Zustand für Button

Der aktive Zustand der Schaltfläche hat ein bisschen mehr Änderungen. In diesem habe ich dem Button eine absolute Position und einen 'Top'-Wert von 5px gegeben. Dies wurde gemacht, um es natürlicher aussehen zu lassen, so dass es den Eindruck hat, dass der Knopf tatsächlich um 5 Pixel nach unten gedrückt wurde. Andere Änderungen am aktiven Zustand sind die der Hintergrundfarbe und der Schatten. Beachten Sie, dass ich den y-Versatz der Schatten reduziert habe, um ein "gedrücktes" Aussehen zu erhalten. Hier ist der Code für den aktiven Status der Schaltfläche "Senden":

 input [type = "submit"]. solid: aktiv {background: # f6a000; Position: relativ; oben: 5px; Grenze: 1px fest # 702d00; -moz-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc; } 

Der vollständige (CSS) Code

Dies vervollständigt unser Suchfeld. Wir haben einige der neuen CSS3-Funktionen verwendet. Hier finden Sie das komplette CSS und HTML dieses Suchfelds.

 #main {Breite: 400px; Höhe: 50px; Hintergrund: # f2f2f2; Auffüllen: 6px 10px; Grenze: 1px fest # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; Randradius: 5px; -moz-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.8), Einschub 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.8), Einschub 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.8), Einschub 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; Auffüllen: 15px 5px 5px 5px; Rand oben: 5px; Rand links: 3px; Rahmen: 1px einfarbig # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; Randradius: 5px; -moz-box-shadow: Einschub 0 5px 0 #ccc, Einschub 0 6px 0 # 989898, Einschub 0 13px 0 #dfdede; -webkit-box-shadow: Einschub 0 5px 0 #ccc, Einschub 0 6px 0 # 989898, Einschub 0 13px 0 #dfdede; box-shadow: Einschub 0 5px 0 #ccc, Einschub 0 6px 0 # 989898, Einschub 0 13px 0 #dfdede; } input [type = "submit"]. solid {float: links; 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; Randradius: 5px; Text-Schatten: 0 1px 2px rgba (255, 255, 255, 0, 7), 0 - 1px 0 rgba (64, 38, 5, 0, 9); -moz-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 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 Leichtigkeit; } input [type = "submit"]. solid: hover, eingabe [type = "submit"]. solid: focus {background: # ffd842; -moz-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.9), Einschub 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.9), Einschub 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.9), Einschub 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: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: Einschub 0 0 3px rgba (255, 255, 255, 0.6), Einschub 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc; } 

Ich hoffe, dir hat dieses Tutorial gefallen. Fühlen Sie sich frei, mit diesen Funktionen zu experimentieren und vergessen Sie nicht, Ihre Gedanken zu teilen.

Anmerkung der Redaktion: Dieser Beitrag wurde von Bharani M für Hongkiat.com geschrieben. Bharani ist ein Designer / Entwickler aus New Delhi, Indien.

10 Codepen Tipps für Anfänger

10 Codepen Tipps für Anfänger

Codepen ist eine super einfache und populäre Seite, um sofort eine funktionierende Front-End-Code-Combo zu erstellen . Wenn Sie nicht wissen, was Codepen ist oder noch nicht gehört haben, ist es im Grunde ein Online-Quellcode Spielplatz (nennen wir es OSCP zu nerdier klingen) für die drei Musketiere der Front-End-Codierung; HTML, CSS und JavaScript .Es

(Tech- und Design-Tipps)

10 Comic-themenorientierte Plakate, zum Sie Life Lessons zu unterweisen

10 Comic-themenorientierte Plakate, zum Sie Life Lessons zu unterweisen

Mit einer Fülle von Ressourcen, die uns zur Verfügung stehen, suchen wir manchmal nach kleinen Geheimnissen aus dem Internet oder von den Menschen um uns herum. Comics sind normalerweise nicht die erste Wahl einer Person für die Gedanken des Lebens, aber es gibt definitiv ein paar Edelsteine, die Ihnen einen Einblick geben und Sie auch zum Lachen bringen können.Com

(Tech- und Design-Tipps)