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

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

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

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

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

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

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

:focus

:hover

:active

:target

:first-letter

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

Начинаем

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

a {        
    color: #1c8dc7;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    background-color: #c2c2c2;
    border: 1px solid #ffffff; 
    display: block;
}

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

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

a:hover {
    color: #7cc9f0;
    background-color: #cccccc;
}

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

a:active {
    color: #7cc9f0;
    background-color: #555555;
    text-decoration: underline;
}

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

a:target {
    color: #f59805;
    background-color: #555555;
    text-decoration: underline;
}

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

a:first-letter {
    color: #333333;            
}

a:active:first-letter, a:target:first-letter {
    color: #eeeeee;            
}

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

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

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

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree