Formulario de Login con CSS3

Formulario de Login con CSS3

Online | free | Publicación:2013 | Pass:www.detodoprogramacion.com

Descripción:
Hoy te voy a enseñar cómo crear una hermosa página de inicio de sesión con CSS3 que puede ser integrado en su sitio web, blog, aplicación, etc este método es usado para crear una página de inicio de sesión para la aplicación en WordPress, o donde mas ud lo quiera usar.

Paso 1 - El HTML 
Antes de empezar a crear la página de acceso a la CSS, primero necesitará el código HTML que incluirá todo, desde los botones, links, campos, y el diseño básico antes de que ponga el enlace del HTML al CSS para completar el diseño.
<div class="container"> <div class="login"> <h1> Login</h1> <form method="post" action=""> <p> <input type="text" name="login" value="" placeholder="Usuario o Email"></p> <p> <input type="password" name="password" value="" placeholder="Password"></p> <p class="remember_me"> <label> <label> <input type="checkbox" name="remember_me" id="remember_me"> Recordarme Datos </label> </label> </p> <p class="submit"> <input type="submit" name="commit" value="Login"></p> </form> </div> <div class="login-help"> <p> ¿Olvidó su contraseña? <a href="#">Restablecer Contraseña</a>.</p> </div> </div>


Paso 2 - A partir del CSS
Después de la finalización de la HTML que necesitamos ahora para comenzar la parte CSS del diseño. En primer lugar, tenemos que comenzar el diseño de la página de inicio de sesión. Para empezar, comience con el código de abajo. Al agregar este CSS asegúrese de dejar espacio por encima del Código de organizar en consecuencia. Después, podemos entonces añadir elementos adicionales tales como el diseño del body.
.container { margin: 50px auto; width: 640px; } .login { position: relative; margin: 0 auto; padding: 20px 20px 20px; width: 310px; }

Después de haber agregado el código anterior, hemos añadido la altura y el ancho del formulario de una página de inicio de sesión y se han centrado hasta el centro de la página web. Ahora podemos empezar mi parte favorita del diseño, la belleza. Escribir el siguiente código añade un borde y una sombra gris a la página de inicio de sesión y usted comenzará a ver el diseño viene en forma.
.login p.submit { text-align: right; } .login-help { margin: 20px 0; font-size: 11px; color: white; text-align: center; text-shadow: 0 1px #2a85a1; } .login-help a { color: #cce7fa; text-decoration: none; } .login-help a:hover { text-decoration: underline; } :-moz-placeholder { color: #c9c9c9 !important; font-size: 13px; } ::-webkit-input-placeholder { color: #ccc; font-size: 13px; }

Paso 3 - El Diseño
Ahora tenemos la base de la forma de inicio de sesión y ahora estamos listos para iniciar el diseño actual de la misma. La siguiente parte de este tutorial es todo preferencia personal y se puede personalizar a su gusto. Usted puede comenzar con el código CSS a continuación, lo que añadirá un borde interno y el radio en el color gris exterior.
.container { margin: 50px auto; width: 640px; } .login:before { content: ''; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; z-index: -1; background: rgba(0, 0, 0, 0.08); border-radius: 4px; } .login h1 { margin: -20px -20px 21px; line-height: 40px; font-size: 15px; font-weight: bold; color: #555; text-align: center; text-shadow: 0 1px white; background: #f3f3f3; border-bottom: 1px solid #cfcfcf; border-radius: 3px 3px 0 0; background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5); background-image: -moz-linear-gradient(top, whiteffd, #eef2f5); background-image: -o-linear-gradient(top, whiteffd, #eef2f5); background-image: linear-gradient(to bottom, whiteffd, #eef2f5); -webkit-box-shadow: 0 1px whitesmoke; box-shadow: 0 1px whitesmoke; } .login p { margin: 20px 0 0; } .login p:first-child { margin-top: 0; } .login input[type=text], .login input[type=password] { width: 278px; } .login p.remember_me { float: left; line-height: 31px; } .login p.remember_me label { font-size: 12px; color: #777; cursor: pointer; } .login p.remember_me input { position: relative; bottom: 1px; margin-right: 4px; vertical-align: middle; }

Paso 4 - Diseño Forma Acabado
Ya hemos terminado hasta el diseño de las fronteras y el diseño básico, ahora podemos empezar a labrar el propio formulario. Vamos a empezar añadiendo la CSS por debajo del cual dará los campos de nombre de usuario y la contraseña de su diseño.
input { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; font-size: 14px; } input[type=text], input[type=password] { margin: 5px; padding: 0 10px; width: 200px; height: 34px; color: #404040; background: white; border: 1px solid; border-color: #c4c4c4 #d1d1d1 #d4d4d4; border-radius: 2px; outline: 5px solid #eff4f7; -moz-outline-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); } input[type=text]:focus, input[type=password]:focus { border-color: #7dc9e2; outline-color: #dceefc; outline-offset: 0; } input[type=submit] { padding: 0 18px; height: 29px; font-size: 12px; font-weight: bold; color: #527881; text-shadow: 0 1px #e3f1f1; background: #cde5ef; border: 1px solid; border-color: #b4ccce #b3c0c8 #9eb9c2; border-radius: 16px; outline: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef); background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef); background-image: -o-linear-gradient(top, #edf5f8, #cde5ef); background-image: linear-gradient(to bottom, #edf5f8, #cde5ef); -webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15); }

Ahora que hemos añadido estilo a los campos, lo que se quiere añadir estilo botón para enviar. La sintaxis de color en el CSS a veces puede ser un poco confuso al principio. Si usted es un principiante con CSS se puede usar un generador de colores CSS se encuentran aquí.
input[type=submit]:active { background: #cde5ef; border-color: #9eb9c2 #b3c0c8 #b4ccce; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); }

Antes de que estamos completamente terminado con la fase de diseño de la forma, tendremos que añadir estilo a la casilla de la aplicación web para recordar la información de inicio de sesión del usuario. Puede completar esto añadiendo el código de abajo. Recomiendo añadir justo debajo de los elementos de la carrocería en el archivo CSS.
input[type=checkbox], input[type=radio] { border: 1px solid #c0c0c0; margin: 0 0.1em 0 0; padding: 0; font-size: 16px; line-height: 1em; width: 1.25em; height: 1.25em; background: #fff; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#fbfbfb)); -webkit-appearance: none; -webkit-box-shadow: 1px 1px 1px #fff; -webkit-border-radius: 0.25em; vertical-align: text-top; display: inline-block; } input[type=radio] { -webkit-border-radius: 2em; /* Make radios round */ } input[type=checkbox]:checked::after { content:"✔"; display:block; text-align: center; font-size: 16px; height: 16px; line-height: 18px; } input[type=radio]:checked::after { content:"●"; display:block; height: 16px; line-height: 15px; font-size: 20px; text-align: center; }

Paso 5 - El estilo del fondo
Hemos completado el diseño general de la forma de inicio de sesión y ahora podemos acabar con él mediante la adición de un color para el fondo. Como he mencionado antes, la fase de diseño de la creación es todo preferencia personal y se puede personalizar a sus necesidades, sobre todo el fondo. Personalmente, puedo añadir mi estilo de la carrocería de la parte superior de mi archivo CSS de fácil acceso.
body { font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; color: #404040; background: #353526; }

Los colores lo pueden podificar a su gusto, cualquier duda o consulta solo dejen un comentario.
y el resultado quedaria asi: