Как-то давно меня просили показать пример использования спрайтов на практике. Вот и решил быстренько сделать несложную менюшку с использованием sprites и border-radius.Как-то давно меня просили показать пример использования спрайтов на практике. Вот и решил быстренько сделать несложную менюшку с использованием sprites и border-radius.

Что это значит?
— все картинки в одном файле (sprites)
— закругленные края меню (border-radius)

Чтобы Вам было понятнее, что я хочу сделать, вот пример того, что получится на финише:

Итак, приступим.
Для начала, нарисуем будущую картинку фона меню и фона за ссылкой при наведении на нее (:hover)
Я нарисовал такую, для меню вполне приемлема. Размер: 10×30, Формат: .gif

Далее пишем СSS стиль:

И вставляем в нужное место (где нам нужно вывести меню) следующий код:

Вот и все

Примечание:
border-radius в IE не работает, т.к. это CSS3.

Но дело это поправимое:
— скачиваем с Google Code htc-файл
— помещаем его в папку с нашим CSS
— добавляем в стили, везде, где есть border-radius строчку:

Спрашивайте обо всем, что не понятно, постараюсь объяснить как можно подробнее. Удачи.

P.S. Статья из моего Блога, учитывая, что стали в новости выкладывать даже подобные мелочи, решил тоже зазвездиться. Кому понравился этот мини-урок, ставьте + в репу

Автор публикации

не в сети 14 лет

bizze

Комментарии: 0Публикации: 10Регистрация: 05-04-2011