Reines CSS3-Form-Styling wird immer beliebter. Es hat seine Nachteile, aber die erhöhte Ladezeit von der traditionellen JS-Overlay ist verschwendet Zehntelsekunden, wenn über Optimierung zu maximieren für Ihre gesamte Zielgruppe zu sprechen. Die meisten Formulare sind ziemlich geradlinig und nutzen nur Eingaben und Textbereiche anstelle von Radios und Kontrollkästchen, die ihre eigene Herausforderung schaffen.
Der folgende Beispielcode ist nur eine kleine Auswahl dessen, was Sie tun können. Scheuen Sie sich nicht, Ihrem Formular Hintergrundverläufe oder Farbe hinzuzufügen. Ich konzentriere mich auf einen Standard-Grau-Look für die meisten Elemente, weil es ein breiteres Publikum zufriedenstellt, als farbspezifisch zu sein. Sie können mit dem Schatten und der Hintergrundfarbe herumspielen, um Ihrer Website ein völlig anderes Aussehen hinzuzufügen. Wenn Sie eine dunkle Website haben, schlage ich vor, den CSS-Formularcode zu wechseln, um auf einem dunklen Hintergrund zu mischen und pop. Fügen Sie einfach dieses CSS zu Ihrem Stylesheet hinzu, um jedes Formular sofort zu formatieren.
Eingabe -
Polsterung: 10px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
Grenzradius: 4px;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-shadow: 0 0 5px #444;
box-shadow: 0 0 3px #444;
Rahmen: 1px solide #fff;
}
textbereich
Polsterung: 15px;
Rahmen: 1px solide #fff;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
Grenzradius: 4px;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-shadow: 0 0 5px #444;
box-shadow: 0 0 10px #444;
}
einga[type="text"]be:hover, textarea:hover
Rahmen: 1px solide #233567;
}
Standardformular ohne CSS. Es sieht aus wie eine ziemlich langweilige Form für mich!
Wenn wir nun das CSS hinzugefügt haben, können wir das Gesamtbild des Formulars wirklich verbessern. Diese Form ist viel spannender! Es gibt ein aktualisiertes und moderneres Gefühl mit den abgerundeten Ecken, der sanften Schattenung und der Polsterung, die einen größeren Eindruck gibt. Dieser Formularstil passt für viele Websites, aber es passt definitiv nicht für jede Website. Ich hoffe, Sie genießen es, dieses Formular nach Ihrem Geschmack anzupassen.
Das CSS auf dem Formular hat einen großen Einfluss auf Ihr Web-Erscheinungsbild. Wenn Sie daran interessiert sind, Ihr Formular weiter zu verbessern, können Sie mit anderen Eigenschaften anpassen, die Sie in den Tutorials hier finden: Hintergrundfarbe, Farbverlauf, Auffüllung oder sogar ein Bild, aber ich denke, Sie werden zufrieden sein, nur indem Sie ein wenig CSS zu Ihrem Stylesheet hinzufügen.