Formulario de Login con CSS3


Formulario de Login con CSS3

Online | free | Publicación:2013 |


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 lo desees 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[/url].</p>[/color]

</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 ???http://www.quackit.com/css/css_color_codes.cfm???
____________________________________________________________________________________________
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 modificar a su gusto, cualquier duda o consulta solo dejen un comentario.

El Resultado quedara asi 

?????



No Olviden comentar y puntuar si este codigo se lo merece.











Formulario de Login con CSS3
30 Puntos Score: 10/10
Visitas: 3129 Favoritos: 14
Ver los usuarios que votaron...
4 Comentarios Formulario de Login con CSS3
gracias lo intentare  
Si el codigo lo escribiste vos : genial  , si copiaste y pegaste gracias  
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!