入力フォームの入力欄を飾るアニメーション Animated input labels

入力フォームの入力欄を飾るアニメーション Animated input labels
このエントリーをはてなブックマークに追加
PR

Animated input labels
By Jeff Harbers

See the Pen Animated input labels by Jeff Harbers (@jeffharbers) on CodePen.

http://codepen.io/jeffharbers/pen/dLIjt

入力欄にフォーカスすると、ラベル部分がアニメーションしてデザインが変わるものです
入力が必須のところで入力が無いと赤色の表示のエラーを示すようになっていています。入力内容も判別しているようです

よく出来たフォームとなっています
すぐにでも実用可能なデザイン性と機能性があります

初期の文字はHTMLのplaceholderを使って表現されています、何か入力されると消えるようになっています。

 

こちらのアイディアに発起されて作られたみたいです
http://codepen.io/oknoblich/pen/wFGIH

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)