Псевдокласи і селектори
Псевдокласи для посилань існують в CSS багато років і здебільшого їм просто роблять скидання, щоб вони всі стали одного кольору і з єдиними текстовими оформленням. Їх користь від цього повністю знищується, а потенційна функціональність ховається.
Додавши в CSS всього кілька класів, можна створити набагато більш професійне та зручне для користувача меню або форму. Розглянуті нами сьогодні псевдокласи - це:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Також я покажу вам, як скомбінувати селектори класів для створення особливих випадків застосування.
Перше, що слід зробити - призначити основні стилі своєму списку посилань. Я обмежився простим синім текстом на світло-сірому тлі. Також я видалив поки текстові прикраси, але пізніше ми додамо їх назад. Щоб посилання виглядали схожими саме на кнопки, я змінив display на block і додав суцільну рамку.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
взаємодія
Перший стиль, який ми збираємося додати - при проведенні користувачем над елементом. Щоб зробити його, застосуємо клас: hover, тут змінюється колір і фоновий колір, щоб показати користувачеві, що він дійсно проводить мишею над елементом.
Тепер, коли ясно, що ми знаходимося над елементом, можна застосувати клас: active для зміни кольору color, фонового кольору background-color і текстового прикраси text-decoration при дійсному натисканні або натисканні на елемент
У представленому мною прикладі HTML у кожної гіперпосилання є атрибут ID. Він дає можливість застосувати клас: target для додавання додаткових стилів до вибраного в даний момент елементу.
Крім того, для отримання додаткового ефекту ми додамо рідко використовуваний клас: first-letter. Він працює тільки з блочними елементами (які ми застосували раніше), і дає нам можливість призначити стилі першою літерою елемента. Тут я застосовую чорний колір, але ви можете взяти інший шрифт.
Як бачите, ще я скомбінував класи: first-letter і: active для застосування іншого кольору при активному стані елемента або наведенні на нього миші.
Викладемося на всі сто
Щоб всі ці зміни дійсно співпали, необхідно зробити їх плавні і акуратніше. Для цього ми застосуємо властивість переходу transition, щоб протягом якогось часу колірні зміни поступово виявлялися. Я визначив їх тривалість в 0,5 сек. тому що перехід не повинен бути занадто швидким, але і якщо він буде занадто повільним, то теж не стане виглядати настільки ефектно.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
