¿Has visto los inputs de Google? Se ven geniales, ¿no crees? Tienen animaciones, un color bonito, hacen sentir una buena experiencia de usuario, en lo personal soy fan de sus inputs 😍.
.
Por supuesto, no podía quedarme sin investigar cómo funcionan dichos inputs y cómo podría hacer uno similar, y es de eso de lo que vamos a hablar hoy, y no solo eso, ¡te enseñaré a hacer uno!, muy básico por supuesto, pero lo iremos mejorando con el tiempo 😉.
Todo esto es gracias a la magia de CSS, este es un lenguaje tan poderoso que con él podemos hacer animaciones muy robustas, o usar cosas más simples y elegantes como transiciones, y sobre ellas nos apoyaremos para hacer nuestro input.
.
También nos apoyaremos de una propiedad muy útil de CSS llamada transform que nos ayudará a posicionar nuestro elemento, hablaremos de ella en un próximo tutorial 😉.
.
También haremos uso de elementos extra para apoyarnos a crear ilusiones que nos ayuden con nuestra animación, y esto es algo muy importante, quiero que tengas en mente que la gran mayoría de elementos animados que encuentres en páginas web no son lo que parece, sino que son ilusiones creadas con “trucos” en CSS. Así es, no podemos animar bordes, pero podemos crear una ilusión de un borde animado 😉.
¡Bien! Ahora que ya tienes un panorama de lo que haremos, he creado un video para que puedas ver a detalle cómo estaremos haciendo este input junto con sus animaciones, ¡manos al código! 🛠
¡Genial! Ahora que ya aprendiste a crear un input animado al estilo de Google ya eres capaz de hacer cualquier tipo de animación usando ilusiones con CSS 👻.
.
Estaré pendiente de los comentarios por si tienes alguna duda, recuerda que puedes aprender más cosas como estas suscribiéndote a mi canal donde estaré subiendo cosas interesantes. 💚
Genial!! me gusta…