Новая тема   Ответить

 Lexikon
Как то иногда для повышения знаний просматриваю как верстаются сайты и периодически встречаю верстку когда изображения берутся с png файла в котором множество элементов диза. Но непойму как с казалось бы одного файла выдергивают то что нужно.
Подскажите где почитать, желательно на RU, а не на другом языке.
За ранее благодарен!

 awa
google.ru - css спрайты

 Lexikon
отлично, спасибо за наводку, я просто даже незнал как оно зовется

 awa
"графика одной картинкой верстка"
:)

 Lexikon
кстати есть ли в этом какой то плюс? что то так глянул заморочек много, это как по мне. Хотя еще полностью не вникал. Понял что всё завязано на позиционировании элементов на странице.

 ibiz
быстрее грузится + нагрузка на сервер меньше

 Lexikon

 JTcoders
ibiz писал:

+1, причем если делать hover, не будет подзагрузки изображения, т.к. оно уже загружено. ;)

 ibiz
где-то я таблицу видел /может кто напомнит/ там идет экспоненциальное сравнение целесообразности использования спрайтов в зависимости от веса

 FXIX

ну да. обычно мало где юзают. хотя видел упоротых которые 22 картинки склеивают в 1. и потом дотошно X и Y подгоняют
background: url(image.png) X Y no-repeat #000;

после таких упоротых клиент снова идет и выворачивает карманы.
- потому что заменить картинку проблема
- поменять размер картинки проблема
- сменить размер блока в котором из всего спрайта "подсвечен" один кусочек проблема
- в некоторых браузерах при увеличении (ctrl+, или ctrl+колесико мыши) страницы такой блок (сверстаный не по феншую) начинает ехать и "внутри" будет уже не нужный кусочек а и соседние области спрайта

ну и вес, да. браузер вроде в 10 потоков грузит (настройка в IE6. современные браузеры больше?) все что в хтмл найдет (скрипты стили картинки...) и зачастую 1 большая картинка - кроме невыигрывания в скорости еще и дает проигрыш в юзабилити и дальнейшей поддержке

вот есть кнопка. у ней 3 состояния:
- обычное
- ховер
- актив

вот эти три картинки можно склеить. все остальное дурь полная

 kodek
Мелкие элементы интерфейса ещё имеет смысл склеивать. Типа маленьких кнопочек для редакторов, и пр. В-приницпе там выигрыш в скорости загрузки заметен!

 Lexikon
понял, благодарю!

 goodlover
Кнопки всегда так делаю. Там где ":hover" - там "background-position:0 -40px;", например. Получается, что видна либо верхняя, либо нижняя половина картинки. )

А можно глянуть сайт или другой пример, где не только кнопки так выводятся?

 Parfumer
Делаю проще для кнопок (если два состояния): "background-position:top;", "background-position:bottom;" Впрочем если есть третье состояни, то: "background-position:center;"

 Skat
FXIX писал:

для клиента спрайт конечно не удобен, но если сделать спрайты по логических группам, а не в один все загонять, будет нормально