Спрайт (в данном случае речь идет о CSS-спрайте) - это рисунок, внутри которого располагаются несколько изображений. Спрайт применяется для ускорения работы приложения, так как нужно будет загрузить только одно изображение и потом уже брать кусочки этого изображения и применять их в своем приложении. Для того чтобы получить необходимый кусочек спрайта необходимо использовать CSS. Я хочу рассказать о том, как создать вот такой спрайт и как его использовать.
В настройках я выбрал горизонтальное расположение иконок в спрайте, можно использовать и другие расположения: компактный и вертикальный.
Теперь переносим все иконки с компьютера в генератор спрайтов.
Готово. Теперь в разделе Downloads мы можем скачать и сам png-рисунок - наш сгенерированный спрайт, а также набор css-стилей для применения иконок из спрайта.
Получился вот такой png-рисунок - это сгенерированный приложением спрайт.
А вот такой сгенерировался CSS
Также можно кликнуть по вкладке HTML и посмотреть, как использовать созданные стили.
Как создать спрайт
Для создания спрайтов в интернете существует огромное количество онлайн генераторов. Я нашел один и мне он очень понравился своей простотой и удобством. Вот ссылка на этот генератор спрайтов.
Ниже я опишу как сгенерировать спрайт используя этот онлайн генератор.
Нажимаем кнопку Clear для того чтобы удалить по умолчанию добавленные иконки
Переходим в Настройки
В настройках я выбрал горизонтальное расположение иконок в спрайте, можно использовать и другие расположения: компактный и вертикальный.
Теперь переносим все иконки с компьютера в генератор спрайтов.
Готово. Теперь в разделе Downloads мы можем скачать и сам png-рисунок - наш сгенерированный спрайт, а также набор css-стилей для применения иконок из спрайта.
Получился вот такой png-рисунок - это сгенерированный приложением спрайт.
А вот такой сгенерировался CSS
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-auto_moto_64 {
width: 64px;
height: 64px;
background-position: -5px -5px;
}
.sprite-bricks_64 {
width: 64px;
height: 64px;
background-position: -79px -5px;
}
.sprite-container_64 {
width: 64px;
height: 64px;
background-position: -153px -5px;
}
.sprite-crystal_64 {
width: 64px;
height: 64px;
background-position: -227px -5px;
}
.sprite-documents_64 {
width: 64px;
height: 64px;
background-position: -301px -5px;
}
.sprite-food_64 {
width: 64px;
height: 64px;
background-position: -375px -5px;
}
.sprite-furniture_64 {
width: 64px;
height: 64px;
background-position: -449px -5px;
}
.sprite-nosize_64 {
width: 64px;
height: 64px;
background-position: -523px -5px;
}
.sprite-other_64 {
width: 64px;
height: 64px;
background-position: -597px -5px;
}
.sprite-pets_64 {
width: 64px;
height: 64px;
background-position: -671px -5px;
}
.sprite-private_64 {
width: 64px;
height: 64px;
background-position: -745px -5px;
}
Также можно кликнуть по вкладке HTML и посмотреть, как использовать созданные стили.
<i class="sprite sprite-auto_moto_64"></i> <i class="sprite sprite-bricks_64"></i> <i class="sprite sprite-container_64"></i> <i class="sprite sprite-crystal_64"></i> <i class="sprite sprite-documents_64"></i> <i class="sprite sprite-food_64"></i> <i class="sprite sprite-furniture_64"></i> <i class="sprite sprite-nosize_64"></i> <i class="sprite sprite-other_64"></i> <i class="sprite sprite-pets_64"></i> <i class="sprite sprite-private_64"></i>
Как использовать
Создадим css-файл sprite.css, в который скопируем сгенерированный css код и поместим его в одну папку с html-файлом и картинкой спрайта
<html> <head> <link rel="stylesheet" href="sprite.css"> </head> <body> <ul> <i class="sprite sprite-auto_moto_64"></i> <i class="sprite sprite-bricks_64"></i> <i class="sprite sprite-container_64"></i> <i class="sprite sprite-crystal_64"></i> <i class="sprite sprite-documents_64"></i> <i class="sprite sprite-food_64"></i> <i class="sprite sprite-furniture_64"></i> <i class="sprite sprite-nosize_64"></i> <i class="sprite sprite-other_64"></i> <i class="sprite sprite-pets_64"></i> </ul> </body> </html>
Что получилось
А получилась вот такая вот страничка с картинками.
Комментариев нет:
Отправить комментарий