39 подписчиков
Развеиваем страх кода. Часть №2.
Анимация при взаимодействии (псевдоклассы)
Привет, друзья! На связи Настя Соло.
Главная задача любой анимации в веб-интерфейсе — дать пользователю обратную связь. Человек должен сразу считывать, куда можно нажать и сработал ли его клик.
Вспомните обычные ссылки: вы навели курсор, и появился «кликабельный палец» или подчеркивание. Это базовый сигнал для мозга, что элемент активен. Точно так же должны вести себя кнопки, поля для ввода и карточки.
Продуманный интерфейс дает отклик на действия. Благодаря этому проект выглядит живым, дорогим и качественным.
В CSS за этот диалог с пользователем отвечают псевдоклассы. Это специальные команды, которые меняют внешний вид элемента в момент, когда мы что-то с ним делаем:
🖱 :hover — срабатывает при наведении курсора мыши.
💥 :active — дает отклик в долю секунды самого нажатия (создает физическое ощущение реального щелчка).
✨transition — команда плавности. Без нее элементы будут меняться резко и дёргано. Она задает время анимации, чтобы эффект выглядел мягко и профессионально.
При наведении мы можем делать с элементом вообще всё что угодно! Например: залить другим цветом, добавить яркую рамку, изменить цвет текста, наложить тень или скруглить углы.
Давайте сделаем кнопку прямо сейчас. Я подготовила код, в котором мы зададим стартовый вид кнопки, а при наведении кардинально её поменяем.
CSS:
.f-btn.btn, .xdget-button
background: #ff8a00!important; /* задаем стартовый оранжевый цвет кнопки */
border: 2px solid transparent!important; /* делаем невидимую рамку */
color: #ffffff!important; /* делаем текст белым */
border-radius: 6px!important; /* немного скругляем углы */
transition: 0.4s; /* задаем плавность всех изменений */
.f-btn.btn:hover, .xdget-button:hover
background: #ffffff!important; /* при наведении фон становится белым */
border: 2px solid #ff8a00!important; /* появляется оранжевая рамка */
color: #ff8a00!important; /* текст становится оранжевым */
transform: scale(1.05); /* кнопка плавно увеличивается */
.f-btn.btn:active, .xdget-button:active
transform: scale(0.95); /* при клике кнопка проваливается, имитируя нажатие */
Куда вставить этот код на Геткурс?
Чтобы ответить на этот вопрос, нужно понимать, что на платформе существует два разных конструктора:
Новый конструктор — это лендинги и уроки внутри.
Старый конструктор — это системные страницы и страница входа, обратной связи, личный кабинет, список тренингов, список уроков и открытый профиль.
Именно поэтому в нашем коде мы использовали сразу два обращения, чтобы магия применилась вообще ко всем вариантам кнопок:
🔹 .f-btn.btn — сработает для кнопок в новом конструкторе, а также для системных кнопок, которые изначально свёрстаны самим Геткурсом в старом конструкторе.
🔹.xdget-button — сработает специально для блока «Кнопка», который мы можем вручную добавить в старом конструкторе (через меню «Добавить блок»).
Если вы меняете кнопки в НОВОМ конструкторе (на лендингах или внутри уроков):
— Для всех кнопок на странице / в уроке: добавьте стандартный блок CSS из меню блоков и вставьте туда код целиком.
— Для кнопок только в одном конкретном блоке: нажмите кнопку «Стиль» и перейдите в подробные настройки. В поле CSS вставьте этот же самый код.
Если вы меняете кнопки в СТАРОМ конструкторе (например, в списке тренингов):
Нажмите кнопку «Действия» в правом верхнем углу ➡ «Настроить вид» ➡ и вставьте наш код в поле со значком </> (Стили). Это перекрасит и анимирует все кнопки на...
2 минуты
29 июля