DineroPTC
¿Todavía no te has registrado?

Entra a DineroPTC y aprende a ganar dinero en Internet viendo publicidad, leyendo emails, completando registros, rellenando encuestas, viendo vídeos, jugando, etc.

Si tienes cualquier duda, no dudes en preguntarla a la Comunidad! Wink

Además, puedes encontrar nuevas noticias cada día en nuestro blog DestinoPTC: http://destinoptc.com/
Chat 2.0
¿Quién está en línea?
En total hay 24 usuarios en línea: 1 Registrado, 0 Ocultos y 23 Invitados :: 2 Motores de búsqueda

Juegosporforo

[ Ver toda la lista ]


La mayor cantidad de usuarios en línea fue 186 el Jue 22 Dic 2011, 03:30.
DineroPTC Social




Crea tu propio formulario de logueo

Ver el tema anterior Ver el tema siguiente Ir abajo

Crea tu propio formulario de logueo

Mensaje por GubDesings el Mar 20 Dic 2011, 16:10

Hola a todos y bienvenidos a este mi primer tutorial de diseño web!!

Introdución
Reciente mente me pidieron que realizara un blog sencillo en php, con caracteristicas y funciones específicas. Una de las caracteristicas, era evitar el uso de imagenes, y entonces no pude recurrir a Photoshop y tuve que implementar otras tecnología, el maravilloso CSS3. Yo tenía conocimiento de el pero no era bastante como el que poseo ahora, la unica desventaja que tiene el CSS3 es que los navegadors viejos no lo soportan y los diseños no se ven tan bien, pero bueno esa es otra historia. Al final realize el blog, le entrege el trabajo al cliente y quedo encantado. Hoy vengo a compartir con usted una nueva tecnología el CSS3, para que no necesiten estar recurriendo a imagenes y demas. Bueno, dejemos la introducción y vamos a TRABAJAR!!.

RECUERDA: Se debe de tener algún conocimiento en Html y Css para entender el tutorial.


Html
Primero va el codigo y luego lo explico:
Código:
<!DOCTYPE HTML>
 <html>
  <head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

  <title>Accede a tu cuenta</title>

  <link href="style/layout.css" rel="stylesheet" type="text/css">
 
  </head>
  <body>

    <form class="content" method="post">
      <h1>Accede</h1>
         
    <fieldset id="inputs">
        <input class="usr" type="text" name="fU" placeholder="Usuario">
        <input class="pass" type="password" name="fP" placeholder="Contraseña">
    </fieldset>
   
    <fieldset id="actions">
        <input type="submit" class="submit" name="fS" value="Acceder">
        <a href="recover.php">Olvidó su contraseña?</a>
    </fieldset>
   
  </body>
 </html>

Es igual que cualquier documento Html. Al principio se declara que es un documento Html ().

En el he incluido una meta: , esta meta declara el tipo de codificación Html que estamos usando (charset=iso-8859-1"). Lo que hace es que incluye la hoja de estilo, el documento css.

En el body, incluimos los datos normales formulario y todo. Lo unico que puedo decir de aquí es que he incluido un nuevo elemento (placeholder) que es del Html5 y no funciona en todos los navegadores, solo en los mas modernos. Lo que hace placeholder es que imprime un valor en el input pero en realidad no esta ahí, porque al tu darle click encima del input o escribir algún texto, el valor del placeholder desaparece. Es como una ayuda para indicarle al visitante que datos debe ingresar en ese input del formulario.

Css3
Bueno ahora le indicare los nuevos elementos del css3 que estan incluidos en el formulario:


En css3 se pueden realizar sombras como las que se hacen en photoshop, el elemento que realiza esta función se llama Box-shadow.

Código:
.content{
    box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,
          0 7px 0 rgba(0, 0, 0, .2);
}

Nota: Es mejor escribir la class en ingles ya que es un idioma global, pero si prefieres la puedes escribir en español (ejemplo ".content" < - > ".contenido").


Con los elementos pseudo ( : ) de css3 se pueden añadir mas contenido en una class. Por ejemplo, antes se hací con dos etiquetas:

Código:
<style>
  a { estilo #1 }
  a span { estilo #2 }
</style>

<a href=""><span>Ejemplo</span></a>

Pero ahora gracias al css3 lo que se hace es que se le elimina la etiqueta del Html y el código queda mas límpio.

Código:
<style>
  a { estilo #1 }
  a:before{ estilo #2 }
</style>

<a href="">Ejemplo</a>

Código:
.content{
    position: absolute;
    z-index: 0;
}

  .content:before{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
      -moz-box-shadow: 0 0 0 1px #fff;
      -webkit-box-shadow: 0 0 0 1px #fff;
      box-shadow: 0 0 0 1px #fff;
  }


El titulo al igual que el contenido esta hecho a base de magnificos degradados, y tambien por elementos pseudo.

Código:
  h1{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
  }

  h1:after, h1:before{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px; 
  }

  h1:after{
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);     
    right: 0;
  }

  h1:before{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
  }

Css completo

Código:

/**
 * Tipografia
 **/

  h1{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
  }

  h1:after, h1:before{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px; 
  }

  h1:after{
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);     
    right: 0;
  }

  h1:before{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
  }

  h2{
   font-size: 20px;
  }

  h3{
   font-size: 16px;
  }

  h4{
   font-size: 14px;
  }

  a{
   color: #3151A2;
   text-decoration: none;
  }
 
  a:visited{
   text-decoration: none;
   color: #3151A2;
  }
 
  a:hover{
   text-decoration: none;
   color: #2e488c;
  }
 
  a:active{
   text-decoration: none;
   color: #2e488c;
  }
 
/**
 * General
 **/
 
  html, body{
    height: 100%;
  }

  body{
    font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;   
    margin: 0;
    background-color: #d9dee2;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));
    background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: linear-gradient(top, #ebeef2, #d9dee2);   
  }

/**
 * Contenido
 **/
 
  .content{
    width: 400px;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 0;
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee); 
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff, 
          0 7px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2), 
          1px 1px  0 rgba(0,  0,  0,  .1),
          3px 3px  0 rgba(255, 255, 255, 1),
          4px 4px  0 rgba(0,  0,  0,  .1),
          6px 6px  0 rgba(255, 255, 255, 1), 
          7px 7px  0 rgba(0,  0,  0,  .1);
    box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2), 
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff, 
          0 7px 0 rgba(0, 0, 0, .2);

  }
 
  .content:before{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
  }

  .usr{
    background: #f1f1f1 url("../images/icons.png") no-repeat;
    background-position: 5px -2px !important;
  }

  .pass{
    background: #f1f1f1 url("../images/icons.png") no-repeat;
    background-position: 5px -52px !important;
  }
 
  #actions{
    margin: 25px 0 0 0;
  }

  fieldset{
    border: 0;
    padding: 0;
    margin: 0;
  }

  #inputs input{
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 353px;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  }

  #inputs input:focus{
    background-color: #fff;
    border-color: #e8c291;
    outline: none;
    -moz-box-shadow: 0 0 0 1px #e8c291 inset;
    -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
    box-shadow: 0 0 0 1px #e8c291 inset;
  }

  .submit{      
    background-color: #ffb94b;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
    background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: linear-gradient(top, #fddb6f, #ffb94b);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   
    border-width: 1px;
    border-style: solid;
    border-color: #d69e31 #e3a037 #d5982d #e3a037;
    float: left;
    height: 35px;
    padding: 25;
    cursor: pointer;
    font: bold 15px Arial, Helvetica;
    color: #8f5a0a;
  }

  .submit:hover, .submit:focus{      
    background-color: #fddb6f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
    background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: linear-gradient(top, #ffb94b, #fddb6f);
  }   

  .submit:active{      
    outline: none;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;      
  }

  .submit::-moz-focus-inner{
    border: none;
  }

  #actions a{
    float: right;
    line-height: 35px;
    margin-left: 10px;
  } 

Resultado final


Conclución
Bueno, esto fue todo, espero que les haya gustado y nos veremos pronto. Les aviso que en algunos navegadores viejos o en internet explorer no se veran los degradados, pero tiene un aspecto elegante.
Saludos.

NOTA: Como no se pueden poner enlances de descarga en foroactivo.com pues si quieres el formulario completo, puedes pedirmelo por mp y te envio el enlance de descarga. También he subido el demo en un hosting gratuito, haci que no se cuanto dure alli, pero mientras tanto, puedes descargar y ver los archivos de fuentes.

DEMO Twisted Evil


Última edición por GubDesings el Mar 20 Dic 2011, 19:53, editado 1 vez

GubDesings
Novato
Novato

Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 26
Localización : Puerto Rico

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por kakaruelo el Mar 20 Dic 2011, 16:25

Hola Bro!
Excelente tutorial muy completo Very Happy
Te envio MP
Sld!!

kakaruelo
Maestro
Maestro

Cantidad de envíos : 2325
Fecha de inscripción : 05/11/2010
Edad : 20
Localización : Desuka

http://animeymas.com

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por GubDesings el Mar 20 Dic 2011, 16:32

kakaruelo escribió:Hola Bro!
Excelente tutorial muy completo Very Happy
Te envio MP
Sld!!

Gracias por comentar
Te enviare el mp con el enlance de descarga

GubDesings
Novato
Novato

Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 26
Localización : Puerto Rico

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por Marbetvil el Mar 20 Dic 2011, 17:31

Excelente tutorial Gub Desings!!
Te felicito y muchas gracias por compartirlo
S
lds

Marbetvil
Super Adicto

Cantidad de envíos : 29723
Fecha de inscripción : 12/08/2010
Localización : Detras de los Spamer y Estafadores

http://www.ptcguay.blogspot.com

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por GubDesings el Mar 20 Dic 2011, 19:26

Marbetvil escribió:Excelente tutorial Gub Desings!!
Te felicito y muchas gracias por compartirlo
S
lds

Denada,
Tengo una pregunta, es que he tenido la curiosidad si yo puedo crear un logo para el foro, si me lo permites.

GubDesings
Novato
Novato

Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 26
Localización : Puerto Rico

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por Marbetvil el Mar 20 Dic 2011, 19:33

GubDesings escribió:
Marbetvil escribió:Excelente tutorial Gub Desings!!
Te felicito y muchas gracias por compartirlo
S
lds

Denada,
Tengo una pregunta, es que he tenido la curiosidad si yo puedo crear un logo para el foro, si me lo permites.
Hola Gub, por supuesto que te lo permito, solo que para ponerlo tendremos que esperar a Sergio el otro administrador ya que el se encarga de estos menesteres, pero en cuanto lo tengas me pondre en contacto con el y lo hara y espero que de tambien su aprobación
Slds

Marbetvil
Super Adicto

Cantidad de envíos : 29723
Fecha de inscripción : 12/08/2010
Localización : Detras de los Spamer y Estafadores

http://www.ptcguay.blogspot.com

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por GubDesings el Mar 20 Dic 2011, 19:38

Marbetvil escribió:
GubDesings escribió:
Marbetvil escribió:Excelente tutorial Gub Desings!!
Te felicito y muchas gracias por compartirlo
S
lds

Denada,
Tengo una pregunta, es que he tenido la curiosidad si yo puedo crear un logo para el foro, si me lo permites.
Hola Gub, por supuesto que te lo permito, solo que para ponerlo tendremos que esperar a Sergio el otro administrador ya que el se encarga de estos menesteres, pero en cuanto lo tengas me pondre en contacto con el y lo hara y espero que de tambien su aprobación
Slds

Ok pues pronto lo hare
Saludos.

GubDesings
Novato
Novato

Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 26
Localización : Puerto Rico

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por isidro2112 el Mar 20 Dic 2011, 19:41

Excelente, me gusta trabajar con CSS, y veo que es un buen trabajo

isidro2112
Colaborador
Colaborador

Cantidad de envíos : 209
Fecha de inscripción : 18/11/2011

http://pagoporreferidos.tk

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por GubDesings el Mar 20 Dic 2011, 19:44

isidro2112 escribió:Excelente, me gusta trabajar con CSS, y veo que es un buen trabajo

Muchas gracias,
Saludos.

GubDesings
Novato
Novato

Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 26
Localización : Puerto Rico

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por xilancula el Mar 20 Dic 2011, 20:18

exelente bien explicado
yo estoy haciendo algo un poco mas simple
un formulario contacto

xilancula
Colaborador
Colaborador

Cantidad de envíos : 104
Fecha de inscripción : 23/11/2011

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por GubDesings el Mar 20 Dic 2011, 20:28

xilancula escribió:exelente bien explicado
yo estoy haciendo algo un poco mas simple
un formulario contacto

Gracias por tu respuesta
Saludos Smile

GubDesings
Novato
Novato

Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 26
Localización : Puerto Rico

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por 5ice5 el Mar 03 Ene 2012, 09:17

Excelente diseño! Me lo llevo aver que tal va ;]

5ice5
Novato
Novato

Cantidad de envíos : 11
Fecha de inscripción : 31/12/2011

http://www.shitup.net/

Volver arriba Ir abajo

Re: Crea tu propio formulario de logueo

Mensaje por Contenido patrocinado Hoy a las 16:39


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.