[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック
Post on:2014年7月22日
sponsors
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。
アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。
実際の動作は下記ページで楽しめます。
上記以外にもたくさんのアニメーションがあります。
使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。
エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。
HTML
<head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="all" /> </head> <body> ... <input type="text" class="fade-border" /> </body>
という訳で、下記に実装してみました。
sponsors
