Designer haben möglicherweise eine zunehmende Verwendung von CSS3-Übergangseigenschaften festgestellt. Die Benutzeroberflächen der Website wurden mit benutzerdefinierten Animationsstilen erheblich verbessert, und dies alles ohne die Verwendung von JavaScript (bei sinnvoller Verwendung natürlich!).
In diesem Tutorial möchte ich zeigen, wie Animationseffekte in HTML5-Eingabefeldern erstellt werden können. Ich entwerfe ein einfaches Kontaktformular mit einigen Feldern und einem Textfeld. CSS3 verwenden :gültig Pseudoklasse Es ist einfacher als je zuvor, Texteingaben anzupassen. Schauen Sie sich mein Live-Demo-Beispiel an, um eine Vorstellung davon zu bekommen, wie das Endprodukt aussieht.
Live Demo - Quellcode herunterladen
Dokument starten
Wir müssen mit einer leeren index.html-Datei beginnen, die den Standard-Doctype HTML5 verwendet. Ich werde einige alternative Web-Fonts hinzufügen, um das Design zu verbessern. Es ist jedoch nichts, was die Qualität des Tutorials dramatisch beeinflusst.
Der interessantere Abschnitt der Seite bezieht sich auf das Erstellen eines generischen HTML5-Formulars. Der Submit-Button tut nichts anderes als die Seite neu zu laden. Es wird jedoch nicht empfohlen, dass Sie für die Datenverarbeitung oder auch für die Verbindung über Ajax keine Verbindung zu einem Backend-PHP- oder Ruby-Skript herstellen können. Die CSS3-Übergänge sollten nur Frontend-Styles betreffen und nichts weiter.
Jede Eingabe ist in einem Div mit der Klasse enthalten .Reihe die Elemente getrennt halten. Auf diese Weise ist es viel einfacher, das Etikett direkt neben dem Eingabefeld anzuzeigen. Und ähnlich, um andere Hinweise oder Warnungen auf der rechten Seite der Felder einzufügen. Jede Eingabe erhält die Klasse .TXT während das Textfeldelement mit formatiert wird .txtarea.
CSS-Layoutstruktur
Ich möchte in unseren CSS-Code springen und zunächst die CSS-Resets erklären. Ich verwende eine ähnliche Blockvorlage zum Zurücksetzen von Browsern auf ähnliche Standardeinstellungen für Schriftgröße, Zeilenhöhe und auch für die Boxgröße. Außerdem setze ich die verschiedenen Web-Fonts ein und strukturiere die Basiselemente mit dem richtigen Abstand. Speichern Sie diese Vorlage zur Verwendung in anderen Webprojekten.
Beim Einstieg in den Core-Body-Abschnitt haben wir ein Wrapper-Div mit der ID #w. Diese wird auf der Seite mit einer begrenzten Breite von 660 Pixeln zentriert. Die internen Zeilenelemente sind als Blockcontainer mit internen Beschriftungen und Formulareingabefeldern gestaltet.
Die kleine Klasse .req ist für erforderliche Sternchenzeichen, die in den Etiketten verwendet werden. Noch interessanter ist jedoch der letzte Abschnitt des Codes zum Überschreiben des internen Platzhaltertextes. Nicht alle CSS3-Browser unterstützen diese Eigenschaften vollständig, funktionieren jedoch in aktualisierten Webkit- und Mozilla-Engines.
Sie werden feststellen, dass die Platzhalter für interne Formulartexturen jetzt kursiv dargestellt sind und einen Textfarbton in Dunkelgrau / Blau annehmen. Ich finde dieses zusätzliche CSS hilft, den tatsächlichen vom Benutzer eingegebenen Buchstaben von dem Platzhalter-Beispieltext zu unterscheiden.
Styling mit Übergängen
Ich möchte in den letzten Abschnitt einsteigen und besprechen, wie wir Pseudoklassen verwenden können, um Animationen auszuführen. Die wichtigsten Stile beginnen mit dem .TXT und .txtarea Klassen, die für jedes Formularelement verwendet werden.
Ich habe viele Anpassungen mit neueren CSS3-Eigenschaften vorgenommen. Beachten Sie aber auch, wie ich die einzelnen Hintergrundeinstellungen nach ihren einzigartigen Eigenschaften aufgeteilt habe Hintergrundfarbe und Hintergrundbild. Dies ist notwendig, wenn Sie das Häkchen in der Eingabe animieren müssen, ohne von links nach ganz zu rutschen. Stattdessen halten wir es einfach nach rechts, wo es nicht sichtbar ist, und animieren es dann von rechts.
Sie werden auch feststellen, dass die Codes für :Fokus und :gültig sind sehr verschieden. Dies ist ein weiterer Grund, warum das Aufteilen der Eigenschaften eine so gute Idee ist, weil wir etwas in einer Pseudoklasse animieren können, aber nicht in der anderen. Jede Übergangseigenschaft zielt auf alle Änderungen ab. Sie müssen also darauf achten, welche Eigenschaften aktualisiert werden.
Beachten Sie, dass der Benutzer nur dann einen gültigen Namen eingeben kann, um ihn ein paar Sekunden später zu löschen. Unser gültiger Selektor muss sich wieder mit den grundlegenden Eigenschaften beschäftigen :Fokus Eigenschaften werden ebenfalls angezeigt. Segmentierte Animationen sind der Schlüssel, damit diese Stile funktionieren. Dies erfordert einige Trial-and-Error-Fehler, diese Effekte können jedoch auch in jedem älteren Browser mit zusätzlichem JavaScript dupliziert werden.
Ein weiterer Aspekt der animierten Form ist die Schaltfläche "Senden". Offensichtlich sind die zusätzlichen Effekte im Vergleich zu den Eingabefeldern vernachlässigbar. Aber ich denke, alle Eigenschaften sind es wert, untersucht zu werden, da sie miteinander in Beziehung stehen.
Anstatt verschiedene Hintergrundeigenschaften einzurichten, habe ich nur CSS3-Verläufe und ihre herstellerspezifischen Präfixe verwendet. Dies hält den Hintergrund stabil und verbessert gleichzeitig die Schatten der Boxen durch Schwebeflug und aktive Zustände.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Das Erstellen von formalen CSS3-Animationen erfordert Arbeit. Es gibt externe Bibliotheken wie Animate.css, die helfen können, aber dennoch nicht so viel Unterstützung wie JavaScript bieten. Zum Glück sind die CSS3-Standards so weit, dass sie grundlegende Animationen bereitstellen können - Schwebeflug, Fokus und ähnliche Pseudoklassen.
Ich hoffe, dass dieses Tutorial eine Beispiel-Codebase für Webentwickler bietet. Sie können viel lernen, indem Sie einfach einige Stunden lang Techniken üben. Fühlen Sie sich frei, eine Kopie meiner Beispielcodes herunterzuladen und mit verschiedenen Einstellungen herumzuspielen. Es ist nicht so schwierig, wie Sie vielleicht erwarten, ähnliche Übergänge auf Ihrer eigenen Website zu implementieren.