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

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 63

  • @eks9835
    @eks9835 ปีที่แล้ว +7

    Спасибо за интересную реализацию. Отдельная благодарность за такое чёткое, детальное объяснение. Вас очень приятно слушать, а теперь ещё и видеть)

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам :) Да, думал делать такое видео с изображением справа в углу и решил попробовать :) Мне кажется это делает ролик более живым и не рутинным :) Спасибо вам

  • @EkaterinaAvdeeva-v8q
    @EkaterinaAvdeeva-v8q ปีที่แล้ว +1

    Вы гений, Александр! пол дня потратила чтобы сделать кастомный плейсхолдер, пока не нашла у вас это видео! Вы очень сильно помогаете в обучении))

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Очень рад, что смог предложить интересное решение ) Обязательно добавьте ролик в закладки, что бы применять в проектах такой способ) Спасибо за вашу поддержку )

  • @HAVALSKI
    @HAVALSKI ปีที่แล้ว +3

    Не перестаю удивляться, сколько всего интересного можно узнать, получилось красиво и без джс)
    С веб камерой формат видео стал интересней, сколько ютуба пересмотрел, видео, в которых видишь рассказывающего лучше заходят)
    Спасибо за годный контент)

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам за полезнейший комментарий. Да, я тоже решил так попробовать записать. Наверное картинка со мной немного отвлекает от основного контента, но мне кажется видео так интереснее смотрать :)

  • @VaynakhYT
    @VaynakhYT ปีที่แล้ว +3

    очень хорошо преподнесли инфу , спасибо большое ! очень приятный человек!!

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам за такой приятный комментарий :)) Очень поднимает настроение

  • @НаталияЧамарова
    @НаталияЧамарова ปีที่แล้ว +1

    Александр, спасибо! Отличное, нужное видео! Запишите, пожалуйста, еще видео по позиционированию более подробное.

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Здравствуйте, спасибо вам ) будем работать над роликом

  • @tigrext20
    @tigrext20 ปีที่แล้ว +1

    Интересная реализация плейсхолдера. Не видел ещё такого.

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Да, я недавно такой способ открыл для себя)

  • @РонКасторкин
    @РонКасторкин ปีที่แล้ว +1

    Александр, приятно вас не только слушать и слышать, но и видеть, отличный формат, а главное полезный! Спасибо!

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам за поддержеку :) Пробую новый формат, возможно буду как то улучшать ))

  • @timkri0
    @timkri0 ปีที่แล้ว +1

    В этом году уже второе видео !
    Очень круто ! Динамика выхода видео очень сильно радует !

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Постараюсь усилить темп создания роликов. Сейчас немного приболел, но думаю обязательно наверстаю :)

  • @ЭдуардАзизян-н4к
    @ЭдуардАзизян-н4к ปีที่แล้ว +1

    Александр, спасибо большое за видео! Узнал для себя красивую реализацию инпута!

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Рад, что видео вам пригодилось и большое спасибо за комментарий :)

  • @jasulantv8318
    @jasulantv8318 ปีที่แล้ว +2

    Это шикарно,
    У тебя классное видео бро + подписчик

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Большое спасибо )) за поддержку и подписку :) Постепенно растем :)

  • @ЕленаНекит
    @ЕленаНекит ปีที่แล้ว +1

    Большое спасибо! Ваше видео очень выручило и сократило мне мучения))

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Очень рад, что смог вам помочь этим роликом :) Буду работать над следующими :)

  • @ДарьяЧелюбеева-з1и
    @ДарьяЧелюбеева-з1и 9 หลายเดือนก่อน

    Интересная реализация. Буду пробовать

  • @Luka2003
    @Luka2003 ปีที่แล้ว +1

    Круто чувак не знал что так можно буду теперь это использовать спасибо за видео

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Да, я и сам не так давно открыл для себя этот способ :) Спасибо за отклик :)

  • @web-impuls
    @web-impuls ปีที่แล้ว +1

    ну, есть ещё пару примеров реализации такого плэйсхолдера)) С
    :placeholder-shown и :focus-within и ещё один варик, надо будет вспомнить

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Да да, на самом деле есть разные способы :) Я показал один из :)

  • @pavlova-als
    @pavlova-als ปีที่แล้ว +1

    Супер видео получилось! Все подробно и понятно! Ждём следующее

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам. Обязательно буду работать над следующим роликом. Надеюсь вы там же будете поддерживать меня, мне это очень приятно и важно

  • @DmitriyLok
    @DmitriyLok ปีที่แล้ว

    Спасибо, очень круто! С меня подписка, смотрю много контента полезного на канале!

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо за ваш комментарий и подписку 🤗

  • @TheBodik87
    @TheBodik87 ปีที่แล้ว +1

    Класс! И не нужно тянуть тот же Material-UI с похожим инпутом...

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Да да, у гугла почти такое же оформление полей ввода )

  • @ktozdes72
    @ktozdes72 ปีที่แล้ว +1

    Виде нормально зашло. Типа: так ребята, у меня есть 10мин быстренько расскажу вам про плейсхолдер 😊

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Да да :) Хотелось все быстро показать. Спасибо вам, рад что видео понравилось ))

  • @andreypavlukov1192
    @andreypavlukov1192 ปีที่แล้ว +1

    Ждём видео про табы)))

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Да да :) Планирую видео по табам :)

  • @swixs1
    @swixs1 ปีที่แล้ว

    Спасибо за помощь топ контент, лайк)

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว +1

      Спасибо за отзыв)) надеюсь и другие видео канала будут вам полезны 😊

  • @andreypavlukov1192
    @andreypavlukov1192 ปีที่แล้ว +1

    Если бы я знал про transform-origin раньше...

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว +1

      )) Очень много свойств в css. Сложно запомнить их и тем более выучить :) Да, transform-origin часто выручает

  • @СтаниславГорячев-г1ъ
    @СтаниславГорячев-г1ъ ปีที่แล้ว +1

    Как всегда полезно 👍спасибо

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо за отклик :)

  • @bober_popior
    @bober_popior 4 หลายเดือนก่อน

    От души брат

  • @andreyfedyukin8360
    @andreyfedyukin8360 ปีที่แล้ว +1

    Спасибо 👍

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам за отклик :)

  • @ПавелКаханов-з6р
    @ПавелКаханов-з6р ปีที่แล้ว +1

    Не советую анимировать свойство "top", антипаттерн же. Всё же лучше для такого использовать transform.

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Согласен, да. Лучше использовать tranform для таких анимаций )

  • @megabulk
    @megabulk ปีที่แล้ว +1

    У меня есть предложение сделать канал на Твиче и там вместо того чтобы играть в игры писать код, но не просто писать, а комментировать все свои ошибки и проблемы как это делало например Карина Стримерша)))))

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว +1

      Да, я думаю об этом. В таких трансляциях важна изюминка или харизма :) Мне кажется, что зритель может заскучать, если просто комментировать код :) Но это интересно. Я немного потренируюсь и думаю попробую что то такое :)

  • @felix_co
    @felix_co ปีที่แล้ว +1

    Привет, а если инпут будет с бордером не только снизу, то получается что под плейсхолдером будет линия? Ее как-нибудь можно убрать не играясь с цветом фона под плейсхолдером и не делая ему заливку?

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Приветствую :) Если я правильно понял вопрос, то вы имеете ввиду ситуацию, когда плейсхолдер перекрывает собой рамку input. В таком случае рекомендую выше поднимать плейсхолдер, используя свойство top

  • @СергейГадаев-у5н
    @СергейГадаев-у5н ปีที่แล้ว +1

    Я такую фичу уже делал и использовал js для фокуса)) Через css интересное решение, но как оно будет себя вести, если мы настроим более детальную валидацию и введение символы не будут ей оответствовать, тогда плейсхолдер перекроет наш ввод?

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Я сам недавно открыл для себя такой способ :) Да, этот способ работает для простой валидации. Но мы говорим о встроенной в браузером валидации. Обычно в проектах валидацию делают через JS. Поэтому думаю проблем с этим не будет. Но если все же валидация браузерная, то да этот способ не подойдет )

    • @ktozdes72
      @ktozdes72 ปีที่แล้ว

      Только хотел такой же вопрос задать 😊
      А уже ответили, оперативно работаете 😊

  • @РасимШаймарданов
    @РасимШаймарданов ปีที่แล้ว +1

    Шикарно

  • @andreypavlukov1192
    @andreypavlukov1192 ปีที่แล้ว +1

    Буду оставлять коменты пока 100к не наберется подписчиков (кажется активность под видео этому способствует)

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Конечно способствует. Например это видео выбилось в топ из всех видео на канале по скорости набора просмотров :) И меня это радует. Я немного приболел. Постараюсь скорее поправиться и вернуться к работе над каналом :)

    • @andreypavlukov1192
      @andreypavlukov1192 ปีที่แล้ว

      @@alex_dudukalo Да,холодно вирусы 🦠 в самом активном состоянии, желаю быстро встать на ноги!

  • @snegosvin6815
    @snegosvin6815 8 หลายเดือนก่อน

    А если поле не required, тогда not focus valid уже не действует. Как быть?

  • @СтаниславГорячев-г1ъ
    @СтаниславГорячев-г1ъ ปีที่แล้ว

    С вебкой топ кстати

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว +2

      Да, решил немного поэксперементировать ) Конечно, немного отвлекает от кода, но может быть так интереснее. Буду наблюдать за реакцией :)