Техника "sprite"

Навигатор в CSS

Специально сделал особый навигатор для этой страницы. Попробуйте поводить мышкой по нему - он будет меняться.
Понравилось?
Технология, которую использовал для его создания, называется "техника спрайт".

Техника "sprite" в CSS

Применение этой технологии позволяет создавать превосходные эффекты.
Красивый, стильный навигатор - лишь малая часть, что можно сделать с её помощью.

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

** Причём, браузер не "тормозит", ведь он сразу загружает всю картинку, просто нам показывает одну (я так прописал ему в коде CSS).
Посмотрите нижний пример.

Пример использования CSS-техники спрайт

Сначала просто наведите курсор на значок, а потом кликните по нему (откроется в новом окне). Увидите сразу всю картинку.

Эффект великолепный! А ведь можно создать и тройную картинку для этих целей, и он будет ещё интереснее.
Правда, знания технологий одних лишь HTML+CSS уже будет недостаточно. Нужно ещё и работу с программой "Фотошоп" освоить. Хотя бы основы.

Практическое применение техники спрайт

Где чаще всего применяют эту замечательную технологию, писал на странице "Псевдоселекторы" (откроется в новом окне). Незачем повторяться.
Там же Вы найдёте и ссылки на страницы с наглядными примерами веб-элементов, сделанных с её помощью: галерей рисунков, кнопок для сайта.

И всё же, о самой частой области применения этой техники нужно сказать обязательно!

Это создание МЕГА-меню.

То есть создание навигатора, в котором, при наведении курсора мыши на него, не только меняется внешний вид кнопок, но ещё и открываются вложенные списки ссылок.

Разумеется, для создания подобных навигаторов, кроме уже описанных технологий (HTML+CSS+Photoshop), нужно ещё jQuery освоить, и подключить.

Пример такой веб-страницы найдёте здесь: "jQuery МЕГА-меню" (откроется в новом окне).

Заключение

Мне тоже очень нравятся действие и возможности открываемые техникой спрайт.
Однако, у себя на сайте я их практически очень мало использую.
Почему?!

Просто, любой "наворот" увеличивает программный код, что не "есть здорово" с точки зрения поисковиков. Так что, могу, но не применяю.
**Разумеется, по заказу сделаю как угодно.

ВВЕРХ