[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="a
[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ
先月の終わりにdribbbleで公開された時に、うわっかっこいいな！と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。 まずは、dribbbleでのコンセプトから。 [GIF] Mobile Form Interaction フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移動し小さく表示されます。 これはスマフォでは特に重要な省スペースとしても優れており、また入力後にそれが何の項目であったかユーザーに伝えることができます。 で、そのコンセプトにインスパイアされて開発されたスクリプトが「JVFloat.js」です。 デモのキャプチャ ※デモはダウンロードファイルに含まれています。 アニメーションのブラッシュアップやコードの最適化など宿題があるそうですが、実装はこんな感
[JS]入力するのが楽しくなるアニメーションを備えたフォーム -Fancy Input
フォームにテキストを入力する際、ちょっと面白いアニメーション（5種類）を与えるjQueryのプラグインを紹介します。 colissと入力、そして削除すると、こんな感じです。 Fancy Input Fancy Input -GitHub Fancy Inputのデモ Fancy Inputの使い方 Fancy Inputのデモ デモはFirefox, Chrome, Safari, Operaでご覧ください。 IEはゴメンナサイとのことで、通常通りに入力できるだけです。 デモページ デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。 ※日本語の入力は対応していないようです、残念。 Fancy Inputの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
