Есть ли способ перемещения по css3-sprite?

Question

[Максим]

К примеру большой sprite : Пример в нём 1000 единиц , есть ли такой способ найти к примеру 783 спрайт ? Имеется ввиду background-position или есть другой способ ?

Answer 1

[Михаил]

если вы используете препроцессор например less то можно использовать вот такой мексин

.icon-sprite-slot(@icon-size, @x: 0, @y: 0) {
	background-position: -(@icon-size * @x) -(@icon-size * @y);
}

или можно это расчитать вручную. Этот способ подойдет только для спрайтов где размеры иконок одинаковые и нет отступа между ними. Для вашего спрайта из примера это подходит, 783 спрайт это -(16 * 0) -(16 * 782) = background-pisition: 0 -12512px

Comments

[Максим]

так , а как вы это вычислили ?

[Михаил]

Максим Жаров: у вас в примере спрайт вертикальный, значит нам необходимо перемещаться по y оси. Нумерация спрайтов начинается с 0, так как если не смещать бекграунд и выставить 0 0, то будет как раз первый спрайт. Дальше по формуле из преведенного мексина в качестве входных параметров у нас размер иконки 16px смещение по x = 0, смещение по y=782 (так как нам нужена 783 иконка) далее подставляем и получаем, что по y нам нужно сместится на 12512px

[Максим]

Михаил: я понял что вы отлично в less понимаете ?

[iBird Rose]

тут less не причем. тут кто то в математике кажись не шарит

[Максим]

iBird Rose: вы считаете что приведённый пример less-code это математика ?

[iBird Rose]

Максим Жаров: ну а как иначе? просто высчитывание координат в плоскости x и y

Answer 2

[iBird Rose]

продолжая тему - а какие способы еще есть для спрайтов разных размеров. к примеру для тех которые я сам накидал в photoshop. пока знаю тока png-hat плагин для фш. есть еще что для этого?

Comments

[Максим]

с этого места и по подробнее ! плиз , но я Линуксоид и Photoshop мне далёк , хотя знаком