Animación a un Input con Html y Css

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 66

  • @SLeeDw
    @SLeeDw  4 года назад +5

    Suscríbete ✅ para más vídeos tutoriales de proyectos web 💻
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    🌐 Visita mi sitio web para más recursos 👇🏻:
    - bit.ly/sleedw
    📱 Únete a nuestra comunidad en WhatsApp y comparte tus proyectos o dudas que tengas 👇🏻:
    - bit.ly/sleedw-grupo-whatsapp
    🔵 Síguenos en Facebook 👇🏻:
    - bit.ly/face-oficial-sleedw
    ▶ Saludos y que Dios te bendiga. 🙌

    • @pabloarreguin2828
      @pabloarreguin2828 3 года назад +1

      porque se me activa el valid aunque no tenga valor ayudenme porfavor!!!!

  • @goagao4231
    @goagao4231 2 года назад +2

    Amo este canal, siempre me desvivo buscando una forma de hacer una cosa con mil tutoriales y nunca puedo hasta que vengo aquí, estoy aprendiendo y este canal es el mejor

  • @jorgeantoniotorres
    @jorgeantoniotorres 9 месяцев назад +1

    Muchas gracias por compartir tu video. Explicaste todo muy bien.

  • @TheEmoLove1900
    @TheEmoLove1900 Год назад +2

    muchas gracias por tu video y tu explicacion

  • @SamuelGarcia-fg9pq
    @SamuelGarcia-fg9pq 2 года назад +1

    La mejor explicacion que he visto

    • @SLeeDw
      @SLeeDw  2 года назад

      Muchas gracias. Saludos 🤝

  • @brianmichelhernandezgarcia
    @brianmichelhernandezgarcia 4 года назад +3

    Muchas gracias me sirvió mucho, e buscado esto hace tiempo

  • @vinciguerra1354
    @vinciguerra1354 4 года назад +4

    Excelente, para los que subestiman CSS

  • @vinciguerra1354
    @vinciguerra1354 4 года назад +5

    Una pregunta: Cual es la función del pointer-events: none; en .form .lbl-nombre.

  • @colommbiano
    @colommbiano Год назад +1

    lo malo que se le debe colocar required para que funcione bien si no no funciona, si tengo un formulario de que algunos campos no sea requirido por los css me obliga a colocarlo no esta bien

  • @flakobb
    @flakobb 4 года назад +3

    Como puedo hacer un formulario con esto??
    Lo que pasa es que al generar otro se encima en el anterior o no da salto de línea.
    Help me please!!!

    • @nicollesantana3331
      @nicollesantana3331 4 года назад

      me pasa lo mismo!

    • @manuelalejandromorenovilla1844
      @manuelalejandromorenovilla1844 4 года назад

      x3

    • @paulacarluccio3818
      @paulacarluccio3818 4 года назад +1

      Hola! Si querés hacer un formulario de varios inputs tenes que copiar el div entero para que no se te sobrepongan uno arriba del otro.

      Nombre


      Apellido

    • @flakobb
      @flakobb 4 года назад

      @@paulacarluccio3818 Lo intenté y me sigue poniendo al frente del otro 😪😓

    • @JorgeRivera-rp1zw
      @JorgeRivera-rp1zw 4 года назад

      Hola...!!
      Cómo posiciono un input.?

  • @donvegas479
    @donvegas479 3 года назад +1

    Oye como seria para poner dos input porque los pone uno sobre el otro

  • @esaulurielmenesestorres4360
    @esaulurielmenesestorres4360 4 года назад +2

    Muchas gracias, excelente video

  • @JoseGarcia-gy3jo
    @JoseGarcia-gy3jo 3 года назад

    como das estilos a la barrita del input ponele que quiero cambiar de color se puede?

  • @manuelbello4663
    @manuelbello4663 2 года назад

    hola. esto aplica para un proyecto .net mvc con bootsatrap 4.5 ? ho hay que hacer algo mas alli?

  • @patfras8968
    @patfras8968 Год назад

    Ya que anidar etiquetas form es una mala práctica, la forma que encontré de trabajar con más de un input (user/password, en mi caso) es creando un para cada .

  • @yonvay5424
    @yonvay5424 Год назад

    10 de 10, muchas muchas gracias.

  • @josecastanon3178
    @josecastanon3178 3 года назад +1

    Por qué si no pones el atributo REQUIRED en el input deja de funcionar?
    tenia entendido que solo funcionaba para que fuera un campo obligatorio, pero si no lo coloco deja de funcionar correctamente, el label se queda en su posicion de arriba aunque no se le haya dado click previamente

  • @decatlon3643
    @decatlon3643 2 года назад +1

    Muchas gracias genial el contenido nuevo sub!

  • @agustinmendez6729
    @agustinmendez6729 4 года назад +2

    Muy bueno, costo un toque seguir los conceptos porque tengo conocimientos de css basicos, pero estuvo bueno

    • @SLeeDw
      @SLeeDw  4 года назад +1

      Muchas gracias amigo y gracias por comentar!!,. ☺️
      No olvides en suscribirte a este canal para seguir creciendo, y formar una bonita familia de Desarrolladores Web..🙌
      Saludos!!, y Éxitos..🙌

  • @luislaol2031
    @luislaol2031 3 года назад +1

    Excelente amigo, me suscribo

    • @SLeeDw
      @SLeeDw  3 года назад +1

      Muchas gracias amigo, Saludos y Dios te bendiga🙌💻

  • @jota4894
    @jota4894 4 года назад +2

    Y si el input en vez de tipo text es de email?. No haría ningun transale a menos de que lleve un @ y un . ya que tiene que estar validado primero.
    Y los usuarios no siempre colocan el correo como debe de ser.

    • @onceomc1457
      @onceomc1457 Год назад

      lo llegaste a resolver?, por que estoy intentando que mi label no tape el correo de mi inputo (tipo: email) y no funciona con valid, ya que como dices no valida por el simple hecho de no estar correctamente escrito y mi label se pone por encima del texto

  • @Ing_Maria
    @Ing_Maria 3 года назад

    excelente, pero si no es necesrio requerido ?

  • @anggelogomez9319
    @anggelogomez9319 Год назад

    el :valid no me funciona nose porque lo pongo y ya no esta la animacion de que sube osea sube inmediatamente me puedes ayudar? porfavor

    • @user-amatish16
      @user-amatish16 3 месяца назад

      :valid solo funciona para campos requeridos, en su lugar usa input:not(:placeholder-shown)

  • @stalindanilobadillosilva3133
    @stalindanilobadillosilva3133 4 года назад +2

    Muchas gracias :)

  • @Jhazmam
    @Jhazmam 3 года назад

    que buen video me ayudo muchísimo solo una pregunta si quisiera aplicar el mismo efecto a un botón de tipo select?

  • @mariodanielalcantaraorozco1777

    gracias amigo fue de mucha ayuda saludos

  • @paulrocha5868
    @paulrocha5868 3 года назад +1

    buen video pero si quiero poner mas de uno como se pudiera hacer

  • @andreselpeza1628
    @andreselpeza1628 3 года назад +1

    Espectacular flaco :3

    • @SLeeDw
      @SLeeDw  3 года назад

      Muchas gracias amigo, Saludos y Dios te bendiga▶🙌

  • @rosanasoares1285
    @rosanasoares1285 Год назад

    Muy buen video, gracias por compartir! Lo unico que se me ha quedado es type="email", no consigo lograrlo.

  • @yeffermorenorobledo5160
    @yeffermorenorobledo5160 2 года назад

    Amigo que extension o tema usas para ese efectro brillante en los corchetes. Excelente video.

  • @Elce-sl8zp
    @Elce-sl8zp 4 года назад +1

    Porque se queda activado el valid? Espero tu respuesta pronto gracias

    • @SLeeDw
      @SLeeDw  4 года назад +1

      Hola Elce☺, gracias por comentar, respecto a tu pregunta, el "valid" es un pseudo elemento que ayuda validar el contenido satisfactoriamente. Esto permite que los campos válidos adopten fácilmente una apariencia que ayuda al usuario a confirmar que sus datos están formateados correctamente.
      Un Ejemplo en Css sería este👇☺
      input:valid{
      background-color:orange;
      }
      Saludos y Éxitos💻🙌

  • @omarroque5817
    @omarroque5817 4 года назад +1

    wow excelente video!

    • @SLeeDw
      @SLeeDw  4 года назад +1

      Hola Omar☺, gracias por comentar, me alegra mucho que te allá gusto este proyecto..💻
      Saludos y Éxitos...☺

  • @carelisperez8857
    @carelisperez8857 10 месяцев назад

    no me funciona valid... la animacion se ejecuta desde el principio sin colocar nada

  • @esneidermorales
    @esneidermorales 2 года назад +1

    gracias , solo una cosita, cuando hagas videos , quitale el sonido a los clicks del mouse, por favor , ajajajajaj, gracias

  • @lukahst5855
    @lukahst5855 3 года назад +1

    Excelente video, el único problema único es que estuve obligado a darle a REQUIRED en la etiqueta IMPUT, de lo contrario no podía lograr ese movimiento del Border-Bottom hacia ninguno de los lados. Si alguien lo sabe agradecería la ayuda.

    • @albertogalindo5465
      @albertogalindo5465 3 года назад +1

      Lo lograste?

    • @CristianEmma22
      @CristianEmma22 2 года назад +1

      @@albertogalindo5465 yo tengo el mismo inconveniente y no se muestra la animacion si le quito el requred, gracias

    • @albertogalindo5465
      @albertogalindo5465 2 года назад +1

      @@CristianEmma22 Ya lo resolví. El evento que ocurre al hacer click fuera del input se llama blur, desafortunadamente no hay tal cosa en CSS pero sí en JS.
      Lo único que tienes que hacer es una función JS que se dispare al hacer blur, yo lo que definí en mi función es simplemente cambiarle el nombre de la clase CSS a los inputs uno por uno, al tener una nueva clase definida le aplico sus estilos correspondientes. Espero haberme explicado.

    • @CristianEmma22
      @CristianEmma22 2 года назад +1

      @@albertogalindo5465 Gracias por tu pronta respuesta, voy a tratar de hacerlo e investigarlo mas a fondo, pero ya es una luz. gracias !!

    • @albertogalindo5465
      @albertogalindo5465 2 года назад +1

      @@CristianEmma22 Inténtalo y sino lo logras te comparto mi código por DM

  • @luisangelataullucovargas4501
    @luisangelataullucovargas4501 4 года назад +3

    como se hace para validar el type= email ?
    buen video

    • @SLeeDw
      @SLeeDw  4 года назад

      Hola luis, muchas gracias por comentar, respecto a tu pregunta me gustaría ver tu código si no es molestia para poderte ayudar, en el problema que presentas con tu proyecto. Para eso te invito a que te unas a nuestro grupo de WhatsApp, que te estaré dejando por aquí el enlace : chat.whatsapp.com/Bq9yPZMPqZ3FNt8BRCbyi8, y puedas consultar cualquier problema con nosotros..
      Saludos y Éxitos.

  • @santiagoiglesiasramal4462
    @santiagoiglesiasramal4462 Год назад

    Que buena

  • @handabharpur2907
    @handabharpur2907 4 года назад

    Great work, appreciated

  • @santinoantonicelli6591
    @santinoantonicelli6591 2 года назад

    Muy bueno amigo, pero no lo puedo hacer con inputs type email

  • @josee.payemamani5062
    @josee.payemamani5062 3 года назад

    Messirvio

  • @morebass4842
    @morebass4842 3 года назад +1

    no me funciona, se queda activado el valid :(,
    pero te queda genial

    • @albertogalindo5465
      @albertogalindo5465 3 года назад

      es porque tienes que ponerle "required a tus inputs o no funciona"

    • @javifckyou28
      @javifckyou28 2 года назад

      @@albertogalindo5465 me ayudaste bro

  • @maxklariczen7320
    @maxklariczen7320 3 года назад +1

    que raro amigo sigo todos tus pasos pero no me sale :c
    ERROR : SI ME FUNCIONA :D

  • @ale02.coding
    @ale02.coding Год назад

    no me funciono pa por el position