Тёмный

Красивое текстовое поле с плейсхолдером вверху HTML + CSS 

Александр Дудукало
Подписаться 19 тыс.
Просмотров 4,9 тыс.
50% 1

Делаем анимированный плейсхолдер, который при фокусировке на input перемещается вверх без Javascript.
👁‍🗨 Телеграм: t.me/frontend_du2
👁‍🗨 Discord: / discord
👁‍🗨 VK: frontend
👁‍🗨 Дзен: dzen.ru/frontend
👁‍🗨 Rutube: rutube.ru/u/fr...

Опубликовано:

 

21 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 63   
@eks9835
@eks9835 Год назад
Спасибо за интересную реализацию. Отдельная благодарность за такое чёткое, детальное объяснение. Вас очень приятно слушать, а теперь ещё и видеть)
@alex_dudukalo
@alex_dudukalo Год назад
Спасибо вам :) Да, думал делать такое видео с изображением справа в углу и решил попробовать :) Мне кажется это делает ролик более живым и не рутинным :) Спасибо вам
@HAVALSKI
@HAVALSKI Год назад
Не перестаю удивляться, сколько всего интересного можно узнать, получилось красиво и без джс) С веб камерой формат видео стал интересней, сколько ютуба пересмотрел, видео, в которых видишь рассказывающего лучше заходят) Спасибо за годный контент)
@alex_dudukalo
@alex_dudukalo Год назад
Спасибо вам за полезнейший комментарий. Да, я тоже решил так попробовать записать. Наверное картинка со мной немного отвлекает от основного контента, но мне кажется видео так интереснее смотрать :)
@РонКасторкин
@РонКасторкин Год назад
Александр, приятно вас не только слушать и слышать, но и видеть, отличный формат, а главное полезный! Спасибо!
@alex_dudukalo
@alex_dudukalo Год назад
Спасибо вам за поддержеку :) Пробую новый формат, возможно буду как то улучшать ))
@EkaterinaAvdeeva-v8q
@EkaterinaAvdeeva-v8q Год назад
Вы гений, Александр! пол дня потратила чтобы сделать кастомный плейсхолдер, пока не нашла у вас это видео! Вы очень сильно помогаете в обучении))
@alex_dudukalo
@alex_dudukalo Год назад
Очень рад, что смог предложить интересное решение ) Обязательно добавьте ролик в закладки, что бы применять в проектах такой способ) Спасибо за вашу поддержку )
@VaynakhYT
@VaynakhYT Год назад
очень хорошо преподнесли инфу , спасибо большое ! очень приятный человек!!
@alex_dudukalo
@alex_dudukalo Год назад
Спасибо вам за такой приятный комментарий :)) Очень поднимает настроение
@timkri0
@timkri0 Год назад
В этом году уже второе видео ! Очень круто ! Динамика выхода видео очень сильно радует !
@alex_dudukalo
@alex_dudukalo Год назад
Постараюсь усилить темп создания роликов. Сейчас немного приболел, но думаю обязательно наверстаю :)
@jasulantv8318
@jasulantv8318 Год назад
Это шикарно, У тебя классное видео бро + подписчик
@alex_dudukalo
@alex_dudukalo Год назад
Большое спасибо )) за поддержку и подписку :) Постепенно растем :)
@ЭдуардАзизян-н4к
Александр, спасибо большое за видео! Узнал для себя красивую реализацию инпута!
@alex_dudukalo
@alex_dudukalo Год назад
Рад, что видео вам пригодилось и большое спасибо за комментарий :)
@НаталияЧамарова
Александр, спасибо! Отличное, нужное видео! Запишите, пожалуйста, еще видео по позиционированию более подробное.
@alex_dudukalo
@alex_dudukalo Год назад
Здравствуйте, спасибо вам ) будем работать над роликом
@ЕленаНекит
@ЕленаНекит Год назад
Большое спасибо! Ваше видео очень выручило и сократило мне мучения))
@alex_dudukalo
@alex_dudukalo Год назад
Очень рад, что смог вам помочь этим роликом :) Буду работать над следующими :)
@ДарьяЧелюбеева-з1и
@ДарьяЧелюбеева-з1и 6 месяцев назад
Интересная реализация. Буду пробовать
@pavlova-als
@pavlova-als Год назад
Супер видео получилось! Все подробно и понятно! Ждём следующее
@alex_dudukalo
@alex_dudukalo Год назад
Спасибо вам. Обязательно буду работать над следующим роликом. Надеюсь вы там же будете поддерживать меня, мне это очень приятно и важно
@DmitriyLok
@DmitriyLok 10 месяцев назад
Спасибо, очень круто! С меня подписка, смотрю много контента полезного на канале!
@alex_dudukalo
@alex_dudukalo 10 месяцев назад
Спасибо за ваш комментарий и подписку 🤗
@tigrext20
@tigrext20 Год назад
Интересная реализация плейсхолдера. Не видел ещё такого.
@alex_dudukalo
@alex_dudukalo Год назад
Да, я недавно такой способ открыл для себя)
@thrji-plus-kerf-plus-kera
@thrji-plus-kerf-plus-kera Год назад
Круто чувак не знал что так можно буду теперь это использовать спасибо за видео
@alex_dudukalo
@alex_dudukalo Год назад
Да, я и сам не так давно открыл для себя этот способ :) Спасибо за отклик :)
@TheBodik87
@TheBodik87 Год назад
Класс! И не нужно тянуть тот же Material-UI с похожим инпутом...
@alex_dudukalo
@alex_dudukalo Год назад
Да да, у гугла почти такое же оформление полей ввода )
@ktozdes72
@ktozdes72 10 месяцев назад
Виде нормально зашло. Типа: так ребята, у меня есть 10мин быстренько расскажу вам про плейсхолдер 😊
@alex_dudukalo
@alex_dudukalo 10 месяцев назад
Да да :) Хотелось все быстро показать. Спасибо вам, рад что видео понравилось ))
@РасимШаймарданов
Шикарно
@alex_dudukalo
@alex_dudukalo Год назад
Спасибо :)
@bober_popior
@bober_popior Месяц назад
От души брат
@swixs1
@swixs1 11 месяцев назад
Спасибо за помощь топ контент, лайк)
@alex_dudukalo
@alex_dudukalo 11 месяцев назад
Спасибо за отзыв)) надеюсь и другие видео канала будут вам полезны 😊
@СтаниславГорячев-г1ъ
Как всегда полезно 👍спасибо
@alex_dudukalo
@alex_dudukalo Год назад
Спасибо за отклик :)
@andreyfedyukin8360
@andreyfedyukin8360 Год назад
Спасибо 👍
@alex_dudukalo
@alex_dudukalo Год назад
Спасибо вам за отклик :)
@web-impuls
@web-impuls Год назад
ну, есть ещё пару примеров реализации такого плэйсхолдера)) С :placeholder-shown и :focus-within и ещё один варик, надо будет вспомнить
@alex_dudukalo
@alex_dudukalo Год назад
Да да, на самом деле есть разные способы :) Я показал один из :)
@andreypavlukov1192
@andreypavlukov1192 Год назад
Ждём видео про табы)))
@alex_dudukalo
@alex_dudukalo Год назад
Да да :) Планирую видео по табам :)
@andreypavlukov1192
@andreypavlukov1192 Год назад
Если бы я знал про transform-origin раньше...
@alex_dudukalo
@alex_dudukalo Год назад
)) Очень много свойств в css. Сложно запомнить их и тем более выучить :) Да, transform-origin часто выручает
@megabulk
@megabulk Год назад
У меня есть предложение сделать канал на Твиче и там вместо того чтобы играть в игры писать код, но не просто писать, а комментировать все свои ошибки и проблемы как это делало например Карина Стримерша)))))
@alex_dudukalo
@alex_dudukalo Год назад
Да, я думаю об этом. В таких трансляциях важна изюминка или харизма :) Мне кажется, что зритель может заскучать, если просто комментировать код :) Но это интересно. Я немного потренируюсь и думаю попробую что то такое :)
@ПавелКаханов-з6р
Не советую анимировать свойство "top", антипаттерн же. Всё же лучше для такого использовать transform.
@alex_dudukalo
@alex_dudukalo Год назад
Согласен, да. Лучше использовать tranform для таких анимаций )
@СтаниславГорячев-г1ъ
С вебкой топ кстати
@alex_dudukalo
@alex_dudukalo Год назад
Да, решил немного поэксперементировать ) Конечно, немного отвлекает от кода, но может быть так интереснее. Буду наблюдать за реакцией :)
@andreypavlukov1192
@andreypavlukov1192 Год назад
Буду оставлять коменты пока 100к не наберется подписчиков (кажется активность под видео этому способствует)
@alex_dudukalo
@alex_dudukalo Год назад
Конечно способствует. Например это видео выбилось в топ из всех видео на канале по скорости набора просмотров :) И меня это радует. Я немного приболел. Постараюсь скорее поправиться и вернуться к работе над каналом :)
@andreypavlukov1192
@andreypavlukov1192 Год назад
@@alex_dudukalo Да,холодно вирусы 🦠 в самом активном состоянии, желаю быстро встать на ноги!
@СергейГадаев-у5н
Я такую фичу уже делал и использовал js для фокуса)) Через css интересное решение, но как оно будет себя вести, если мы настроим более детальную валидацию и введение символы не будут ей оответствовать, тогда плейсхолдер перекроет наш ввод?
@alex_dudukalo
@alex_dudukalo Год назад
Я сам недавно открыл для себя такой способ :) Да, этот способ работает для простой валидации. Но мы говорим о встроенной в браузером валидации. Обычно в проектах валидацию делают через JS. Поэтому думаю проблем с этим не будет. Но если все же валидация браузерная, то да этот способ не подойдет )
@ktozdes72
@ktozdes72 10 месяцев назад
Только хотел такой же вопрос задать 😊 А уже ответили, оперативно работаете 😊
@snegosvin6815
@snegosvin6815 5 месяцев назад
А если поле не required, тогда not focus valid уже не действует. Как быть?
@felix_co
@felix_co Год назад
Привет, а если инпут будет с бордером не только снизу, то получается что под плейсхолдером будет линия? Ее как-нибудь можно убрать не играясь с цветом фона под плейсхолдером и не делая ему заливку?
@alex_dudukalo
@alex_dudukalo Год назад
Приветствую :) Если я правильно понял вопрос, то вы имеете ввиду ситуацию, когда плейсхолдер перекрывает собой рамку input. В таком случае рекомендую выше поднимать плейсхолдер, используя свойство top
Далее
HA-HA-HA 👊  #countryball
00:15
Просмотров 1,9 млн
🎙ПОЮ для ТЕБЯ ВЖИВУЮ!🍁
3:12:31
Просмотров 437 тыс.
Распаковка iPhone 16 Pro Max
01:01
Просмотров 1,5 млн
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 317 тыс.
HA-HA-HA 👊  #countryball
00:15
Просмотров 1,9 млн