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

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

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

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

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

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

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

:focus

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

:hover

:active

:target

:first-letter

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

Начинаем

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

Автор: Jonny Schnittger

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

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

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

Комментарии Facebook:

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

  1. Александр

    Жаль, что такие чудесные свойства не правильно работают в IE8. Смотрел «онлайн Демо».

  2. Дмитрий

    Добрый день. При переводе была допущена ошибка в последнем абзаце в предложении «Для этого мы применим свойство перехода transition, чтобы в течении какого-то времени цветовые изменения постепенно проявлялись». В данном случае слово «течение» пишется с буквой «е», а не «и».

  3. feuer81

    Какой псевдокласс можно применить элементу button, если он является индикатором слайдера и нужно изменить цвет и размеры для кнопки, слайдер которой сейчас выбран?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree