BlikTelecom.ru
блог о дизайне
Главная > CSS Sprites или «Вся графика 1 картинкой»

 

CSS Sprites или «Вся графика 1 картинкой»

5 мая 2010 года

Про CSS в создании сайта есть много статей на Сеодед.ру

CSS Sprites или «Вся графика 1 картинкой»

Это типа урок) Я толком никогда не писал уроков, но сейчас решил сделать это, потому что ничего хорошего не нашел на тему 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; }

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

Новое на блоге:

 


Комментарии

Денис:
5 мая 2010 в 14:52
Ну для блогов ж это не используется? Или как?

Cheerful:
5 мая 2010 в 14:54
Можно использовать для чего угодно. И для блогов тоже.
У меня вот на этом блоге сделано просто, стандартным способом, но думаю в свободное время переверстаю со спрайтами, чтобы побыстрее летал)

Ilya:
5 мая 2010 в 22:35
Гугля так сверстана например

Cheerful:
6 мая 2010 в 00:35
Да. Много кто так сверстан сейчас. Хабра тоже так.

Денис:
6 мая 2010 в 00:41
Ну эт надо когда сложное и тяжелая картинка подгружается, а если легкая . то и так пойдет жа)

Cheerful:
6 мая 2010 в 00:51
да нет, суть не в весе.
Вот наглядный пример:
Тебя мама послала в магазин купить 10 разных булок. И вот ты пошел, купил первый вид булки, понес её домой. Пошел за второй булкой, купил, принес домой. Пошел за 3й. И так далее. Точно так же происходит при стандартной верстке картинок.
А если ты пойдешь, купишь сразу 10 видов булок, положишь их в пакет и дома уже разложишь их на столе, то это будет css Sprite :)
Тебе же не обломно было нести сразу 10 булок, не так уж и тяжело? Скорее обломнее было бы 10 раз ходить туда сюда. Вот так же и тут. Суммарный вес примерно один (в случае спрайтов даже поменьше будет), а количество запросов к серверу сокращается в разы.

Sue:
6 мая 2010 в 09:37
О, какой наглядный пример с любимыми булками))

Денис:
6 мая 2010 в 09:42
угу, мне тоже понравился))

Анна:
7 мая 2010 в 17:33
Классная вещь, нужно пробовать. И еще отличный дизайн, чувствуется художественный вкус. Желаю Вам в ходе марафона найти кучу друзей и перспективных заказчиков. Заглядывайте на огонек на ***

Непознанный Я:
8 мая 2010 в 18:02
К сожалению, такой подход не позволяет редактировать шаблоны в плане дизайна. Точнее, сделать это можно, но крайне не удобно и долго.

Cheerful:
9 мая 2010 в 16:25
Ну да, могут возникнуть ситуации.

Buduguru:
10 мая 2010 в 14:43
Полезная статья! Всегда думал что к чему в комбинировании иконок в один файл, а тут сразу все стало ясно:)
Спасибо и удачи на марафоне!)

Yurbasik:
11 мая 2010 в 13:00
Если я не ошибаюсь, то первая координата по высоте, а вторая по ширине спрайта(картинки).
Нужно только каждый пиксель посчитать, чтобы не съехало никуда..

Cheerful:
11 мая 2010 в 15:27
Да, именно так

igrun:
3 октября 2010 в 21:28
Результаты для этой страницы:
Page Speed Score: 58/100
Remove unused CSS
Use efficient CSS selectors
Оптимизируй свой сайт сначала!!!

Cheerful:
3 октября 2010 в 23:38
Какой воинственный комментатор)

Ksenia:
19 марта 2012 в 20:08
Вредные люди встречаются повсюду. Не обращайте внимания! Михаил, спасибо за разъяснения по поводу спрайтов, было полезно узнать! Признаюсь, раньше тоже не понимала смысла их применения. Теперь знаю :)

Kolvas:
2 ноября 2010 в 21:02
Есть специальные сервисы: делают спрайты автоматом..

Никита:
14 ноября 2010 в 10:50
Михайл, спасибо вам за этот урок. Вы так все мастерски и понятно объяснили, что я это не просто тупо запомнил, а ОСОЗНАЛ! У вас определенно есть талант преподавателя — объяснить так, что все понятно! Огромное вам спасибо! :)))

Cheerful:
14 ноября 2010 в 11:44
О, спасибо) Рад, что помог)

vlad:
10 декабря 2010 в 23:36
Класс! просто, быстро и лаконично — я все понял сразу и легко! Спасибо!
про css sprites я кстати узнал, вы будете смеяться, на goodfuckingwebdesignadvice. Там же один из советов — не пользуейте Dreamweaver — не знаете случайно почему?

Cheerful:
11 декабря 2010 в 15:42
Рад, что помогло)
А дримвивер. Не знаю, я пользуюсь в режиме кода, когда верстаю сайт, потому что он подсказывает тэги и их свойства, мне это удобно, т.к я не такой уж прям бывалый верстальщик.

Арт радикс:
22 января 2011 в 22:50
Классно написанная статья )))
Спасибо за труд, теперь мне стало интересно испробовать на практике:)

Cheerful:
28 января 2011 в 14:50
Пробуйте, главное продумывайте все заранее, а то потом при необходимости что-то поменять придется очень много времени потратить.

Илья:
28 января 2011 в 10:29
Спасибо! Полезная информация!

Cheerful:
28 января 2011 в 14:49
На здоровье, пользуйтесь :)

Кира:
24 февраля 2011 в 18:39
Да, я делала,как вы и говорите — ходила в магазин по 10 раз-
теперь не буду. Спасибо большое.

Cheerful:
24 февраля 2011 в 21:18
Пожалуйста :) Но css спрайты не всегда удобны, не нужно принимать их безусловно. Они хороши, когда оправданны.

MixFive:
28 февраля 2011 в 14:09
Спасибо большое.

inom:
3 апреля 2011 в 13:08
Насчет св-ва scroll Оно позволяет перемещаться фону вместе с содержимым =)

NEOx:
6 апреля 2011 в 15:11
Здравствуйте, на этой страничке помоему вирус. У меня в Опере открывается AdobeReader при посещении. Проверьте на всякий случай.

Cheerful:
11 апреля 2011 в 18:30
Да, спасибо, уже нет, почистил.

opapa:
11 апреля 2011 в 17:05
Зашел недавно в панель управления сайтом на гоудедди. И что бы вы думали? 2011 год на дворе, а у них 67 файлов грузится… за 17 секунд…(именно поэтому я решил проверить почему так долго в первый раз без кеша грузило) из которых 2/3 картинки, которые нормальные люди засовывают в спрайты.