Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Fundstück

Langweilige Formulare sind von gestern: 27 schicke CSS-Alternativen für Platzhaltertexte

    Langweilige Formulare sind von gestern: 27 schicke CSS-Alternativen für Platzhaltertexte

(Grafik: tympanus.net)

Sind Platzhalter sinnvoll oder nicht? Eine gute Alternative bieten diese 27 CSS-Animationen, mit wenig Aufwand entstehen anschauliche Formulare.

Was die Nachteile von Platzhaltern in Formularen sind, haben wir erst kürzlich in einem anderen Artikel beschrieben. Wer nach wie vor eine gespaltene Meinung hat, ob er für oder gegen Platzhalter ist, der sollte unter den 27 Animationen eine Alternative finden. Inspiriert von Adrej Radisic's Arbeit auf Dribble hat Codedrops eine ganze Reihe an anschaulichen Animationen für Texteingabefelder veröffentlicht. Wer gerne mit Animationen arbeitet und diese auf seiner Website oder in einem Projekt darstellen möchte, der sollte sich diese CSS3-Animationen auf keinen Fall entgehen lassen.

Hoshi, Kuro und Kaede

Einer der 27 Animationen ist der „Hoshi“-Effekt. Er schiebt die Platzhalter beim Klick nach oben, macht so Platz für die Eingabe und zeigt nach wie vor Informationen über die Abfrage. „Kuro“ zeigt einen spezielleren Effekt – das Inputfeld teilt sich in der Mitte und der Platzhaltertext schiebt sich nach unten. Eine sehr hastige aber auch gute Lösung ist „Kaede“: Hier werden die Platzhaltertexte einfach nach rechts geschoben – das Design erinnert dann ein wenig an einen Button und könnte vielleicht falsche Assoziationen auslösen. Interessant ist auch die „Kohana“-Animation, wo statt der Platzhaltertexte beim Klick ins Feld ein passendes Icon den Text ersetzt.

27 CSS-Alternativen
(Screenshot: tympanus.net)

1 von 10

Anzeige

 Umsetzung

Da jeder Effekt eine eigene CSS-Animation hat, orientiert sich das Beispiel am „Haruki“-Effekt. Die Animation wird über Label, mit Hilfe folgenden CSS-Pseudoklassen getriggert: .input__field--haruki:focus und .input__label--haruki:after. Das bedeutet sobald input geklickt wird, wird das direkt darauf folgende Element, hier label, angesprochen und mit Hilfe vom Pseudoelement :after eine Animation ausgeführt. Das können zum Beispiel Border-Styles, Background-Colors oder ein Overlay, wie im Beispiel „Kyo“ sein.

<code>
<span class="input input--haruki">
<input class="input__field input__field--haruki" type="text" id="input-1" />
<label class="input__label input__label--haruki" for="input-1">
<span class="input__label-content input__label-content--haruki">First Name
</label>
</span>
</code>

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot