Что такое CSS спрайты?
Где-то неделю назад один из моих подписчиков попросил меня рассказать о CSS спрайтах, что это такое вообще и с чем их едят. Поэтому сегодня я решил написать эту статью, в которой расскажу, что такое CSS спрайты и где их используют.
CSS спрайт - это комбинированное изображение, в котором находится много различных картинок, и с помощью свойства background-position мы выставляем нужную картинку в нужном месте. Допустим, у нас есть кнопка, и эта кнопка меняет свой вид при наведении на неё курсора мыши. Можно сделать, например, 2 картинки и затем подставлять в качестве фона кнопки ту или иную картинку. Но недостаток данного способа очевиден: в 2 раза больше файлов, примерно в 2 раза больше размер, следовательно, в 2 раза больше время загрузки, чем 1 изображение. И вот техника CSS спрайтов позволяет создать всего лишь одну картинку, в которой будут сразу 2 фона кнопки.
Чтобы стало понятнее, давайте решим эту задачу. У нас имеется изображение, допустим, высотой 20 пикселей и шириной 100 пикселей. Кнопка имеет ширину 50 пикселей и высоту 20 пикселей. В одной картинке мы помещаем изображения обоих состояний (друг за другом). HTML-код будет таким:
<a href="#">Кнопка</a>
И CSS-код:
a {
background: url("button.jpg") no-repeat left top; // Фон кнопки
display: block; // Сделать блочным элементом
height: 20px; // Высота кнопки
width: 50px; // Ширина кнопки
text-decoration: none; // Убрать черту подчёркивания
}
a:hover {
background-position: right top; // Меняем позицию фона, чтобы было смещение изображения
}
Вот таким хитрым образом можно в одной картинке хранить множество изображений. Подчеркну, что именно множество изображений, а не только 2. Иногда чуть ли не весь сайт состоит из одной картинки, в которой находятся все используемые изображения. Не считаю, что это очень хорошо, но зато будет минимальное количество файлов изображений и минимальный размер загружаемой страницы, что всегда хорошо.
-
Создано 13.06.2012 12:36:50
-
Михаил Русаков
Комментарии (10):
Спасибо, у меня как раз были недопонимания по этому поводу, но теперь разобрался :)
Ответить
Михаил, помогите решить такую проблему! У меня есть картинка созданная в photoshop! Это МОЙ дизайн! Подскажите как мне его вставить на сайт и анимировать! У меня там и кнопки нарисованы! Как их анемировать
Ответить
Для анимации нужно много картинок, а не одна.
Ответить
в примере вроде ошибка, в коде СSS в начале после тега а - двоеточие не нужно
Ответить
Да, не нужно. Спасибо, исправил!
Ответить
Михаил, подскажите пожалуйста, сделал 2 кнопки подряд (допустим одинаковые), код css допустим тот же, почему кнопки идут одна под другой, ведь тег <br> не ставлю??
Ответить
Таковы правила HTML, их нужно знать. Блочные элементы по умолчанию всегда располагаются один по другим.
Ответить
спасибо, использую float, правильно?)
Ответить
Можно float, можно таблицы.
Ответить
Хорошоя статья)))
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.