어떻게 되나요? 트윗 버튼 카운터의 스케일링

Question

짹짹 버튼과 같은 카운터 요소가있는 버튼을 (CSS 방식으로) 구현하는 방법을 궁금합니다. 콜 아웃은 자릿수가 증가하는 것처럼 보입니다. http://platform0.twitter.com/widgets/images/tweet.png으로 사용 된 배경색 스프라이트는 렌더링 된 기본 (즉 한 자리) 버튼에서 보이는 것보다 훨씬 더 큰 콜 아웃을가집니다.

도움을 주시면 대단히 감사하겠습니다.

Answer 1

열쇠는 정확한 배경 위치를 사용하는 것입니다.

가

<span><a href=#" >1</a></span> 

그것을 위치 (스프라이트 화상의 위치에 따라), 스팬에 배경을 적용하고, 다수의 위치에 대해 패딩을 지정 :

span { 
    background-img: url("sprite.png"); 
    background-position: 0 -50px; 
    padding: 0 0 0 5px; 
} 

을 그들은 두 요소를 사용

이것은 부름의 왼쪽 부분입니다. '0 -50px'는 스프라이트의 상단부터 50px 부분을 의미합니다. 왼쪽부터 0px가 사용됩니다.

다음 스타일 앵커와 트릭 요소의 오른쪽이 시간을 배경을 적용하는 것입니다 :

이 배경은 (성장) 앵커 왼쪽의 오른쪽에 정렬

a { 
    background-img: url("sprite.png"); 
    background-position: right -50px; 
    padding: 0 5px 0 0; 
} 

측면 다진 것입니다. 이 방법은 실제로는 서로의 위에 두 개의 이미지가 있습니다. 오른쪽은 왼쪽 위에 있습니다 (그러나 실제로는 스프라이트의 동일한 부분입니다). 이 숫자는 원본 스프라이트의 너비만큼만 커질 수 있습니다. 그렇지 않으면 앵커 배경의 왼쪽이 표시됩니다.