Автор Тема: css спрайты  (Прочитано 6475 раз)

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
css спрайты
« : Декабря 28, 2012, 02:51:40 pm »
кто нибудь использовал их при верстке? реально ли помогает сайту с загрузкой? гугл советует картинки объеденить в спрайт...

Оффлайн Dias

  • Пользователь
  • **
  • Сообщений: 75
    • Просмотр профиля
Re: css спрайты
« Ответ #1 : Декабря 28, 2012, 03:14:18 pm »
Если мелкие изображения то да, естественно нужно использовать, так как если все изображения будут отдельными файлами, то каждый раз будет происходить запрос на каждый из этих файлов, в таком случае лучше использовать один файл.


Оффлайн favn

  • Спец
  • ***
  • Сообщений: 121
    • Просмотр профиля
Re: css спрайты
« Ответ #3 : Декабря 28, 2012, 04:23:28 pm »
http://html-css.info/2009/07/css-sprites/

Первая ссылка с гула ... добротно написано + в коментах много полезных ссылок.


nictboom

  • Гость
Re: css спрайты
« Ответ #4 : Декабря 28, 2012, 04:46:42 pm »
только учитывайте position, т.к. background может заполнять как по оси Y,так и по оси X, а так же все заливать, или же быть вообще статичным(no-repeat).
все делается в фотошопе.
например:
твой_магаз/css/css_ps/image/content_bottom_center.png, справа или слева уже не добавишь другой поскольку этот растягивается по горизонтали(по оси Х), находим похожий background, и создаете новый png в фотошопе, объединив их(два,три или сколько там).
если есть firebug, можно глянуть у меня на сайте _tehnoboom.com.ua на примере <div class="head"> или по примеру  фоновой картинки  _tehnoboom.com.ua/css/css_ttt/image/arrow_scal.png.

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: css спрайты
« Ответ #5 : Декабря 29, 2012, 11:31:09 am »
а как сделать повтор из спрайта?

[вложение удалено администратором]

nictboom

  • Гость
Re: css спрайты
« Ответ #6 : Декабря 29, 2012, 02:34:58 pm »
почитайте тут , или "пошерстите" google.
в двух словах, есть рисунок(спрайт) у него(как и у любого background) есть начальные координаты left и top,  background-position: горизонталь вертикаль.
также существует и такой вариант подтяжки изображения:
background-position: 0px -50px; где -50px подтягиваем нужную картинку из спрайта по вертикали.
главное изучить её в пикселях.. как то так, надеюсь разберетесь..

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: css спрайты
« Ответ #7 : Декабря 29, 2012, 05:24:41 pm »
почитайте тут , или "пошерстите" google.
в двух словах, есть рисунок(спрайт) у него(как и у любого background) есть начальные координаты left и top,  background-position: горизонталь вертикаль.
также существует и такой вариант подтяжки изображения:
background-position: 0px -50px; где -50px подтягиваем нужную картинку из спрайта по вертикали.
главное изучить её в пикселях.. как то так, надеюсь разберетесь..
да с этим я разобрался) картинку через генератор спрайтов сделал, там же и координаты для каждой получил... вот у меня была картинка
Цитировать
#content .top .center {
background: url('../image/content_top_center.png') repeat-x;
margin-left: 10px;
margin-right: 10px;
}
она повторялась по оси х как мне сделать тоже самое со спрайтом... а то получается что повторяется все изображения... вся ширина...

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: css спрайты
« Ответ #8 : Декабря 29, 2012, 05:25:38 pm »
или же сделать отдельный спрайт для таких картинок и указать одинаковую ширину...

nictboom

  • Гость
Re: css спрайты
« Ответ #9 : Декабря 29, 2012, 06:13:42 pm »
для статичных(без растягивания) делать один, для тех, что растягиваются другой(опять же по оси х один, для оси у другой). то есть компоновать. можно также, если надо, чуть растянуть.
можно конечно делать все одним спрайтом, но картинка оч тяжелая будет.
« Последнее редактирование: Декабря 29, 2012, 06:17:09 pm от nictboom »

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: css спрайты
« Ответ #10 : Декабря 29, 2012, 06:59:10 pm »
Буду значит в 2 картинки делать))) и правда сайт быстрее грузит