Псевдоклассы и переходы для ссылок и кнопок

Псевдоклассы и переходы для ссылок и кнопок

От автора: гиперссылки и кнопки – все еще являются функционалом в привычном внешнем виде вебсайта или веб-приложения. При взаимодействии они чаще всего дают очень небольшую ответную реакцию. Но можно очень легко добавить самые простые стили и дать понять пользователю, что они либо уже взаимодействуют, либо могут взаимодействовать с данным элементом.

скачать исходникидемо

Псевдоклассы и селекторы

Псевдоклассы для ссылок существуют в CSS много лет и по большей части им просто делают сброс, чтобы они все стали одного цвета и с едиными текстовыми оформлением. Их польза от этого полностью уничтожается, а потенциальная функциональность скрывается.

Добавив в CSS всего несколько классов, можно создать намного более профессиональное и удобное для пользователя меню или форму. Рассматриваемые нами сегодня псевдоклассы – это:

:focus

:hover

:active

:target

:first-letter

Также я покажу вам, как скомбинировать селекторы классов для создания особых случаев применения.

Начинаем

Первое, что следует сделать – назначить основные стили своему списку ссылок. Я ограничился простым синим текстом на светло-сером фоне. Также я удалил пока текстовые украшения, но позже мы добавим их обратно. Чтобы ссылки смотрелись похожими именно на кнопки, я изменил display на block и добавил сплошную рамку.

Взаимодействие

Первый стиль, который мы собираемся добавить – при проведении пользователем над элементом. Чтобы сделать его, применим класс :hover, здесь изменяется цвет и фоновый цвет, чтобы показать пользователю, что он действительно проводит мышью над элементом.

Теперь, когда ясно, что мы находимся над элементом, можно применить класс :active для изменения цвета color, фонового цвета background-color и текстового украшения text-decoration при действительном щелчке или нажатии на элемент

В представленном мною примере HTML у каждой гиперссылки есть атрибут ID. Он дает возможность применить класс :target для добавления дополнительных стилей к выбранному в данный момент элементу.

Помимо того, для получения дополнительного эффекта мы добавим редко используемый класс :first-letter. Он работает только с блочными элементами (которые мы применили ранее), и дает нам возможность назначить стили первой букве элемента. Здесь я применяю черный цвет, но вы можете взять другой шрифт.

Как видите, еще я скомбинировал классы :first-letter и :active для применения другого цвета при активном состоянии элемента или наведении на него мыши.

Выложимся на все сто

Чтобы все эти изменения действительно совпали, нужно сделать их плавне и аккуратнее. Для этого мы применим свойство перехода transition, чтобы в течении какого-то времени цветовые изменения постепенно проявлялись. Я определил их длительность в 0,5 сек., потому что переход не должен быть слишком быстрым, но и если он будет слишком медленным, то тоже не станет смотреться настолько эффектно.

Автор: Jonny Schnittger

Источник: //www.developerdrive.com/

Редакция: Команда webformyself.

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (4)