От автора: гиперссылки и кнопки – все еще являются функционалом в привычном внешнем виде вебсайта или веб-приложения. При взаимодействии они чаще всего дают очень небольшую ответную реакцию. Но можно очень легко добавить самые простые стили и дать понять пользователю, что они либо уже взаимодействуют, либо могут взаимодействовать с данным элементом.
Псевдоклассы и селекторы
Псевдоклассы для ссылок существуют в CSS много лет и по большей части им просто делают сброс, чтобы они все стали одного цвета и с едиными текстовыми оформлением. Их польза от этого полностью уничтожается, а потенциальная функциональность скрывается.
Добавив в CSS всего несколько классов, можно создать намного более профессиональное и удобное для пользователя меню или форму. Рассматриваемые нами сегодня псевдоклассы – это:
:focus
:hover
:active
:target
:first-letter
Также я покажу вам, как скомбинировать селекторы классов для создания особых случаев применения.
Начинаем
Первое, что следует сделать – назначить основные стили своему списку ссылок. Я ограничился простым синим текстом на светло-сером фоне. Также я удалил пока текстовые украшения, но позже мы добавим их обратно. Чтобы ссылки смотрелись похожими именно на кнопки, я изменил display на block и добавил сплошную рамку.
1 2 3 4 5 6 7 8 9 |
a { color: #1c8dc7; padding: 10px; text-decoration: none; font-size: 20px; background-color: #c2c2c2; border: 1px solid #ffffff; display: block; } |
Взаимодействие
Первый стиль, который мы собираемся добавить – при проведении пользователем над элементом. Чтобы сделать его, применим класс :hover, здесь изменяется цвет и фоновый цвет, чтобы показать пользователю, что он действительно проводит мышью над элементом.
1 2 3 4 |
a:hover { color: #7cc9f0; background-color: #cccccc; } |
Теперь, когда ясно, что мы находимся над элементом, можно применить класс :active для изменения цвета color, фонового цвета background-color и текстового украшения text-decoration при действительном щелчке или нажатии на элемент
1 2 3 4 5 |
a:active { color: #7cc9f0; background-color: #555555; text-decoration: underline; } |
В представленном мною примере HTML у каждой гиперссылки есть атрибут ID. Он дает возможность применить класс :target для добавления дополнительных стилей к выбранному в данный момент элементу.
1 2 3 4 5 |
a:target { color: #f59805; background-color: #555555; text-decoration: underline; } |
Помимо того, для получения дополнительного эффекта мы добавим редко используемый класс :first-letter. Он работает только с блочными элементами (которые мы применили ранее), и дает нам возможность назначить стили первой букве элемента. Здесь я применяю черный цвет, но вы можете взять другой шрифт.
1 2 3 4 5 6 7 |
a:first-letter { color: #333333; } a:active:first-letter, a:target:first-letter { color: #eeeeee; } |
Как видите, еще я скомбинировал классы :first-letter и :active для применения другого цвета при активном состоянии элемента или наведении на него мыши.
Выложимся на все сто
Чтобы все эти изменения действительно совпали, нужно сделать их плавне и аккуратнее. Для этого мы применим свойство перехода transition, чтобы в течении какого-то времени цветовые изменения постепенно проявлялись. Я определил их длительность в 0,5 сек., потому что переход не должен быть слишком быстрым, но и если он будет слишком медленным, то тоже не станет смотреться настолько эффектно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
a { color: #1c8dc7; padding: 10px; text-decoration: none; font-size: 20px; background-color: #c2c2c2; border: 1px solid #ffffff; display: block; line-height: 105%; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } |
Автор: Jonny Schnittger
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.
Комментарии (4)