Legosp Forum

Shop-Script "Legosp" => Дизайн и шаблоны => Тема начата: pavelsmorchkov от Декабря 28, 2012, 02:51:40 pm

Название: css спрайты
Отправлено: pavelsmorchkov от Декабря 28, 2012, 02:51:40 pm
кто нибудь использовал их при верстке? реально ли помогает сайту с загрузкой? гугл советует картинки объеденить в спрайт...
Название: Re: css спрайты
Отправлено: Dias от Декабря 28, 2012, 03:14:18 pm
Если мелкие изображения то да, естественно нужно использовать, так как если все изображения будут отдельными файлами, то каждый раз будет происходить запрос на каждый из этих файлов, в таком случае лучше использовать один файл.
Название: Re: css спрайты
Отправлено: pavelsmorchkov от Декабря 28, 2012, 03:44:56 pm
а как все это реализовать не подскажите?
гугл советует их объеденить
Цитировать
http://xn----9sbjd4bihc0f.net/.../content_bottom_center.png
http://xn----9sbjd4bihc0f.net/.../content_bottom_left.png
http://xn----9sbjd4bihc0f.net/.../content_bottom_right.png
http://xn----9sbjd4bihc0f.net/.../content_top_center.png
http://xn----9sbjd4bihc0f.net/.../content_top_left.png
http://xn----9sbjd4bihc0f.net/.../content_top_right.png
http://xn----9sbjd4bihc0f.net/.../header_2_center.png
http://xn----9sbjd4bihc0f.net/.../header_2_left.png
http://xn----9sbjd4bihc0f.net/.../header_2_right.png
http://xn----9sbjd4bihc0f.net/.../menu_bottom2.png
http://xn----9sbjd4bihc0f.net/css/css_ps/image/search.png
http://xn----9sbjd4bihc0f.net/.../facebook.png
http://xn----9sbjd4bihc0f.net/css/css_ps/images/twitter.png
http://xn----9sbjd4bihc0f.net/images/rss.png
http://xn----9sbjd4bihc0f.net/images/w3c.png
Название: Re: css спрайты
Отправлено: favn от Декабря 28, 2012, 04:23:28 pm
http://html-css.info/2009/07/css-sprites/

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

Название: Re: css спрайты
Отправлено: nictboom от Декабря 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.
Название: Re: css спрайты
Отправлено: pavelsmorchkov от Декабря 29, 2012, 11:31:09 am
а как сделать повтор из спрайта?

[вложение удалено администратором]
Название: Re: css спрайты
Отправлено: nictboom от Декабря 29, 2012, 02:34:58 pm
почитайте тут (http://htmlbook.ru/css/background-position) , или "пошерстите" google.
в двух словах, есть рисунок(спрайт) у него(как и у любого background) есть начальные координаты left и top,  background-position: горизонталь вертикаль.
также существует и такой вариант подтяжки изображения:
background-position: 0px -50px; где -50px подтягиваем нужную картинку из спрайта по вертикали.
главное изучить её в пикселях.. как то так, надеюсь разберетесь..
Название: Re: css спрайты
Отправлено: pavelsmorchkov от Декабря 29, 2012, 05:24:41 pm
почитайте тут (http://htmlbook.ru/css/background-position) , или "пошерстите" 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;
}
она повторялась по оси х как мне сделать тоже самое со спрайтом... а то получается что повторяется все изображения... вся ширина...
Название: Re: css спрайты
Отправлено: pavelsmorchkov от Декабря 29, 2012, 05:25:38 pm
или же сделать отдельный спрайт для таких картинок и указать одинаковую ширину...
Название: Re: css спрайты
Отправлено: nictboom от Декабря 29, 2012, 06:13:42 pm
для статичных(без растягивания) делать один, для тех, что растягиваются другой(опять же по оси х один, для оси у другой). то есть компоновать. можно также, если надо, чуть растянуть.
можно конечно делать все одним спрайтом, но картинка оч тяжелая будет.
Название: Re: css спрайты
Отправлено: pavelsmorchkov от Декабря 29, 2012, 06:59:10 pm
Буду значит в 2 картинки делать))) и правда сайт быстрее грузит