Login transparente con css – Tutorial paso a paso

Css

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

login

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

login

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.

login

 

login

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.

login

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.

login

Eso es todo por este post, estaré subiendo muy pronto como hacer una pagina completa solo con css.