Главная » Администрирование сайта » Работа со стилями (CSS) » Спрайты: использование

Спрайты: использование

26.06.2009 в 07:57
Автор: rusak
Чтобы стало понятней, просто покажу спрайт с моего будущего блога:

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

Итак, что же можно сделать с этим?
Приведу простой пример: все ведь хотели, чтобы рядом ссылкой была иконка, которая меняется на другую иконку при наведении? Аха? Ну так не надо заморачиваться с JavaScript, это нудно и некрасиво. Делаем проще. Пусть есть ссылка

Code
<a href="#" class="bookmark sprite">Звездануться</a>

Мы хотим, чтобы слева от неё отображалась иконка, меняющаяся при наведении. Фперёд, идём в CSS:
Code
.sprite {background: url(..\sprite.png) bottom no-repeat; padding-left: 18px }

a.bookmark:link, a.bookmark:visited {color: #5190c1; background-position: 0px -177px }
a.bookmark:hover, a.bookmark:active {color: #b52121; background-position: 0px -145px }

Соответственно класс .sprite отвечает за загрузку картинки и отступ для текста.
background-position: 0px -177px; — прокручивает нашу картинку до нужного места.

Этот способ наиболее экономичен, не надо придумывать всяких «предзагруженных картинок», чтобы пользователь ощущал себя комфортно на вашем сайте. Не нужен никакой JavaScript. За вас всё делает CSS.

Ну и, конечно же, пример: ../sprite/sprite.html

кнопки, Спрайты, css

Рейтинг: -8  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 7332          Комментариев:

Похожие инструкции