Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje20-03-2013, 18:17 (UTC)    
Título del mensaje: [EXTRA PAGINAS OCULTAS] Bloque Iniciar Sesión



Hola amigos!
Hoy les quiero compartir este html/css que hice para ustedes. Basicamente esta trabajado a partir del formulario de Inicio de sesión que nos ofrece PWG. Mas directo el Extra Paginas Ocultas que lo pueden activar en Controlar Extras - Agregar Extra y seleccionan Paginas Ocultas. Espero que les guste y lo usen si es que tienen paginas solo para registrados.


Cita:
<div class="_1">
<div class="_2"><div class="_2-cont"></div>
</div><div class="_3"><div class="_h3">
<li><i class="icon-home"></i>INICIAR SESION </li></div><div class="_3-cont">
<form action="P%E1ginas-ocultas.htm" method="POST" style=" font-family: Verdana,Arial,Helvetica,sans-serif; ">
<span id="_n">Nombre de usuario</span>
<input type="text" class="cuadros" name="logindata[name]" value="">
<span id="_n">Contraseña</span>
<input type="PASSWORD" class="cuadros" name="logindata[kennwort]" value="" style="
margin-bottom: 10px;
">
<input type="hidden" name="mode" value="1">
<input type="hidden" name="checklogin" value="1">
<input type="hidden" name="logindata[checklogin]" value="1">
<input type="submit" value="Iniciar Sesión" id="login">
</form>
</div>
</div></div>




Código:
@import url(http://fonts.googleapis.com/css?family=Exo:200,400);

._1 {
width: 270px;
margin: auto /* Centrar Formulario, quitalo si quieres */
}
._2 {
background: url("http://24.media.tumblr.com/fe530a0c39d2dd86b875506b8d4927ee/tumblr_mi9sfdSUDa1qigj88o1_500.jpg");
background-position: 66% 76%;
height: 195px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;


}
._3 {
height: 240px;
width: 270px;
text-align: center;
background: url(http://i.imgur.com/ak9QmfW.jpg);
background-position: 51% 70%;
color: white;
margin: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
._h3 {
font-family: 'Exo', sans-serif;
background: #1B1B1B;
width: 260px;
padding: 10px 10px 10px 0;
margin-bottom: 10px;
}
li {
list-style: none;
}
.icon-home {

}
[class^="icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 2px;
line-height: 14px;
vertical-align: text-top;
background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png");
background-position: 0 -24px;
background-repeat: no-repeat;
}
#_n {
padding: 5px !important;
display: block;
}
.cuadros {
width: 204px;
padding: 5px 10px 5px 10px;
border: 0;
height: 20px;
}
#login {
display: inline-block;
padding: 5px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: whiteSmoke;
background-image: -moz-linear-gradient(top, white, #E6E6E6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));
background-image: -webkit-linear-gradient(top, white, #E6E6E6);
background-image: -o-linear-gradient(top, white, #E6E6E6);
background-image: linear-gradient(to bottom, white, #E6E6E6);
background-repeat: repeat-x;
border: 1px solid #CCC;
border-color: #E6E6E6 #E6E6E6 #BFBFBF;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #B3B3B3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

#login:hover {
color: #333;
text-decoration: none;
background-position: 0 30px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}

#login:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}



Para probarlo iniciar sesión con el nombre de usuario PWG y la contraseña pwg


Ultima edición por ArtAttack-Web el Mie Mar 20, 2013 2:22 pm; editado 1 vez
Mensaje21-03-2013, 18:41 (UTC)    
Título del mensaje: Re: [EXTRA PAGINAS OCULTAS] Bloque Iniciar Sesión

Excelente código!

ArtAttack-Web escribió:
Para probarlo iniciar sesión con el nombre de usuario PWG y la contraseña pwg


Claro que sí campeón.
Mensaje21-03-2013, 22:03 (UTC)    
Título del mensaje: Re: [EXTRA PAGINAS OCULTAS] Bloque Iniciar Sesión

nesbet escribió:
Excelente código!

ArtAttack-Web escribió:
Para probarlo iniciar sesión con el nombre de usuario PWG y la contraseña pwg


Claro que sí campeón.

jajajaja gracias!
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group