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

2

Від автора: гіперпосилання та кнопки – все ще є функціоналом в звичному зовнішньому вигляді web-сайту або веб-додатки. При взаємодії вони найчастіше дають дуже невелику реакцію. Але можна дуже легко додати найпростіші стилі і дати зрозуміти користувачеві, що вони або вже взаємодіють, або можуть взаємодіяти з даним елементом.

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

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

Псевдокласи для посилань існують в 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.5 s ease-in-out;
-webkit-transition: all 0.5 s ease-in-out;
-moz-transition: all 0.5 s ease-in-out;
-o-transition: all 0.5 s ease-in-out;
transition: all 0.5 s ease-in-out;
}