|
|
|
|
 | css спрайты в оформлении меню / css sprite in menu | Речь в данной статье пойдет об использовании css-спрайтов, как о наиболее удобном способе изготовления анимированных меню, навигации и тому подобных эффектов в оформлении сайта.
Css спрайт – это использование частей одного изображения для создания эффекта анимации. Ни какой особой сложности в использовании css sprite не представляет. Чаще всего используется для ссылок.
Многим веб-мастерам хочется создать красивое меню, когда при наведении курсора меняется к примеру цвет кнопки (картинки), то чаще всего данное решение реализуют с помощью псевдокласса :hover, когда при наведении на объект меняется картинка. В этом варианте используют два изображения.
Css-код:
Смотреть html-версию примера.
Данное решение имеет один весомый минус: картинка начинает подгружаться, а это:
а) снова запрос на сервер
б) картинка может подгрузиться не сразу и испортить всю «малину».
Еще один вариант реализации - это использование событий onMouseOver и т.д., что по мнению некоторых веб-мастеров не вполне валидно и эстетично. Так что на нем мы останавливаться не будем.
Использование же css спрайта (css sprite) имеет большой плюс: это чистый css.
Проще говоря, это изменение позиции изображения в заданном размере при наведении и при отсутствии действия. Например, ссылке задается стиль, где в параметре прописано background-position:0 0, а при наведении позиция изображения уже меняется на 90 пикселей вверх: background-position:0 -90px;
У нас есть изображение шириной 90 пикселей и высотой 180. Мы делим высоту пополам. Верхняя часть изображения – начальная, нижняя – активируется при наведении.
Css-код:
Смотреть html-версию примера.
Код css-sprite`а еще проще предыдущего. Наша ссылка размерами 90х90. В не активном состоянии она «берет» часть изображения с заданными первоначальными размерами. При наведении курсора происходит смещение изображения вверх на 90 пикселей.
Вот в принципе и все. Использование css sprites это:
1) Валидно.
2) Удобно.
3) Меньше кода в самой страничке.
4) Для кроссбраузерности в некоторых случаях придется помучаться (впрочем как и всегда).
| | Дата публикации: 2009-08-15 Просмотров: 2262 Автор: Сергей печатная версия |
Комментарии к статье:
Добавить комментарий:
|
Хотите подписаться на специальные статьи и уроки по Интернет-бизнесу и сайтостроению, которые выходят раз в месяц, а так же получить секретные бонусы?
Удобный сервис рассылок - Smartresponder.ru.
Ваши данные будут конфидициально сохранены.
| |
|
|
|
Автор комментария: SS
Дата: 2010-02-12 14:36:11 ip-адрес:(91.185.229.33)
реализация ясна