Chat 2.0
Últimos temas
¿Quién está en línea?
En total hay 172 usuarios en línea: 0 Registrados, 0 Ocultos y 172 Invitados Ninguno
El record de usuarios en línea fue de 322 durante el Mar 05 Dic 2023, 20:24
Mejores posteadores
Marbetvil | ||||
printecnic | ||||
condor | ||||
mjose1958 | ||||
rionmlg | ||||
enlomass | ||||
protos123 | ||||
eduar22nog | ||||
Llanero_S | ||||
sergio894 |
DineroPTC Social
Crea tu propio formulario de logueo
+2
kakaruelo
GubDesings
6 participantes
Página 1 de 1.
Crea tu propio formulario de logueo
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:
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.
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:
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.
El titulo al igual que el contenido esta hecho a base de magnificos degradados, y tambien por elementos pseudo.
Css completo
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.
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
Última edición por GubDesings el Mar 20 Dic 2011, 19:53, editado 1 vez
GubDesings- Novato
- Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 33
Localización : Puerto Rico
Re: Crea tu propio formulario de logueo
kakaruelo escribió:Hola Bro!
Excelente tutorial muy completo
Te envio MP
Sld!!
Gracias por comentar
Te enviare el mp con el enlance de descarga
GubDesings- Novato
- Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 33
Localización : Puerto Rico
Re: Crea tu propio formulario de logueo
Excelente tutorial Gub Desings!!
Te felicito y muchas gracias por compartirlo
Slds
Te felicito y muchas gracias por compartirlo
Slds
Marbetvil- Super Adicto
- Cantidad de envíos : 29725
Fecha de inscripción : 12/08/2010
Re: Crea tu propio formulario de logueo
Marbetvil escribió:Excelente tutorial Gub Desings!!
Te felicito y muchas gracias por compartirlo
Slds
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
- Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 33
Localización : Puerto Rico
Re: Crea tu propio formulario de logueo
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ónGubDesings escribió:Marbetvil escribió:Excelente tutorial Gub Desings!!
Te felicito y muchas gracias por compartirlo
Slds
Denada,
Tengo una pregunta, es que he tenido la curiosidad si yo puedo crear un logo para el foro, si me lo permites.
Slds
Marbetvil- Super Adicto
- Cantidad de envíos : 29725
Fecha de inscripción : 12/08/2010
Re: Crea tu propio formulario de logueo
Marbetvil escribió: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ónGubDesings escribió:Marbetvil escribió:Excelente tutorial Gub Desings!!
Te felicito y muchas gracias por compartirlo
Slds
Denada,
Tengo una pregunta, es que he tenido la curiosidad si yo puedo crear un logo para el foro, si me lo permites.
Slds
Ok pues pronto lo hare
Saludos.
GubDesings- Novato
- Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 33
Localización : Puerto Rico
Re: Crea tu propio formulario de logueo
Excelente, me gusta trabajar con CSS, y veo que es un buen trabajo
Re: Crea tu propio formulario de logueo
isidro2112 escribió:Excelente, me gusta trabajar con CSS, y veo que es un buen trabajo
Muchas gracias,
Saludos.
GubDesings- Novato
- Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 33
Localización : Puerto Rico
Re: Crea tu propio formulario de logueo
exelente bien explicado
yo estoy haciendo algo un poco mas simple
un formulario contacto
yo estoy haciendo algo un poco mas simple
un formulario contacto
xilancula- Colaborador
- Cantidad de envíos : 104
Fecha de inscripción : 23/11/2011
Re: Crea tu propio formulario de logueo
xilancula escribió:exelente bien explicado
yo estoy haciendo algo un poco mas simple
un formulario contacto
Gracias por tu respuesta
Saludos
GubDesings- Novato
- Cantidad de envíos : 43
Fecha de inscripción : 23/11/2011
Edad : 33
Localización : Puerto Rico
Temas similares
» 1001JuegosMoviles crea juegos android y gana dinero con admob
» Tablón propio en Anuntiomatic?
» Mi Pagina Web - Dominio Propio :)
» crovoli - 100% clix propio - min pago 4$ - pz, eg, pm
» Cadena Clixsense, con comprobante propio!
» Tablón propio en Anuntiomatic?
» Mi Pagina Web - Dominio Propio :)
» crovoli - 100% clix propio - min pago 4$ - pz, eg, pm
» Cadena Clixsense, con comprobante propio!
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
Ayer a las 12:52 por jhevia
» 35º Pago de MarketAgent - 10.00 Euros
Jue 21 Mar 2024, 12:53 por jhevia
» 33º Pago de MarketAgent - 10.00 Euros
Vie 12 Ene 2024, 17:45 por jhevia
» Ideas para ganar dinero como afiliado en Internet
Mar 12 Dic 2023, 01:48 por esejoker468
» 114º Pago de Beruby de 12.35 Euros
Miér 06 Dic 2023, 13:46 por jhevia
» 32º Pago de MarketAgent - 10.00 Euros
Mar 21 Nov 2023, 13:16 por jhevia
» 31º Pago de MarketAgent - 10.00 Euros
Jue 07 Sep 2023, 14:01 por jhevia
» 112º Pago de Beruby de 7.58 Euros
Miér 02 Ago 2023, 16:23 por jhevia
» Gana entre $1 y 14$ USDT
Miér 02 Ago 2023, 15:26 por kronoss