Share
Einer der leistungsfähigsten und wenig genutzten CSS-Selektoren ist der allgemeine Geschwister-Kombinator: ~. In den kommenden Tutorials gehe ich auf verschiedene Arten ein ~ Komponenten zu schaffen, die nicht nur optisch ansprechend sind, sondern auch funktional und nützlich sind. Dieses Tutorial behandelt Formularelemente. Radio, Kontrollkästchen und reguläre Eingänge.
Wir werden viel lernen: moderne CSS-Selektoren, die wird sich verändern Eigentum, SVG Schlaganfall Eigenschaften, Eingabestatus und vieles mehr!
Ein kurzer Haftungsausschluss: Diese CSS-Effekte funktionieren möglicherweise nicht in älteren Browsern. Ich habe sie in den neuesten Versionen von Chrome, Firefox und Safari getestet.
Ich werde Haml (einen HTML-Compiler) und Sass (einen CSS-Präprozessor) verwenden, um den Codierungsprozess zu beschleunigen! Die Demos verwenden Haml, während Inline-Codes normales HTML verwenden.
Ich verwende auch den erstaunlichen AutoPrefixer anstelle von Herstellerpräfixen. Wenn Sie CodePen verwenden, gehen Sie zu den Einstellungen Ihres Stiftes, klicken Sie auf CSS und wählen Sie AutoPrefixer.
Wählen Sie in den Stifteinstellungen AutoPrefixer ausWir beginnen mit einem der grundlegendsten Formelemente: dem Radioeingang. Es gibt zwei visuelle Hauptzustände (markiert und nicht markiert) sowie zwei dazwischen liegende Zustände (Schwebeflug und Klick / Aktiv-Klick ähneln dem markierten Zustand)..
Der erste Schritt besteht darin, unseren HTML-Code einzurichten. Sie benötigen einen Hauptaußenbehälter und einen Innenbehälter mit zwei Kindern: a div enthält die Eingabe- und visuellen Elemente und a Etikette für die Eingabe. Ich benutze gerne eine Feldsatz für den äußeren Behälter. Stellen Sie sicher, dass Sie eine ID für die Eingabe hinzufügen, die mit der übereinstimmt zum Attribut auf dem Etikett.
Der nächste Schritt ist das Ausblenden der Standardeingabe, das Hinzufügen eines grundlegenden visuellen Stils und das Ausblenden der zusätzlichen Elemente, die nur dann angezeigt werden, wenn der Radioeingang ausgewählt ist. Die Idee ist, die Eingabe unsichtbar zu machen, aber positionieren Sie sie auf oben der visuellen Elemente, so dass das Klicken auf den Radioeingang wie ein Klick auf die visuelle Radiooption aussieht. Wir können dies durch Einstellung tun Position: relativ zu .svg und Position: absolut zu der Eingabe, dann versteckt die Eingabe.
Hinweis: Sie können dieses Format beliebig formatieren. Ich habe einen grundlegenden Kreisstil gewählt, der das Standardradio nachahmt, außer dass es flacher ist.
Wir setzen einige Farbvariablen mit Sass. ein paar graue Farben und ein helles Blau für das ausgewählte Radio. Wir setzen auch eine Variable $ p für unsere Standardeinheit-12px ist eine schöne Zahl, da sie durch eine Vielzahl unterschiedlicher Zahlen (1, 2, 3, 4, 6) teilbar ist..
Ich füge die Hauptvariablen direkt in die Einbettung ein, aber zusätzliche Formatierungen finden Sie hier oder durch Klicken auf die CodePen-Seite durch Klicken auf die Einstellungen in der oberen rechten Ecke und klicken Sie auf die CSS Registerkarte, um weitere Stylesheets anzuzeigen.
Wir haben den ersten Kreis hellgrau und den zweiten Kreis hellblau gemacht und dann den zweiten Kreis durch Einstellen ausgeblendet transformieren: Skala (0). Später werden wir den Kreis wieder animieren, daher ist es wichtig, die Skala jetzt einzustellen.
Nachdem wir all das eingerichtet haben, müssen wir die visuellen Stile für jeden Zustand festlegen. Für dieses Beispiel entschied ich, dass der hellgraue Kreis beim Schweben heller blau werden sollte; Beim Klicken wird der blaue Kreis eingeblendet und der graue Hintergrund wird weiß und bleibt dann für den aktivierten Zustand erhalten. Sie können den geprüften Zustand eines Radios nur durch Klicken auf ein anderes Radio entfernen. In diesem Fall sollten Blau und Weiß einfach verschwinden.
Wir werden zuerst die Farben einstellen und dann animieren, nachdem alle Zustände Farben haben. Hier ist die Tilde ~ ist praktisch. Diese allgemeine Geschwisterauswahl (die Geschwister-Kombinator) wählt das zweite Element aus, solange es irgendwo vor dem ersten Element steht, und sie haben ein gemeinsames übergeordnetes Element. Wir gebrauchen Eingabe: hover ~ div , um das visuelle Element auszuwählen, wenn die Eingabe über den Cursor bewegt wird.
Klicken Sie das erste Funkgerät an, dann das zweite Funkgerät, in dem Sie den Schwebeflug und die aktiven / geprüften Zustände deutlich sehen können.
Der letzte Schritt ist das Einrichten der Animationen für jeden Zustand. Der Schlüssel zum Animieren all dieser verschiedenen Zustände besteht darin, standardmäßig die ungeprüften Übergänge und die aktivierten Übergänge festzulegen, wenn auf die Eingabe geklickt wird. Ich verwende eine neue CSS-Eigenschaft namens wird sich verändern um dem Browser mitzuteilen, welche Eigenschaften ich animieren werde.
Sie können diesen benutzerdefinierten Radioeingang auch ohne SVG erstellen. Das Setup ist ähnlich:
Das CSS ist fast genau dasselbe, mit etwas mehr Styling für die beiden div Elemente, die die SVG-Kreise ersetzt haben. In diesem Fall verwenden wir n-te des Typs (n) Um die verschiedenen div-Elemente auszuwählen, müssen wir ihnen keine Klasse im HTML-Code zuweisen.
Mit der SVG-Version gibt es mehr Markup, aber weniger Styling. Mit der HTML-Version ist es umgekehrt. Die Ergebnisse sehen identisch aus. Versuchen Sie also, je nachdem, welches Ihren Codierungsvorlieben entspricht!
Das nächste Formularelement, das wir anpassen werden, ist die Checkbox-Eingabe. Die Zustände sind denen des Radiosignals ähnlich: zwei visuelle Hauptzustände (geprüft und ungeprüft) und zwei dazwischenliegende Zustände (Schwebeflug und Klick / aktiv).
Das Setup ähnelt dem Radioeingang sehr, verwendet jedoch Linien, um das Häkchen anstelle von Kreisen zu bilden.
Die Zeilen in der ersten Gruppe haben eine hellgraue Farbe und werden nicht animiert. Die Zeilen in der zweiten Gruppe werden animiert, wenn auf die Eingabe geklickt wird.
Es gibt auch einen zusätzlichen div Element; Wir verwenden dies, um einen Klickeffekt zu erzeugen, bei dem das helle Blau in den Hintergrund hineinragt. Damit der Effekt funktioniert, muss das div ein blauer Kreis mit einer größeren Breite und Höhe als das tatsächliche Kontrollkästchen sein, und der äußere Container muss vorhanden sein Überlauf versteckt; Stellen Sie so ein, dass die Kanten des Kreises nicht angezeigt werden. Das runde div sollte haben transformieren: Skala (0) eingestellt, ähnlich dem Radio.
Kontrollkästchenmaße (links) und Kreismaße (rechts)Formatieren Sie dies erneut nach Ihren Wünschen. Ich beschloss, die Kanten des Häkchens sowie alle Ecken abzurunden.
Der nächste Schritt ist die Vorbereitung auf die Animationen. Die Effekte sind denen des Radios ähnlich, mit der Ausnahme, dass sich anstelle eines sich erweiternden Kreises das Häkchen einfügt. Für diese Animation müssen wir sie verwenden Schlaganfallversatz auf den SVG-Linien.
Um zu animieren Schlaganfallversatz, Wir brauchen die Länge jeder Zeile. Ich habe in CodePen ein Werkzeug erstellt, um die Längen zu berechnen. Wenn Sie jedoch das Häkchen verwenden, das ich bereits erstellt habe, wird die kürzere Linie verwendet 6.708 und je länger ist 14.873. Wir werden diesen Wert verwenden, um beide einzustellen Schlaganfallversatz und Schlaganfall-Strich. Dies ist nur für den ersten Haken erforderlich (der zweite Satz von Zeilen wird standardmäßig im ungeprüften Zustand angezeigt)..
Wenn die Eingabe angeklickt wird, setzen wir das Schlaganfallversatz zu 0, was (mit einem Übergang) so aussieht, als sei die Linie "gezeichnet". Wir müssen auch die anderen Statusänderungen des benutzerdefinierten Radios hinzufügen, einschließlich der Hintergrundänderungen beim Schwebeflug und der Kreisskala beim Klicken.
Der letzte Schritt ist das Hinzufügen aller Übergänge. Wieder setzen wir standardmäßig die ungeprüften Übergänge und die aktivierten Übergänge beim Klicken. Ähnlich wie beim Kreis, der für das Radio ausgeblendet wird, wird das Häkchen ausgeblendet, wenn das Kontrollkästchen deaktiviert ist.
Sie können den gleichen Effekt auch mit ein paar div-Elementen erhalten, anstatt eine SVG zu verwenden. Das Markup ist einfacher, aber nicht so klar abgegrenzt. Das erste leere Div ist der sich erweiternde blaue Kreis, das zweite ist das Standard-Häkchen und das dritte ist das Häkchen, das beim Klicken animiert wird.
Wir werden verwenden :Vor und :nach dem Als Teil des Kontrollkästchens wird das Markup vereinfacht. Andernfalls benötigen Sie mindestens vier leere Elemente, um die beiden Kontrollkästchen zu erstellen. Wir müssen die Linien manuell positionieren und in Position drehen, aber Sie können eine einzige Transformation verwenden, um sie sowohl zu drehen als auch einzuzeichnen.
Sie können auch ein Häkchensymbol verwenden, anstatt die div-Elemente zu drehen! Es ist nicht ganz dasselbe wie die anderen beiden visuell, aber es funktioniert genauso gut.
Hinweis: Sie benötigen nur das HTML-Symbol in den letzten beiden div-Elementen, aber in der folgenden Demo habe ich es in allen drei divs eingefügt, damit ich es in die wiederholte Schleife einfügen kann.
Da das Symbol nicht gezeichnet werden kann, wird die weiße Version beim Klicken ein- und ausgeblendet. Schauen Sie sich unten alle drei Versionen an!
Der letzte Teil dieses Tutorials ist die normale Texteingabe. Ich habe mich von den Eingaben der Materialzeile von Google inspirieren lassen. Diese Eingänge haben verschiedene Zustände: Standard, Aktiv / Fokus (wenn der blinkende Cursor sichtbar ist) und ein subtiler Schwebeflug.
Das Setup ist noch minimaler als bei den beiden vorherigen Eingabestilen. Wir haben ein Feldset, die Eingabe, eine Beschriftung und ein div-Element für den Rand.
Im nächsten Schritt wird die Eingabe gestaltet. Wir werden die Eingabe dieses Mal nicht verstecken, da wir sie benötigen, um den Wert anzuzeigen. Wir erstellen auch ein Label, das sich auf und ab bewegt, wenn wir uns auf die Eingabe konzentrieren. Damit dies funktioniert, müssen wir das Etikett genau über der Eingabe positionieren. Die div-Grenze wird ein :nach dem Pseudoelement, das beim Klicken auf die Eingabe über den Rand gezogen wird; wir setzen ein Skala (0) auf dem Pseudoelement, um es für die Animation vorzubereiten.
Wenn Sie versuchen, auf die Demo-Eingabe oben zu klicken und mit der Eingabe zu beginnen, werden Sie feststellen, dass der Text über dem Etikett ausgegeben wird. Wir animieren das Etikett, um es zu verkleinern und per Mausklick zu übersetzen. Sie können vollständige Transformationen verwenden, um eine Neulackierung zu verhindern, anstatt sie zu verwenden Schriftgröße wie ich es tat, aber ich fand das genauso gut wie translateY gab mir eine viel präzisere Animation. Wir werden auch die Skala von den Divs entfernen :nach dem um die Zeichnungsanimation zu machen.
Wenn Sie nun versuchen, auf die obige Demo-Eingabe zu klicken, und die Eingabe erneut zu beginnen, wird die Beschriftung verkleinert und ruckfrei nach oben verschoben. Wenn Sie jedoch den eingegebenen Text in der Eingabe belassen und nach außen klicken, verschiebt sich die Beschriftung wieder nach unten und behindert die Eingabe. Wir können JavaScript verwenden, um dieses Verhalten zu verhindern, aber wir können auch einen CSS-Eingabestatus verwenden :gültig.
Wir können entweder hinzufügen erforderlich als leeres Attribut zu unserer Eingabe in HTML oder hinzufügen : erforderlich => wahr zu unseren Eingabeattributen in Haml. Dann fügen wir hinzu :gültig zum :Fokus Eigenschaften in unserem Sass / CSS. Dies fügt unserer Eingabe einen zusätzlichen visuellen Status hinzu. Da es sich um eine einfache Texteingabe handelt, ist der einzige gültige Status, wenn Text eingegeben wird.
HinweisDurch die Verwendung einer anderen Art von Eingaben, beispielsweise einer E-Mail-Eingabe, wird dieses Verhalten unterbrochen, da für E-Mail-Eingaben andere Gültigkeitsanforderungen gelten.
Wenn Sie mit diesen Techniken eigene Eingaben erstellen möchten, jedoch mehr visuelle Inspiration benötigen, lesen Sie die UI-Kits, die mit einem Envato Elements-Abonnement verfügbar sind:
UI-Kits für Envato ElementsEs gibt Dutzende verschiedener Möglichkeiten, den allgemeinen Geschwister-Selektor zu verwenden, der visuell, funktional oder beides ist. Es bietet eine leistungsfähige Möglichkeit zum Anpassen von Komponenten, ohne mehr als nur CSS und HTML verwenden zu müssen. In diesem Lernprogramm haben wir drei verschiedene Arten von Formularelementen behandelt. In der nächsten werden wir Menüs und Navigation erkunden. Wenn Sie Fragen oder Anregungen haben, können Sie unten einen Kommentar hinterlassen!
Accentsconagua