Это типа урок) Я толком никогда не писал уроков, но сейчас решил сделать это, потому что ничего хорошего не нашел на тему css спрайтов в рунете.

Что такое CSS Sprites?

Наверняка встречали случаи, когда хотели скачать какую-то иконку с какого-нибудь сайта, а вместо одной нужной вам иконки скачивалась картинка с несколькими изображениями. Так вот это и есть css sprites — картинка, состоящая из нескольких графических элементов сайта. Т.е. мы берем всю постоянную графику сайта и засовываем в один общий png.

Зачем это делается? С первого взгляда может показаться, что это не удобно?Делается это для ускорения работы вашего сайта, путем уменьшения запросов к серверу. Он запросил один раз одну картинку — и вся графика загрузилась за один подход. Лично моё мнение, что это важно для крупных проектов с большой посещаемостью, чтобы пользователи наслаждались серфингом, а не ждали по 5 секунд открытие очередной страницы.

И насчет удобства. Я сперва тоже подумал, что не удобно как-то. Но на практике оказывается наоборот. Я думаю, теперь это станет для меня основным способом верстки.

Как использовать CSS Sprites?

Отображение только нужного вам фрагмента происходит путем указания нужных координат в пикселях.

Использовать спрайты можно в свойстве background, внутри div’ов, стилей и т.д.

Вы не можете вставить нужный фрагмент используя тэг img.

Давайте разберем принцип работы спрайтов на конкретном примере.

Допустим у нас есть 4 пиктограммы. В фотошопе скидываем их в один файл и делаем save for web в формате png-24

Хорошо. Теперь нам нужно сделать из «плюса» и «минуса» кнопки-ссылки.

Для этого в подключенный к вашему сайту CSS файле создаем стиль «plus» и прописываем ему нашу картинку плюса:

.plus {
display:block;
width:9px;
height:9px;
background:url(img/sprite.png) no-repeat scroll -10px 0px;
float:left;
}

Где sprite.png — общая картинка с 4-мя пиктограммами.

Важно всегда указывать точные значения ширины и высоты (width и height), иначе элементы будут обрезаны.

Обратите внимание на свойство background. В конце «-10px 0px» — это и есть координаты нашего плюса. Первое значение X, второе Y, т.е. отступ по горизонтали и вертикали, соответственно. По вертикали отступа у нас не должно быть, потому что иконка прижата к верхнему краю. А по горизонтали нам нужно «пропустить» иконку минуса и захватить границей 9 на 9 px (width:9px; height:9px;) нужный нам плюс. Вот картинка для пояснения.

Надеюсь, всё понятно)

Еще хочу рассказать об одной детали с которой столкнулся сам: если у вас есть какие-то фоновые изображения, которые растягиваются, то для них лучше создать отдельный спрайт, потому что в них важно, чтобы они упирались в левый и правый край (при repeat-x). А ваш основной спрайт может быть довольно широким и по причине экономии веса нету смысла такую большую колбасу вашей подложки вставлять туда. Сделайте отдельный png с ними. Вот например:

И тогда код для третьей сверху розовой плашки будет такой:

#pinkline {

height:30px;

width:299px;

background: url(img/linebg.png) repeat-x scroll 0 -81px;

}

Ну вот в целом и всё. Есть вопросы - задавайте, будем дописывать урок на ходу)

css, html, верстка, дизайн, работа