Tumblr과 비슷한 텍스트 필드를 만드는 방법은 무엇입니까?

Question

tumblr.com 로그인 및 텍스트 필드 등록과 유사한 텍스트 필드를 만들려고합니다.

저는 커튼 뒤에있는 일을 이해하기 위해 방화 킷 (firebug)을 시작했지만 실제로는 나의 손에 닿았습니다 (저는 프로그래머입니다).

Answer 1

텀블러는 (? 난 당신이 입력으로 빛에 대한 때 당신에게 마우스를 이야기하고 생각)

체크 아웃이 이미지를 텍스트 입력 처리를위한 스프라이트를 사용하는 것입니다 : 스프라이트에 http://www.tumblr.com/images/register_login/input.png

더 : http://www.w3schools.com/css/css_image_sprites.asp

정말 간단합니다. 마우스를 넣으면 자바 스크립트를 사용하여 흐릿한 클래스를 추가합니다. 이렇게하면 이미지의 배경 위치가 변경되어 효과가 만들어집니다. 이것은 정말로 간단한 것들입니다.

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

jQuery의 toggleClass를 사용하여 클래스를 켜고 끌 수 있습니다. 그들이 무엇을 좋아 그럼 당신은 일을하는 그 클래스를 사용할 수 있습니다

다음 단계 당신이 의견에 따라

UPDATE를 (이미지의 변화 배경 위치를, 그래서 미리 선택된 값이 가벼운 등 글꼴 색상을 변경) 필요 :

1 단계 - 이미지 (Photoshop/Aviary.com)를 디자인하거나 재고를 다운로드하거나 디자이너를 통해 디자인하십시오. 필요한 이미지는 스프라이트에 대한 것입니다.

2 단계 - 마크 업 폼 요소에 대한

3 단계 -

(당신이 jQuery를 추가도 전에, 당신은 배경 요소의 위치를 ​​변경하여 클래스를 전환 할 수 방화범을 사용할 수 있습니다) 폼 요소에 대한 CSS는

4 단계 - 양식 요소에 대한 jQuery. toggleClass/addClass/removeClass를 사용하여 클래스를 변경하고 배경을 다시 배치 할 수 있습니다. jQuery .focus 함수를 사용하거나 폼 요소에 onFocus/onBlur 특성을 사용할 수 있으며 텍스트 지우기 기능을 호출 할 수 있습니다. 기본 텍스트를 jquery .attr selector에서 가져온 후에 변수로 설정 한 다음 마우스를 입력 할 때 값이 기본값이거나 비어있는 경우 값을 지우고 지우지 않으면 값을 지우지 않습니다.

코드를 작성하고 스프라이트를 디자인하지는 않겠지 만 그게 끝났습니다.

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; 
} 

이것은 주로 사용되는 것이지만 다른 속성들도 있습니다.