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/

Unirse al foro, es rápido y fácil

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/
DineroPTC
¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.
Chat 2.0
Últimos temas
» 115º Pago de Beruby de 17.86 Euros
Crea tu propio formulario de logueo EmptyAyer a las 12:52 por jhevia

» 35º Pago de MarketAgent - 10.00 Euros
Crea tu propio formulario de logueo EmptyJue 21 Mar 2024, 12:53 por jhevia

» 33º Pago de MarketAgent - 10.00 Euros
Crea tu propio formulario de logueo EmptyVie 12 Ene 2024, 17:45 por jhevia

» Ideas para ganar dinero como afiliado en Internet
Crea tu propio formulario de logueo EmptyMar 12 Dic 2023, 01:48 por esejoker468

» 114º Pago de Beruby de 12.35 Euros
Crea tu propio formulario de logueo EmptyMiér 06 Dic 2023, 13:46 por jhevia

» 32º Pago de MarketAgent - 10.00 Euros
Crea tu propio formulario de logueo EmptyMar 21 Nov 2023, 13:16 por jhevia

» 31º Pago de MarketAgent - 10.00 Euros
Crea tu propio formulario de logueo EmptyJue 07 Sep 2023, 14:01 por jhevia

» 112º Pago de Beruby de 7.58 Euros
Crea tu propio formulario de logueo EmptyMiér 02 Ago 2023, 16:23 por jhevia

» Gana entre $1 y 14$ USDT
Crea tu propio formulario de logueo EmptyMiér 02 Ago 2023, 15:26 por kronoss

¿Quién está en línea?
En total hay 172 usuarios en línea: 0 Registrados, 0 Ocultos y 172 Invitados

Ninguno

[ Ver toda la lista ]


El record de usuarios en línea fue de 322 durante el Mar 05 Dic 2023, 20:24
DineroPTC Social

Crea tu propio formulario de logueo

+2
kakaruelo
GubDesings
6 participantes

Ir abajo

Crea tu propio formulario de logueo Empty Crea tu propio formulario de logueo

Mensaje por GubDesings 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.

Crea tu propio formulario de logueo Prev

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:

Crea tu propio formulario de logueo Sombra

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").

Crea tu propio formulario de logueo Papel

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;
  }

Crea tu propio formulario de logueo H1

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

Crea tu propio formulario de logueo 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
GubDesings
Novato
Novato

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

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por kakaruelo Mar 20 Dic 2011, 16:25

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

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

http://animeymas.com

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por GubDesings 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
GubDesings
Novato
Novato

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

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por Marbetvil Mar 20 Dic 2011, 17:31

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

Cantidad de envíos : 29725
Fecha de inscripción : 12/08/2010

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por GubDesings 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
GubDesings
Novato
Novato

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

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por Marbetvil 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
Marbetvil
Super Adicto

Cantidad de envíos : 29725
Fecha de inscripción : 12/08/2010

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por GubDesings 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
GubDesings
Novato
Novato

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

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por isidro2112 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

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por GubDesings 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
GubDesings
Novato
Novato

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

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por xilancula Mar 20 Dic 2011, 20:18

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

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

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por GubDesings 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
GubDesings
Novato
Novato

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

Volver arriba Ir abajo

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por 5ice5 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

Crea tu propio formulario de logueo Empty Re: Crea tu propio formulario de logueo

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Volver arriba

- Temas similares

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