Diseñando un hermoso formulario con CSS3

Gracias a las propiedades avanzadas de CSS, como los gradientes y sombras, ahora es bastante más fácil transformar un formulario común sin gracia en algo realmente hermoso, y con un esfuerzo mínimo. Y hoy te lo vamos a mostrar en este tutorial

La obra de arte ya terminada

Finos gradientes de fondo le dan profundidad a los campos mientras que las sombras los levantan de la página. Incluso es mucho más impresionante saber que esto está hecho sin imágenes, en absoluto.
Siguiendo este tutorial no solo terminarás con un ligero y hermoso formulario, también vas a entender y aprender nuevas técnicas de CSS3, como box-shadow, gradientes, colores opacos y bordes redondeados.

CSS3 ¿Con qué se come?

CSS3 es la próxima generación de CSS que está actualmente bajo desarrollo, pero eso no detiene a los navegadores de ya implementar muchas de las características prominentes.

• Google Chrome (4.0)
• Mozilla Firefox (3.6)
• Safari (4.0)

Opera tiene mejores niveles de soporte para CSS3 (excepto gradientes de fondo) es su versión 10.50 BETA.

Internet Explorer ha declarado que  tendrá soporte para CSS3 en su versión 9; pero en fín, solo es tiempo dirá cúan verdadero es esto.

Las cosas que podés hacer con CSS3 (sombras, gradientes, bordes redondeados, animaciones, etc.) todas tienen el propósito de crear hermosos efectos sin tenes que integrar imágenes o scripts, teniendo como resultado menos tiempo de carga de la página.

Paso 1: El HTML

Antes de comenzar diseñando tenemos que tener algo que diseñar, acá está el formulario.

<form class="form">

	<p class="name">
		<input type="text" name="name" id="name" />
		<label for="name">Name</label>
	</p>

	<p class="email">
		<input type="text" name="email" id="email" />
		<label for="email">E-mail</label>
	</p>

	<p class="web">
		<input type="text" name="web" id="web" />
		<label for="web">Website</label>
	</p>

	<p class="text">
		<textarea name="text"></textarea>
	</p>

	<p class="submit">
		<input type="submit" value="Send" />
	</p>

</form>

Cada campo está dentro de un parrafo con su "class" propia, y los tres primeros campos tienen una etiqueta (label) explicando sus usos.