[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック

ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。

アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。

デモのアニメーション

実際の動作は下記ページで楽しめます。
上記以外にもたくさんのアニメーションがあります。

サイトのキャプチャ

Some :active & :focus effects

使い方は簡単、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

top of page

©2018 coliss