Comments 33
За Compass автору статьи огромное спасибо.)
+1
Кто нибуть, расскажите, как победить глюки спрайтов в вебкит браузерах при зуминге страницы?
Глюки заключаются в том, что спрайты плавают на 1-2 пикселя или не так масштабируются… это, скорей всего, свяанно с тем, как вебкиты округляют дробные значения.
Использование em не спасает.
Открыты следующие баги
code.google.com/p/chromium/issues/detail?id=153626
code.google.com/p/chromium/issues/detail?id=145078
code.google.com/p/chromium/issues/detail?id=8279
bugs.webkit.org/show_bug.cgi?id=45840
Баги — древние, как мир.
Мозилла с этим давно справилась
robert.ocallahan.org/2008/10/hating-pixels_13.html
Чувствую, что никак… поэтому пока — обхожу спрайты стороной.
Глюки заключаются в том, что спрайты плавают на 1-2 пикселя или не так масштабируются… это, скорей всего, свяанно с тем, как вебкиты округляют дробные значения.
Использование em не спасает.
Открыты следующие баги
code.google.com/p/chromium/issues/detail?id=153626
code.google.com/p/chromium/issues/detail?id=145078
code.google.com/p/chromium/issues/detail?id=8279
bugs.webkit.org/show_bug.cgi?id=45840
Баги — древние, как мир.
Мозилла с этим давно справилась
robert.ocallahan.org/2008/10/hating-pixels_13.html
Чувствую, что никак… поэтому пока — обхожу спрайты стороной.
+2
Меня спасают паддинги в 1-2 пикселя.
+2
да, это спасает. Я писал об этом года 4 назад еще
webo.in/articles/habrahabr/08-all-about-css-sprites/
webo.in/articles/habrahabr/52-css-sprites-are-evil/
+ data:URI как технология намного проще и позволяет «отложить» загрузку ресурсного файла (получается аналогичный CSS Sprites транспорт, но без всех их минусов)
webo.in/articles/habrahabr/08-all-about-css-sprites/
webo.in/articles/habrahabr/52-css-sprites-are-evil/
+ data:URI как технология намного проще и позволяет «отложить» загрузку ресурсного файла (получается аналогичный CSS Sprites транспорт, но без всех их минусов)
+2
Я правильно понял, что это возникает только в случае, когда изображения в спрайте расположены вплотную?
+2
Беда онлайн генераторов спрайтов в том, что они оставляют уж ооочень много места по бокам.
Пользуюсь на маке программой TexturePacker (ещё пробовал SpriteRight и Sprite Master) и на выходе получаются очень компактные спрайты.
Пользуюсь на маке программой TexturePacker (ещё пробовал SpriteRight и Sprite Master) и на выходе получаются очень компактные спрайты.
+2
Вопрос на засыпку: есть css и куча готовых (склеенных) спрайтов, чем автоматически разрезать их?
Хочу мелкие картинки положить в css data uri
Хочу мелкие картинки положить в css data uri
0
а я использую TexturePacker, нравится больше всего.
0
Очень полезно, спасибо!
+1
А чем графический файл запихать в css файл?
0
Есть еще бандл для Symfony2 для быстрого создания спрайтов github.com/rithis/SpriterBundle
0
С подсказки коллеги использую TexturePacker — великолепная штука, есть клиенты под винду, мак и убунту.
0
Пост отличный.
Но только меня одного задевает за живое фраза
Спрайт — это одно большое изображение мелких графических элементов? :))
Но только меня одного задевает за живое фраза
Спрайт — это одно большое изображение мелких графических элементов? :))
+1
-4
Smart sprites самый интеллектуальный авто генератор спрайтов.
0
Вот еще свеженький онлайн генератор спрайтов:
simpreal.org.ua/csssprites
Может кому понравится. Там можно выделять области в исходных картинках, задавать правила размещения этих областей в спрайте, настраивать css. Настройки и исходные картинки можно сохранять.
simpreal.org.ua/csssprites
Может кому понравится. Там можно выделять области в исходных картинках, задавать правила размещения этих областей в спрайте, настраивать css. Настройки и исходные картинки можно сохранять.
0
Вот еще интересный на мой взгляд инструмент:
csssprites.org/
Это java приложение, которое обрабатывает специальные директивы включенные в CSS файлы формируя «на лету» CSS спрайт(ы) и создавая соотв. записи в CSS файле. Файл остается валидным, т.к. все доп. директивы идут в блоках спец. комментариев.
Т.е. верстаем так, как если бы все спрайты были отдельными фоновыми иллюстрациями (background-image), а скрипт собирает все в спрайт сам.
Таким образом очень просто поддерживать и изменять отдельные файлы.
Есть плагин под Eclipse IDE.
csssprites.org/
Это java приложение, которое обрабатывает специальные директивы включенные в CSS файлы формируя «на лету» CSS спрайт(ы) и создавая соотв. записи в CSS файле. Файл остается валидным, т.к. все доп. директивы идут в блоках спец. комментариев.
Т.е. верстаем так, как если бы все спрайты были отдельными фоновыми иллюстрациями (background-image), а скрипт собирает все в спрайт сам.
Таким образом очень просто поддерживать и изменять отдельные файлы.
Есть плагин под Eclipse IDE.
0
Считаю Drag & Drop Сервис Spritepad удобен для небольших изображений, большие лучше ручками загружать… эх) А так в целом неплохо, автору спасибо! Поставил бы плюс, жаль мыло кармы.
0
Sign up to leave a comment.
CSS спрайты: основные техники и полезные инструменты