Делаем эффекты - :hover :focus-visible :active, для ссылок и кнопок.

В этом видео-уроке я рассказываю вам о том как правильно применять состояния - :hover , :focus, :active ( так-же мы рассмотрим мало знакомое свойство :focus-visible ). 1. Покажу как обращаться к псевдоэлементам ::after и ::before на примере. 2. И объясню как правильно понимать это обращение по селекторам. 3. Познакомлю вас с редактором иконок с помощью которого вы сможете оптимальным способом менять цвет иконки при наведении. С помощу которого вам не потребуется засорять вашу html структуру! Ссылка на редактор в описании под номером - 1 ВНИМАНИЕ в видео есть неточности!!! 19:52 - заместо ссылки перевернётся стрелка если не прописать 45deg 20:37 - подразумеваю что кнопка похожа на ссылку только визуально! Ссылки: 1. URL-encoder для SVG - https://yoksel.github.io/url-encoder/ru/ 2. Telegram канал - t.me/frontend_EasyNhard 3. Пишите мне - https://t.me/viacheslaw_hachirow Тайм-коды: 00:00 - Начало. 13:00 - Что буду говорить на уроке. 01:34 - Разбор простого примера с ссылками (пример 1). 2:00 - Ошибка новичков в свойстве transtion(all .3s). 3:02 - Медиа запрос any-hover. 4:31 - Обзор правильной записи focus-visible. 7:52 - Плохой пример, примера 1. 8:20 - Делаю плавное исчезновение обводки при наведении (:hover). 9:31 - изменение цвета обводки с помощью outline-color: ; 9:53 - Как сделать ссылку с псевдоэлементом :after. 10:25 - Сообщаю о своих материалах на своём канале (подписывайтесь ссылка 2) 13:15 - Как обратиться к псевдоэлементу? 13:36 - Ссылка со стрелкой ! 22:00 - Как сделать кнопку поиска? 23:15 - Редактор для иконки! 27:00 - Поддержите пой канал :)))

Видео Делаем эффекты - :hover :focus-visible :active, для ссылок и кнопок. автора frontend_EasyNhard