Дизайн HTML-страниц. Язык CSS (ч.11)

Сегодня расскажу вам про спрайты.

Что это вообще такое? Спрайты - заготовки, которые хранятся в одном изображении.

Например вы себе на сайт хотите добавить красивые кнопки, которые вы сами нарисовали в фотошопе. Ну и к тому же у вас есть несколько вариантов кнопок - все варианты вы будете использовать на своем сайте, но в разных местах (в зависимости от дизайна).

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

Вот пример:

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

Давайте перейдем к практике:

Будем создавать три кнопки с помощью нашего спрайта.

Для начала опишу html-код:

Тут я добавил три блока <div> с различными классами button1, button2 и button3.

Теперь рассмотрим CSS:

Всем блокам <div> я задал background. Кстати это еще один способ задания фона, который мы не рассматривали - с помощью картинки. В скобочках url() мы указываем путь к нашей картинке. У меня картинка лежит в той же папке что и html-страница, поэтому я указал просто имя файла.

Дальше идет еще один параметр: no-repeat.

Он запрещает заполнение всего блока нашей картинкой. То есть например у картинки разрешение 100 на 200 пикселей. А у блока расширение 500 на 500 пикселей. Если мы не укажем параметр no-repeat, то наша картинка будет несколько раз повторяться в блоке (столько раз, сколько хватит для заполнения площади 500 на 500 пикселей).

Если сейчас посмотреть на страницу, то там не будет видно наших картинок. Это из-за того, что мы не задали размеры для блока. Давайте сделаем это:

Нам надо задать размер блока, который будет равен размеру желаемой нами кнопки. Я взял спрайт из интернета, поэтому не знаю какого размера эти кнопки. Делать буду наугад: сначала задам width и height блока по 200 пикселей:

Вот что я увидел: три блока по 200 пикселей, у каждого фоном является наша картинка. Теперь нам надо скорректировать размеры блока так, чтобы они были равны размеру желаемой кнопки.

Тут нам на помощь приходит консоль браузера. Жмем Ctrl+Shift+C и наводим курсором на первый блок. Выделяем его и видим, что в консоли появились его стили:

Вот там, где описан стиль div, можно нажать на размеры (прямо на числа в пикселях) и менять их прямо в браузере. Нажмите на размер и попробуйте понажимать кнопки вверх/вниз на клавиатуре - размер блока будет или увеличиваться или уменьшаться. Жмем кнопки - подгоняем размер.

У меня на глаз получилось так. Картинки в блоках сузились до такой степени, что стало не понятно где они разделяются. Но ничего, сейчас мы все поправим. Что теперь - мы подогнали размер в браузере, но в коде то он не поменялся - надо бы туда перенести.

Все, перенесли, изменения сохранились - переходим к описанию классов наших кнопок:

Тут появляется новый параметр - backround-position - параметр для перемещения по блоку фоновой картинки - затем два числа - первое отвечает за сдвиг фоновой картинки блока по горизонтали, второе по вертикали. Я написал 0 и -126 пикселей. Я заранее подогнал эти значения через консоль браузера. Тут все работает точно так же как и с размерами.

Вот что получилось:

На скрине я привел консоль браузера. Тут я менял стрелками background-position по вертикали.

Осталось дело за малым - описать еще два класса:

Я подогнал эти размеры: тут уже делал изменения как по вертикали, так и по горизонтали.

Вот результат:

А тут я отметил кнопки, которые в итоге были использованы:

Что посоветую для практики:

Найдите любые другие спрайты в гугл картинках, создайте блоки других размеров, подгоните под них свои изображения и готово)

@honey_and_money - Ты можешь всё, осталось только начать делать!