テキストエリアがアクティブになるとプラベルの文字がピョンっと飛び出す 入力フォームのデザイン

WS003056
このエントリーをはてなブックマークに追加
PR

お問い合わせフォームや、会員登録等のフォームで使われるような入力フォームで、その場所がアクティブにあると、中にあるラベルである文字が入力の箇所からぴょんと飛び出すアクションの入力フォームのデザインです。

fancy text inputs2

DEMO 表示

 

文字の部分は、プレースホルダーではなくラベルを使って表現。
対象のinputにフォーカスがあたっている状態になると、なかのラベルの位置が移動してピョンっと飛び出すアニメーションになっています

また、文字が入力されるとさらに変化し、文字のサイズが少し小さくなり 飛び出したままになります。これによって、内容が入力されているという目印に

 

 

フォーカスがあたっている時、入力値があるときの変化はこちらの部分になります

SASS

&:focus ~ label
  @include translate( 0 , -35px )

&:valid ~ label
  text-transform: uppercase
  font-style: italic
  @include transform( translate( 5px , -35px ) scale(0.6))

translateとscaleを使っています

 

コードをダウンロードする

DOWNLOAD
PR

COMMENT

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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