Нонче тут

Сейчас 45 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

CSS Спрайт это по сути своей игра с псевдоклассом :hover при помощи параметра background-position.
Псевдокласс :hover задает оформление элемента при наведении на него курсора.
Может применяться для элементов списков (li), блоков (div, span), элементов таблиц (td, tr), ну и конечно же ссылок (a).

Свойство background-position устанавливает местоположение фоновой картинки. При этом свойству обычно присваивается пара значений - для определения горизонтального и вертикального положений.

Рассмотрим пример. У нас есть блок div. Задача: при наведении курсора на этот блок изменить его фон, т.е лампочку зажечь.
«Трах-тибидох-тибидох УХ!»
Лампочка гори!


HTML:

<div class="parent">
<div class="child">Лампочка гори</div>
</div>

CSS:

.parent {
    background: url("//estydiz.ru/images/stories/icons/sprites1.png") no-repeat scroll 0 0 transparent;
    min-height: 48px;
}
.parent:hover {
    background: url("//estydiz.ru/images/stories/icons/sprites1.png") no-repeat scroll 0 -50px transparent;
    min-height: 48px;
}
.child {
    color: #E32625;
    padding-left: 48px;
}
.parent:hover .child {
    color: #F9CB44;
}

А вот и наш фон, при помощи которого это сделано

Причем картинка всего одна.

А зачем нам использовать спрайты?

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

  • Уменьшаем количество запросов браузера к веб-серверу. Каждый тэг <img /> и фоновый рисунок составляют отдельный запрос. Легко догадаться, что уменьшение количества HTTP запросов является одним из основных способов оптимизации загрузки и эффективности работы сайта.
  • Одновременно снижается нагрузка на сервер, что важно при высокой посещаемости сайта.
  • Устраняем задержку перед отображением второй картинки, т.к. браузеру уже не надо загружать второе изображение после наведения указателем мыши на картинку - оно уже есть.
  • Уменьшаем общий размер фалов с графикой.
  • Возлагаем труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами.

Недостатки

  • Увеличивается время затрачиваемое на дизайн сайта, так как мега спрайты часто требуют продолжительных проверок и выравнивания изображений состояний.
  • Увеличивается затраты на разработку.
  • Могут возникнуть ограничения в использовании потенциальных преимуществ атрибутов title и alt .

Данный спрайт создан при помощи сервиса Sprite Cow (желательно использовать файлы с прозрачным фоном)

Spritepad — drag-and-drop сервис для создания спрайтов

Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.