Тут
нет ничего сложного: изменение цвета границы создает эффект нажимания кнопки, а
изменение отступов необходимо для того, чтобы текст двигался вместе с
"поверхностью кнопки", а не повисал в воздухе (к сожалению, в Opera
изменение отступов отработано не будет, поэтому css-кнопки в ней выглядят
немного хуже, чем в прочих браузерах). Кто-то сочтет мои комбинации цветов или
размеры отступов неоптимальными - что ж, тут, как и в других эффектах, есть
место фантазии.
Экстремальное вождение
Еще
несколько идей, для тех, кто любит экспериментировать и не заботится о
совместимости: стили, которые не сработают в большинстве браузеров.
Стиль,
основанный на content'е. Это более требовательная (и более мощная) версия
эффекта с передвигающимся маркером. Можно описывать свойство content для
псевдоклассов :before и :after активной ссылки, добавляя маркер произвольного
вида перед ссылкой или после нее.
Перенос
на другую сторону. Несложный эффект, практическое применение которого, увы,
исключено из-за глюка в MSIE, который я описывал в начале: изменять по :hover
атрибут text-align, перенося активную ссылку слева направо (или наоборот). В
Explorer'е вызывает хаотическое прыгание текста из стороны в сторону, если при
переносе текст выходит из под курсора.
Игры
с li:hover. Работает только с новейшими браузерами (все проверить не могу, но в
NS6, как я уже говорил, не работает). Ключевой плюс - возможность менять маркер:
его форму, цвет, расположение. Кстати, замечание: маркер, расположенный inside,
принципиально конфликтует с a {display:block}, особенно перемены с outside на
inside и обратно. Во всяком случае, мне не придумать эффект, в котором бы они
разумно соседствовали. А вообще, на подходе XHTML2.0, где ссылками можно будет
делать сами элементы списка, не вставляя в них . Вот тогда-то и
повеселимся.
Список литературы
Для
подготовки данной работы были использованы материалы с сайта http://www.i2n.ru