Legosp Forum
Shop-Script "Legosp" => Дизайн и шаблоны => Тема начата: pavelsmorchkov от Декабря 28, 2012, 02:51:40 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
-
http://html-css.info/2009/07/css-sprites/
Первая ссылка с гула ... добротно написано + в коментах много полезных ссылок.
-
только учитывайте 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.
-
а как сделать повтор из спрайта?
[вложение удалено администратором]
-
почитайте тут (http://htmlbook.ru/css/background-position) , или "пошерстите" google.
в двух словах, есть рисунок(спрайт) у него(как и у любого background) есть начальные координаты left и top, background-position: горизонталь вертикаль.
также существует и такой вариант подтяжки изображения:
background-position: 0px -50px;
где -50px подтягиваем нужную картинку из спрайта по вертикали.
главное изучить её в пикселях.. как то так, надеюсь разберетесь..
-
почитайте тут (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;
}
она повторялась по оси х как мне сделать тоже самое со спрайтом... а то получается что повторяется все изображения... вся ширина...
-
или же сделать отдельный спрайт для таких картинок и указать одинаковую ширину...
-
для статичных(без растягивания) делать один, для тех, что растягиваются другой(опять же по оси х один, для оси у другой). то есть компоновать. можно также, если надо, чуть растянуть.
можно конечно делать все одним спрайтом, но картинка оч тяжелая будет.
-
Буду значит в 2 картинки делать))) и правда сайт быстрее грузит