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.

So erhalten Sie den Bildschirmschoner von Apple TV auf Ihrem Mac oder PC

So erhalten Sie den Bildschirmschoner von Apple TV auf Ihrem Mac oder PC

Besitzer von Apple TV der 4. Generation kennen sich mit Aerial aus, einem Bildschirmschoner, der von einer erhöhten Position aus verschiedene Städte auf der ganzen Welt zeigt. Für diejenigen von uns, die kein Apple TV besitzen, haben zwei Github-Benutzer den Bildschirmschoner auf Mac und PC portiert, um uns Zugang zu einem der coolsten Bildschirmschoner zu verschaffen.Di

(Tech- und Design-Tipps)

5 kostenlose Bildvergleichsslider-Skripte

5 kostenlose Bildvergleichsslider-Skripte

Mit überlagerten Schiebereglern können Sie zwei Bilder vergleichen, normalerweise eine Vorher-Nachher-Art, wobei die beiden Bilder einander überlagert werden. Ein Schieberegler, der manipuliert werden kann, kann vom Benutzer gezogen werden, um weniger von dem Vorher-Bild und mehr von dem Nachbild und umgekehrt zu zeigen.Es

(Tech- und Design-Tipps)