[MegaTutorial]Formulario de contacto con CSS3 y HTML5
Hola amigos de Taringa, hoy creo este tutoriales para ustedes se trata de crear un formulario de contacto a partir de un psd que crearemos en photoshop, y utilizaremos como referencia
Nota: Clic en las imágenes para verlas de tamaño completo.
Primero crearemos nuestro concepto de como sera en photoshop.
1.-Creamos un nuevo documento del tamaño que quieran y a esa capa le dan un degradado lineal de lso colores #27323f y #6c87a1.
2.-Una vez echo eso crean una neuva capa y en esa capa crean un rectangulo con las medidas de 492 x 574 pixeles, y le dan un degradado lineal de los colores #c9d0de en ubicacion 0%, #c9d0de ubicacion 50% y el ultimo #c9d0de en bicacion 100%.
3.-Le damos una sombra paralela con las opciones que observan en la imagen y un trazo .
4.-Creamos un nuevo texto con las palabras "Formulario de contacto" con las opciones que ven en la imagen.
5.-Le damos unas opciones de fucion al texto para que mejore.
6.-Creamos un nuevo texto con las mismas opciones de fucion que el anterior solo que este cambia al tamaño y el estilo de la fuente como se ve en la imagen.
7.-Haora crearemos los campos donde ingresaremos los datos, con nuetsra herramienta de rectangulo redondeado con radio de 5px, creamos un retangulo mas o menos como ven en la imagen y lo rellenan del color #5e768d y le dan unas opciones de fucion las que ven en las imagenes.
8.-Lo hacen otars dos vese pero haora le cambian el nombre a los campos a "EMAIL" y "COMENTARIOS" la de comentarios la hacen mas larga como ven en la imagen.
9.-Haora con la misma herramienta de rectangulo redondeado con radio de 4px, creamos otro mas o menos del tamaño que ven en la imegn y precionan Ctrl + ENTER para selecionarlo
10.-Lo rellenan de cualquier color y le dan la siguientes opciones de fucion, el degradado es #435f7b en 0%, #587490 en 50% y #6b87a3 en 100%.
11.-Creamos el texto que llevara el boton "Enviar comentario" y le damos las siguientes opciones de fuente y de fucion.
Y listo ya tenemos cerado nuestro concepto en cual nos vasaremos apara crearlo en html5 y css3, recuerden que usaremos las mismas medidas que las que usamos en el photoshop y los mismos degradados.
Creado el formulario en HTML5 & CSS3
Cada proyecto web se inicia con la estructura HTML. Aquí vamos a utilizar algunas de las características de HTML5 de fantasía para darle vida a la de diseño.Diseñar una estructura de documento básico con Dreamweaver y con una hoja de estilos CSS.
Creamos un DIV donde se encontrara el formulario, esto ya deben saberlo puesto que lo creamos en el tutorial "Crear una web desde 0"
Cada elemento
debe tener un atributolabel
que se relaciona con un ID de cadafor
de campo - lo que incrementa la accesibilidad de la forma y permite que el usuario haga clic en la etiqueta para activar el campo correcto.input
Una de las características de HTML5 nuevas que estamos haciendo uso del atributo
placeholder
Simplemente introduzca su mensaje deseado y que aparecerá en cada campo, cuando el usuario quite el puntero de ese campo el texto se borra automáticamente. Esta característica sólo está soportado en Safari,Chrome,Firefox,Opera.
La hoja de estilos CSS primero establece el documento de base con un reset para eliminar cualquier valores por defecto del navegador, y luego el body se le da el gradiente de color azul con CSS3.
Actualmente código diferente se requiere para Webkit y Mozilla, pero tenemos a la mano " Gradiente CSS3 Generator " un sitio web que ayuda mucho y ahorra tiempo.
El div que contiene se le da dimensiones y centrado hasta el uso de margin: 0 auto; , entonces la sombra y el trazo de Photoshop se replica el uso de box-shadow y un border .
Básica estilo de fuente CSS coincide el texto con el concepto, el CSS3 text-shadow propiedad reproduce el efecto de texto insertado mediante la adición de un punto culminante 1px en el borde inferior.
Continuando con la label elementos se les da un estilo similar a la h1 , el input elementos de estilo con las dimensiones y el relleno para que coincida con el concepto de Photoshop. CSS3 gradientes entran en juego una vez más para recrear el efecto de sombra interior, simplemente ajustando la posición de la pendiente maneja puede crear la impresión de sombra sutil.
Los marcadores de posición HTML5 también pueden utilizarse con CSS específicos del fabricante, tanto para Webkit y Mozilla. Los colores de estos marcadores de posición son el color elegido a partir del concepto PSD.
La CSS utilizada en los elementos de entrada se pueden copiar directamente en el textarea , la única diferencia de las dimensiones de altura más grande.
Para dar al usuario información visual cuando los elementos de entrada se activa, el :focus pseudo selector se puede utilizar para dar a los diferentes estilos a los campos. Aquí el CSS3 gradientes se ajustan a través de unos colores azules.
El botón de enviar en la actualidad será de estilo CSS con el genérico que se utiliza en los campos de entrada, por lo que el objetivo de este campo en particular el [type = submit] avanzado selector se utiliza para unir el estilo único de este elemento en particular.
Tal estilo incluye una anchura y altura diferentes, un fondo degradado nuevo, una sutil caja de la sombra y el borde 1px delgada. cursor: pointer; se añade a continuación que hacer clic parece un botón, mostrando el estilo del "puntero" del cursor cuando el elemento se cernía.
Bueno eso es todo,obio que ustedes lo pueden mejorar y agregar el código php, para que sea un formulario completo. Pueden ver la demo dando clic en ver demo.
