Fundstück

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

 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>
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.