🧬 Easy CSS Icon ☎️ :hover эффект 🔮
🧬 Easy CSS Icon ☎️ :hover эффект 🔮. Если ваши иконки не имеют состояния :hover или оно оставляет желать лучшего и выхотите вдохнуть новую жизнь в них. Вот вам 2 эффекта, которые отличаются только лишь направлением анимации. Будем использовать SVG-sprite, чтобы избежать дублирования кода, а так же сделать группировку используемым иконкам. Размер 📐 шрифта иконки задан в rem, а размер 📐 элемента сделан через em, чтобы размер менялся динамически при изменении размера текста. Размер 📐 svg задан в процентах от размера родительского блока.
Псевдоэлемент увеличен, путем растягивания его в каждую сторону.
Для состояния :hover цвет иконки делаем как фон страницы, создавая тем самым эффект вырезанной иконки в элементе. Псевдоэлемент масштабируем до единицы и показываем.
https://github.com/Pots1988/icon-hove... - ссылка на эффект.
#css #html #web #webdevelopment #frontend #htmlcss #html5 #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects
Подписывайтесь на меня в соц. сетях:
👨💻 LinkedIn - / maksymfariga
✈️ Telegram - канал Web🤖Education
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🎶 TikTok - / maksym_fariga
✍️ Tumblr - / maksymfariga
💬 Twitch - / maksym_fariga
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий! PPI и DPI, DPPX и ... ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 • CSS Units: Deg, Rad, Grad, Turn . ✍️
📏 Абсолютные единицы измерения в CSS? 👉 • Нужны ли они нам? Абсолютные единицы измер... . ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 • Зачем они были добавлены? CSS Units: ex, c... ✍️
🔍 Не знаете что выбрать REM или EM 👉 • Вы точно не знаете зачем мы используем REM... ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 • 😏 CSS Viewport Units: vw, vh, vmin, vmax! ... ✍️