Formulare mit HTML und CSS

Textfelder gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Textfelder lassen sich gut per CSS gestalten. Sehen Sie, wie Sie hier einen schönen Effekt realisieren: Das Textfeld glüht, wenn der Benutzer hinein klickt.

Transkript

Textfelder lassen sich gut per CSS gestalten. Sehen Sie, wie wir hier einen schönen Effekt realisieren, nämlich ein Glühen, wenn man reinklickt. Wie funktoniert das Ganze? Als Basis brauchen wir natürlich ein Textfeld. Das könnte natürlich auch ein E-Mail-Feld sein. In diesem Beispiel ein Textfeld, input type="text". Die Einzelformatierungen wollen wir uns jetzt interaktiv anschauen. So sieht das Textfeld ohne irgendwelche Formatierungen aus. Wenn ich möchte, dass das Textfeld etwas größer ist, dann empfiehlt sich, dafür Padding einzusetzen, also einen Innenabstand zu definieren. Im Beispiel 6 Pixel nach oben und nach unten und 12 Pixel nach rechts und links. Außerdem können Sie Sachen bestimmen wie die Schriftgröße, Zeilenhöhe. Sie können auch die Schriftfarbe ändern. Sie sehen, das ist so ein Grau. Ganz wichtig ist, wenn Sie eine eigene Formatierung machen wollen, dass Sie eine Border explizit festlegen, sonst wird nämlich die Border vom Browser genommen. Wenn ich hierhin schalte, sieht man, dass sonst auch eine Border vorhanden ist. Aber es ist eben besser, eine eigene zu definieren. Das Feld ist derzeit ganz eckig. Wenn ich möchte, dass es abgerundete Ecken hat, dann nehme ich dafür border-radius. Im Beispiel border-radius: 4 Pixel, das heißt, es ist ganz leicht abgerundet. Um den Effekt deutlicher zu zeigen, kann ich natürlich auch mal auf einen anderen Wert gehen. Dann sieht man, das ist mehr abgerundet. Damit steht unser Feld im Normalzustand. Hintergrundfarbe kann ich natürlich auch definieren. Jetzt wollen wir ja einen Effekt beim Klicken. Dafür ist die Pseudoklasse focus zuständig. Die kann ich mir anschauen. Im Firefox etwa, indem ich mit der rechten Maustaste auf das Element klicke. Hier in den Entwickler-Tools, und dann focus wähle. Jetzt sehe ich den Fokuszustand. Da kann ich natürlich eine andere Rahmenfarbe bestimmen. Für meinen Glüheffekt ist es wichtig. Außerdem sollte ich über Outline den Rand drumrum entfernen. Dann kann ich einen anderen Box Shadow bestimmen, der eben genau diesen Glüheffekt macht. Im Beispiel ist es ein doppelter Schatten. Einer, der nach innen geht. Ich verändere mal seine Farbe, damit man ihn sieht. Das ist ein bisschen sehr schwach und ich muss ihn auch etwas stärker machen, dass er nicht gar so durchsichtig ist. Dann sieht man, das ist dieser kleine Schatten hier. Außerdem ist es ein Schatten drumrum, seine Farbe verändere ich auch, damit wir das deutlicher sehen, dass dieser hier eben auch da ist. Also zweifache Schatten beim Fokuszustand. Wenn wir uns erinnern, im ursprünglichen Beispiel findet das ja leicht animiert statt. Ich klicke rein und es beginnt dann zu glühen. Dafür ist eine Transition zuständig. Die Transition wird immer beim Ursprungszustand notiert. Die Transition soll im Beispiel sowohl auf Border Color wirken, für die Rahmenfarbe, als auch auf Box Shadow. Sehen wir uns das Beispiel noch einmal im normalen Code an. Ich habe mein Input-Textfeld, was formatiert wird. Solche Sachen wie Padding, damit es größer wird. Wichtig: der Rahmen. Außerdem: abgerundete Ecken. Dann ist eine Transition definiert, damit der Übergang spürbar ist. Sowohl für Border Color und außerdem für Box Shadow. Beim Fokuszustand ist die Rahmenfarbe geändert und es wird ein Box Shadow bestimmt. Genau genommen ist es ein doppelter Schatten. Einer geht nach innen und einer geht nach außen. Die Farbe des Schattens ist mit RGBA spezifiziert. Da kann man als letzten Parameter ja immer den Grad der Transparenz angeben. Das ist natürlich eleganter, wenn die Schatten nicht so stark sind. Sie haben ein kleines Beispiel gesehen, wie man Textfilter realisiert und einen kleinen netten Effekt umsetzt, nämlich dieses Glühen bei Klick.

Formulare mit HTML und CSS

Lernen Sie Formulare mit HTML zu erstellen und wie die Formatierung von Formularen und die responsive Anordnung der Felder vonstatten geht.

1 Std. 16 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!