Фоны, часть 1 / Спрайты [15/16]
×

Спрайты [15/16]

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

Спрайты используются, чтобы снизить количество запросов на сервер. Каждая маленькая картинка — это отдельный запрос, а чем меньше запросов, тем лучше. Поэтому маленькие картинки «склеивают» в одну большую.

Части спрайта отображают в элементах с небольшими размерами. Такому элементу задают картинку-спрайт в качестве фона и смещают её таким образом, чтобы была видна нужная её часть.

В спрайты обычно объединяют иконки и различные мелкие декоративные изображения. Кстати, есть сервисы для быстрого создания спрайтов и генерации CSS-кода для них, например, SpritePad.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Спрайты</title> </head> <body> <span class="btn btn-add"> <span class="icon icon-add"></span> Добавить </span> <span class="btn btn-edit"> <span class="icon icon-edit"></span> Редактировать </span> <span class="btn btn-remove"> <span class="icon icon-remove"></span> Удалить </span> <!-- Картинка спрайта на тёмном фоне --> <div class="full-sprite"></div> </body> </html>
CSS
body { padding: 20px; font-family: "Tahoma", sans-serif; } .btn { display: block; width: 160px; margin: 20px auto; padding: 12px; color: white; background: #34495e; border-radius: 5px; cursor: pointer; } .btn-add { background: #27ae60; } .btn-remove { background: #c0392b; } .icon { display: inline-block; width: 15px; height: 15px; margin: 0 5px; vertical-align: bottom; background: url("/assets/course13/bootstrap-sprites.png") no-repeat; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); } .icon-add { } .icon-edit { } .icon-remove { } .full-sprite { height: 200px; margin: 50px auto; background: #34495e url("/assets/course13/bootstrap-sprites.png") no-repeat 50% 50%; border-radius: 5px; }
HTML Academy

Задайте расположение фона:

  1. -407px -96px — элементу с классом icon-add,
  2. -96px -72px — элементу с классом icon-edit,
  3. -456px 0 — элементу с классом icon-remove.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.