💻 CSS Input type="text" :hover эффект⌨️

Опубликовано: 19 Март 2026
на канале: Maksym Fariga
448
21

Рассмотрим 👀 как сделать эффект при наведении на input type="text". Стоит обратить внимание на указанный placeholder с пустым пробельным символом. Он нужен, чтобы оставлять стили такими же как при состоянии focus, используя псевдокласс :not(:placeholder-shown). Примеры указаны как для расположения в строку так и в столбец. Все параметры завязаны на em и rem.

https://github.com/Pots1988/input-hov... - репозиторий с эффектом

#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! ...   ✍️