Уроки по PHP
JavaScript
Уроки по HTML
Дизайнерам
СЕОшникам
Разное
Каждый сайт состоит из множества иконок, кнопок, и небольших картинок. Все они хранятся в 100-ях отдельных файлов. При загрузки сайта, браузер делает множество http запросов к этим картинкам, создавая дополнительную нагрузку на сервер, и большие трудности для вебмастеров, т.к. нужно постоянно искать эти картинки. Особенно это чувствуется при разработке крупных интернет магазинов, когда количество графических элементов намного выше, чем при разработке обычных сайтов.
При помощи css спрайтов мы можем объединить все иконки и кнопки в одном файле. Тем самым будет грузиться только одна картинка, а из нее уже при помощи css будут браться отдельные элементы.
При помощи спрайтов в css решается еще одна проблема. Например, при наведении на иконку, нам нужно изменить ее на ту же иконку, но другого цвета. Если картинки будут храниться в разных файлах, то подгрузка новой картинки будет происходить с мерцанием, что будет создавать неудобство у ваших посетителей. Конечно можно принудительно подгрузить все картинки при помощи JavaScript, но это то же не очень удобно.
Пример работы со спрайтами в css
Работу со спрайтами рассмотрим на реальном примере. Например, для нашего сайта, нам нужно сделать кнопку (пример кнопки справа -> ) при нажатии на которую будет происходить переход из блога на основной сайт компании. Кнопка будет состоять из состояний:
- Кнопка не активна
- При наведении на кнопку она будет подсвечена
- При нажатии на кнопку она будет вдавлена
Для удобства работы со спрайтами есть много сервисов, один из самых удобных это spritecow.com, его мы и будем использовать в нашем примере.
Для начала в фотошопе нарисуем 3 состояния кнопки, должно получиться что-то вроде этого:
Скачать картинку можно от сюда. Как видно из картинки, в одном файле размещено сразу 3 картинки.
Теперь откройте сервис spritecow.com, нажмите Open, и выберите созданную картинку. На экране вы увидите:
Теперь нажмите на первую картинку в спрайте (состояние 1, кнопка не активна), и в низу вы увидите координаты картинки:
Тоже самое делаем с остальными состояниями кнопки, кликаем, и сохраняем позиции.
Вся работа со спрайтами заключается в перемещении фонового изображения (спрайта) при помощи свойства background-position. Тоесть для всех иконок и кнопок делаем один фон, в котором содержатся все иконки, и свойством background-position двигаем фон так, чтобы он соответствовал элементу.
Вот пример кода:
<html>
<head>
<title>Пример работы со спрайтами в css | Дизайн студия OX2</title>
<style type="text/css">
/*
Убираем у кнопок стили по-умолчанию
*/
button {
border: 0;
outline: none;
padding: 0;
font-size: 0;
cursor: pointer;
}
/* Не активное состояние кнопки */
.go-site-ox2-ru {
background: url('sprite.png') no-repeat -17px -14px;
width: 285px;
height: 44px;
}
/* При наведении на кнопку, перемещаем позиции спрайта на подсвеченную кнопку */
.go-site-ox2-ru:hover {
background-position: -17px -68px;
}
/* При нажатии на кнопку, перемещаем позиции спрайта на вдавленную кнопку */
.go-site-ox2-ru:active {
background-position: -17px -122px;
}
</style>
</head>
<body>
<h1>Пример работы со спрайтами</h1>
<button class="go-site-ox2-ru" onclick="location.href='http://ox2.ru/'">Перейти на сайт компании OX2</button>
</body>
</html>
Работа со спрайтами очень удобна, и в ней очень много плюсов, самое главное к ней привыкнуть.
Комментарии
Заполните все поля
Написать комментарий