Tumblrに似たテキストフィールドを作成するには？

Question

私は、tumblr.comのログインと同様のテキストフィールドを作成しようとしています。

カーテンの後ろに何が起こっているのか理解しようとすると、私はファンクバグを起動しましたが、実際には私の手の届かないところにいました（私はプログラマーです）。

Answer 1

Tumblrのは、この画像をチェックしてください（私はあなたが入力に輝きときにマウスの話をしていると思いますか？）テキスト入力処理のため

をスプライトを使用している：スプライトの http://www.tumblr.com/images/register_login/input.png

もっと：http://www.w3schools.com/css/css_image_sprites.asp

実際に起こっていることは本当に簡単です。あなたがマウスに入ると、彼らはぼやけたクラスを追加するためにJavaScriptを使います。これにより、イメージの背景位置が変更され、エフェクトが作成されます。これは本当に簡単なものです。

form .input_wrapper.blurred { 
    background-position: left -136px; 
} 

jQueryのtoggleClassを使用して、クラスをオン/オフすることができます。彼らがやっているように、あなたは物事を行うには、そのクラスを使用することができます

ここでの手順あなたはコメントをもとに

UPDATEを（画像の変化の背景位置を、ので、予め選択された値が軽いなどのフォントの色を変更）必要があります：

ステップ1 - デザインイメージ（photoshop/Aviary.com）または在庫をダウンロードする/あなたのためにそれらを設計するデザイナーを取得します。あなたが必要とするイメージは、スプライト用です。

ステップ2 - マークアップフォーム要素のための

ステップ3 - フォーム要素のCSS（あなたはjqueryのを追加する前であっても、あなたが背景要素の位置を変え、あなたのクラスに切り替えるには、Firebugのを使用することができます）

ステップ4 - フォーム要素のjQuery。 toggleClass/addClass/removeClass：クラスの変更とバックグラウンドの再配置を行います。 jQuery .focus関数を使用するか、フォーム要素のonFocus/onBlur属性を使用して、テキストをクリアするための関数を呼び出すことができます。 jquery .attrセレクタから変数を取得した後、デフォルトのテキストを変数に設定し、マウスを使用したときに値がデフォルトであるか空であればそれをクリアし、そうでなければクリアしません。

私はコードを書いてスプライトをデザインするつもりはありませんが、それはどのように行われたのですか？

Answer 2

ファイアバグは、これを発見するのに役立つ優れたツールです。あなたはこのCSS見つけることができる必要があります：

.ghostwriter_input { 
width: 176px; 
color: #869CB2; 
font-size: 20px; 
font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; 
border-width: 0; 
background: url('/images/x.gif'); 
margin: 12px 0 0 11px; 
padding: 8px 10px 8px 10px; 
cursor: pointer; 
position: absolute; 
z-index: 2; 
top: 0; 
left: 0; 
} 

主に使用されているものであるが、他の属性も同様にあります。