#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.

30 Cheatsheets & Infografiken für digitale Vermarkter

Ein Digital-Vermarkter arbeitet auf vielen Medien oder Plattformen wie Social Media, Internet, Fernsehen, Werbetafeln, Radio und sogar SMS. Um auf dieser breiten Palette von Plattformen zu bleiben, müssen digitale Vermarkter mit den Trends Schritt halten, die die vielen verschiedenen Aspekte jedes Mediums betreffen .

(Tech- und Design-Tipps)

Typograph 101: Serif vs. Sans-Serif

In der Phase der Schriftauswahl fragt sich ein Designer oft: "Serif oder Sans-Serif"? Die Auswahl der Art der Schrift für die Verwendung in einem Design ist von größter Bedeutung, da sie die Lesbarkeit, Benutzerfreundlichkeit und die allgemeine Ästhetik des Designs stark beeinflusst.Obwohl, egal wie viel Erfahrung Sie mit Typografie haben, können Sie immer in der Serifen-gegen-Sans-Serif-Dilemma stecken bleiben . Ich

(Tech- und Design-Tipps)