Pues ahora puedes personalizarlos de formas sencillas, solo con un poco de conocimiento de CSS. Hay varias maneras de personalizar un formulario, esta vez les enseñaré 2 maneras, con resultados similares. Pero antes de comenzar a personalizar, debemos tener el boceto de lo que será nuestro formulario.

Luego de ya saber cómo será la estructura, empezamos a hacer el html de nuestro formulario.

<form method="post" action="">
	<fieldset>
	<h1>Registro</h1>
	<p>Registrate ahora! es gratis</p>
 
	<label for="nombre" class="nombre">
	Nombre
	<span>Agrega tu nombre</span>
	</label>
	<input type="text" name="nombre" id="nombre" />
 
	<label for="email" class="email">
	E-mail
	<span>Agrega un correo valido</span>
	</label>
	<input type="text" name="email" id="email"/>
 
	<label for="pass" class="pass">
	Password
	<span>5 caracteres como minimo</span>
	</label>
	<input type="password" name="pass" id="pass"/>
 
	<input type="submit" id="registrar" value="Registrarme"/>
	</fieldset>
</form>

Una vez que tenemos listo nuestro formulario, es hora de personalizarlo.

1) Usando solo CSS

fieldset{
        margin:auto; width:475px;
	overflow:hidden; padding:30px;
}
h1{
	margin:10px 0 0 0;
	font-size:4.5em;
}
p{
	margin:0 0 30px 0; padding:0 0 5px 0;
	font-size:10px;
	border-bottom:1px solid #cfe0e9;
}
label{
	float:left; /* Importante, para la alineación */
	width:200px; /* ancho del label */
	font-size:2.8em;
	margin:5px 0 15px;
}
 
input{
	float:left;/* Importante, para la alineación */
	width:245px; height:36px;/* Medidas del Input */
	margin:0 0 15px 0; padding:15px;
	color:#ccc;font-size:2em;
}
span{
	font-size:10px;/* Tamaño más pequeño para las indicaciones */
	display:block; /* hace que salte de linea */
}
/* Personzaliando el botón de registrar */
#registrar{
	float:left;
	padding:0; margin:15px 0 0 140px;
	background:#d0e8f7; color:#418eb6;
	width:185px;height:45px;
}
/* Hover a nuestro Botón 
   No funciona en IE6 (Uno de los peores navegadores) */
#registrar:hover{
	background:#418eb6; color:#d0e8f7;
}
/* Opcional - Bordes Redondeados
   Solo funciona con Firefox / Safari / Google Chrome */
input,#registrar{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
/* Si usan esto ultimo no validara, porque aun no lo han estanderizado
   pero funciona a la perfección - salvo con IE (la oveja negra) */

Es una forma fácil de personalizar, solo aprovechando lo que nos brinda CSS. Esta forma funciona perfectamente con IE6, IE7, Safari, Firefox y Google Chrome.

Demo - Personalizar el formulario usando solo CSS

2) Usando Imágenes / CSS

Ahora veremos como personalizar usando imágenes y CSS. Para este caso lo que hice fue tratar de tener la menor cantidad de imágenes.

Comenzamos con todos los textos, para eso debes juntar todos los textos creados en algun editor de imágenes (aplicando los efectos que desees) a una sola imágen. Después de eso, jugamos un poco con CSS .

Lo que vamos a hacer va a ser algo parecido a lo que ya expiqué en otro tutorial, solo que esta vez jugaremos con las alturas.

Lo más importante en esto es saber usar "background-position".

h1,p,label,span{
	background:url(images/txt-form.png) no-repeat;/* Imagen con todos los textos para h1,p,label,span */
	text-indent:-9999em;/* Hace desaparecer por arte de magia los textos xD! y solo quedaran las imagenes */
}
h1{
	margin:10px 0 3px 0;
	background-position:0 0; /* Posición inicial de la imágen */
	width:200px; height:45px;/* Medidas de nuestro título */
}
p{
	margin:0 0 50px 0;
/* La posición disminuye según la altura donde se ubique la parte que quieres mostrar */
	background-position:0 -50px;
	width:143px;height:9px;
}
label{
	float:left;/* Importante para la alineación */
	width:200px;/* ancho que heredaran todos los label */
	font-size:2em;
	margin:12px 0 15px 0;
}
span{
	display:block; /* hace que salte de linea */
}
.nombre{
/* Como esta parte comenzaba en Y = 59, le quitamos -59px a la posición */
	background-position:0 -59px;
	height:23px; /*Importante poner la altura que queremos mostrar */
}
.nombre span{
	background-position:0 -94px;
	height:10px;
}
.email{
	background-position:0 -104px;
	height:23px;
}
.email span{
	background-position:0 -138px;
	height:10px;
}
.pass{
	background-position:0 -148px;
	height:23px;
}
.pass span{
	background-position:0 -182px;
	height:8px;	
}

Ahora personalizamos los elementos que faltan que ya son más fáciles de entender

input{
	float:left;
	background:url(images/input.png) no-repeat; /* imagen con esquinas redondeadas para todos los input */
	width:245px; height:36px;
	margin:0 0 25px 0; padding:15px;
	color:#ccc; font-size:2em;
}
 
#registrar{
	float:left;
	margin:15px 0 0 140px;padding:0;
	background:url(images/registrar.png) 0 -45px;/* Otra vez usando las posiciones */
	width:185px;height:45px;/* importante definir la altura*/
	color:#418eb6;
}
/* Hover a nuestro Boton 
   No funciona en IE6(para variar..) */
#registrar:hover{
	background-position:0 0;
	color:#d0e8f7;
}

Y así hemos personalizado nuestro formulario usando imágenes y CSS (sobre todo usando background-position).
Esta manera funciona bien en IE7, IE8, Firefox, Safari y Google Chrome. (No se ve bien en IE6)

Demo - Personalizar formulario con imágenes / CSS

Ahora que ya saben usar las 2 maneras, pueden mejorarlo para que funcione para todos los navegadores (incluyendo el maldito IE6) combinando las 2 formas (Usar imágenes solo en las esquinas redondeadas y lo demás puro CSS).

Enlace: Descargar los 2 demos (Incluido el PSD del boceto)

Related posts:

1. Centrar Pagina con CSS
2. Creando un excelente Menu con Photoshop y CSS
3. Sombra con CSS

Pues haz llegado al sitio correcto x). Fuera de bromas, en este tutorial explicaré como poder crear un elegante menú en Photoshop ( la imagen que será el background de nuestro menú). Y lo maquetaremos con CSS, de una forma simple y sobre todo validada, para no tener ningún problema con ningún explorador ( incluido IE6 xD ).

I) Creación del background de nuestro menú en Photoshop

1.- Primero creamos un nuevo documento en Photoshop de 500 x 40 pixeles.

2.- Ahora con la herramienta Rectángulo Redondeado, crearemos un rectángulo del tamaño del documento ( 500 x 40 ) con un radio de 7px. de color #5b4949.

3.- Ahora con la herramienta texto escribiremos las categorías de nuestro menú.

4.- Luego crearemos lo que serán las seperaciones de las secciones del menú. Para eso usaremos la herramienta lápiz con 1px de grosor. Crearemos 2 líneas, una con un color #715555 y la otra con #3e3232. (Debemos elegir colores que hagan contraste con el fondo del menú y también entre las 2 líneas).

5.- Seleccionamos todas las capas, y nos vamos a Capa > Nueva > Grupo. Se abrirá una nueva ventana, donde le pondremos por nombre "Nav"

6.- Ahora duplicaremos el grupo, para eso debemos seleccionar el grupo, luego ir a Capa > Duplicar Grupo y lo llamaremos "Nav Hover"

7.- Ahora en el nuevo grupo que creamos "Nav Hover", cambiaremos el color del fondo de nuestro menú. Para eso le damos doble click a la capa del fondo y le pondremos una superposición de degradado con la siguiente configuración. En esta parte también podemos cambiar el color del texto de las categorías.

8.- Ahora que ya tenemos 2 grupos, una que es la del menú en estado normal y la otra que será para el hover ( cuando pasamos el mouse por el menú). Nos vamos a Imagen > Tamaño de Lienzo y duplicaremos la altura, es decir pondremos 80px.

9.- Ahora debemos posicionar nuestros 2 grupos, de tal manera de que quede uno arriba del otro. Para eso debemos seleccionar todo el documento y seleccionar el grupo "Nav" , seleccionar la herramienta Mover y posicionarlo en la parte superior. Lo mismo para "Nav Hover" solo que a este lo pondremos en la parte inferior.

10.- Solo queda guardar la imagen, que será el "background" de nuestro menú.

II) Maquetación de nuestro Menú

Ahora ya que acabamos con el diseño, procedemos a crear "el esqueleto" de nuestro menú en html.

<div id="nav">
           <ul>
                <li><a href="#" id="ajax">Ajax</a></li>
                <li><a href="#" id="css">CSS</a></li>
                <li><a href="#" id="js">JavaScript</a></li>
                <li><a href="#" id="jQ">jQuery</a></li>
                <li><a href="#" id="php">PHP</a></li>
                <li><a href="#" id="wp">Wordpress</a></li>
            </ul>
</div>

Como verán, le he aplicado un id a cada categoría del menú. Esto es para poder diferenciarlos, a la hora de crear el CSS.

Ahora solo debemos "jugar" un poco con CSS

#nav{
	width:500px;
}
 
#nav ul{
	list-style:none; /* Para quitar todos los estilos de la lista */
	width:500px; /* Definimos el ancho de nuestra lista */
	height:40px; /* Definimos el alto de nuestra lista */
}
#nav ul li{
	float:left; /* Para hacer que el menú sea horizontal */
}
#nav a{
	text-indent:-9999px; /* Posicionamos el texto, de tal manera que no sea visible */
	height:40px;
	background:url(images/menu-css.png) no-repeat; /* la imagen que hicimos en photoshop */
	display:block; /* Hacemos que los links se muestren por bloques
                           y no en línea, es importante :) */
}

Ahora, viene lo interesante , la idea es fácil. Solo debemos asignarle el ancho de cada categoría y posicionar la imagen de fondo. Acá es donde le damos uso a los "id" que le asignamos a cada categoría cuando creamos "el esqueleto" en HTML.

a#ajax{
	background-position:0 0;
	width:68px;
}
a#css{
	background-position:-68px 0;
	width:52px;
}
a#js{
	background-position:-120px 0;
	width:106px;
}
a#jQ{
	background-position:-226px 0;
	width:86px;
}
a#php{
	background-position:-312px 0;
	width:62px;	
}
a#wp{
	background-position:-374px 0;
	width:126px;
}

Ahora de la misma forma, debemos posicionar el background, para el "hover" de nuestro menú. Para este caso ya no es necesareo asignarle el ancho, ya que este valor lo hereda del a#id.

a:hover#ajax{
	background-position:0 -40px;
}
a:hover#css{
	background-position:-68px -40px;
}
a:hover#js{
	background-position:-120px -40px;	
}
a:hover#jQ{
	background-position:-226px -40px;
}
a:hover#php{
	background-position:-312px -40px;
}
a:hover#wp {
	background-position:-374px -40px;
}

Ver Demo del menú
Descargar el menú con Photoshop y CSS ( incluye el PSD)

El menú funciona perfectamente en IE 6, IE 7 , IE 8, Mozilla Firefox, Safari y Google Chrome. (Todos probados por mí). Y sobre todo está validada.

Como verán, no es nada del otro mundo crear un menú con Photoshop y CSS. Si tienes alguna duda, no dudes en comentar. Y si tienes otro método, o alguna parte que se pueda optimizar, bienvenido los comentarios están para eso.

Related posts:

1. 5 Menu Horizontales con CSS
2. Como Crear un Formulario Elegante con CSS e Imágenes
3. Sombra con CSS

La elección de los colores para nuestro sitio web no es nada fácil. A veces puede ser más fácil cuando el diseño es para un negocio o empresa el cual ya tiene establecido un esquema de colores, por lo menos ya tenemos una guía, pero muchos de los proyectos web requieren de realizar un esquema de colores.

Para eso tenemos infinidad de recursos rondando en la red para encontrar una perfecta combinación de colores. Para facilitar estos recursos aca les traigo una recolección que me parecen los más útiles !.

Articulos Interesantes

Aca algunos artículos que me parecen muy interesantes:

• Escoger el correcto color para su sitio web
  
• La elección de colores adecuados para tu sitio web
• La elección de colores para su Sitio Web
• La elección de los colores de su diseño
• Diseño Web: Elegir los adecuados colores para su sitio web
• Aprender a usar colores en tu sitio web
• La elección de la combinación de los colores

Recursos

Hay un monton de recursos online que nos ayudaran a encontran el esquema de colores apropiados. Les mostraré una lista que me parecen más útil para encontrar la paleta adecuada para empezar con nuestro diseño:

Muestras de colores y Combinaciones:

• ColourLovers(Muestra la combinación de colores)
• Esquema de Colores
• Esquema de Colores Diarios
• Combinaciones de Color
• Colr Extrae el color de imagenes, webs
• Combinaciones más usadas en el diseño web

Herramientas para desarrollar una paleta de colores

• Color Picker Nos da el color de fondo, texto, enlace.
• ColorSchemer Muestra colores que combinan con el color elegido
• ColorJack
• EasyRgb Muestra 12 colores complementarios
• ColorBlender
• ColorSchemedesigner Colores mono,complementarios,analógicos y más
• ColorMixers Obten la vista previa de la combinacion fondo / texto

Herramienta para Obtener Colores de una imagen

• Degraeve Insertas el url y te muestra los colores
• Generador de Color Sube tu imagen y obten los colores
• ColorHunter Sube tu imagen y obtienes los colores que predominan.

Otras herramientas

• Me gustan tus colores Obten los colores de una web
• 100 Colores aleatorios

Related posts:

1. Color Picker, que gran imaginacion
2. 1000 fondos (patterns) Para tu Web
3. Analiza tu web en Lipperhey