Login transparente con css – Tutorial paso a paso)

Login transparente con css – Tutorial paso a paso

Mar 10, 2020 NGuerrero Desarrollo Web 0

¿Te gustaría aprender Diseño Web?
Tenemos los cursos que necesitas.¡Haz clic aquí!

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

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.

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.

¿Te gustaría aprender Diseño Web?
Tenemos los cursos que necesitas.¡Haz clic aquí!