En este tutorial les daré paso a paso el código html para poder realizar un login transparente con css. Si no sabes mucho de css, tenemos varios tutoriales donde explicamos como usarlo y varios código para que sirven.
Maquetacion Html: login transparente
Es una estructura sencilla donde pedimos usuario y contraseña. Lo que haremos a continuación con css, sera centrar todo en el medio de toda la pagina.
Código css: login transparente
🌟 ¡Visita Nuestra Tienda para Programadores! 🌟Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!
Le daremos color al fondo pero le daremos opacidad o transparencia con el box shadow, le damos color a las letras, centramos todo, damos los debidos margenes.
Ubicaremos el label arriba del input y le daremos una transición que de more .5s. Le daremos forma a nuestro input dándole un border-bottom de un 1px así de color blanco para que se pueda ver donde esta.
Por ultimo haremos que cuando tenga texto alguno de los campos, nos quede arriba los label y daremos un diseño básico al botton.
Eso es todo por este post, estaré subiendo muy pronto como hacer una pagina completa solo con css.