Как это сделано - Масштабирование счетчика Tweet-Button

Question

Интересно, как (с точки зрения CSS) реализовать Button с элементом счетчика, таким как Tweet-Button. Вызов, кажется, растет с количеством цифр; используемый спрайт backgrund 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;
}

Этот фон выровнен по правой стороне (растущего) якоря, а левая сторона обрезана.Таким образом, на самом деле два изображения располагаются друг над другом, правая сторона находится сверху левой стороны (но на самом деле это одна и та же часть спрайта).Число может увеличиваться только до ширины исходного спрайта, в противном случае будет видна левая сторона фона привязки (вверху).