Scour Design. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...

\n"; } } } lecturas();

          


Mejorar la apariencia de los formularios con CSS

      

Autor: El Gurú Programador

Por lo general los formularios son bastante vulgares y lo peor aun muchas veces no encajan con el diseño que tiene nuestro sitio, entoces para mejorar el aspecto de estos por que no usar hojas de estilo (CSS), en este articulo veremos como hacerlo.

Un formulario por lo general se ve asi...

Formulario clasico

El diseño que el navegador le da a los controles es el mismo que el del sistema operativo, en el caso del grafico de arriba es Windows, el problema surge cuando tenemos una web con un diseño muy cuidado y nos toca agregar formularios los cuales no concuerdan para nada con el diseño del sitio, para ello lo mejor que podemos hacer es utilizar CSS.

LA CSS

<style type="text/css">
<!--
input { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #6699CC; border: #000099; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
select { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #6699CC; border: #000099; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>

Este bloque de codigo va entre las etiquetas <HEAD> Y </HEAD> de la pagina que contrendra el formulario, fijense que "input" viene seguido por todo en codigo encerrado entre llaves, bueno, ese es el codigo es el que le va dando el formato a los cuadros de texto y a los botones, todo el codigo que pertenece a "select" le da el formato a la lista desplegable (Pais).

ASPECTO FINAL

Formulario decorado con CSS

Si se fijan bien es muy facil modificar manualmente los valores, por ejemplo donde dice "background-color: #6699CC;" pueden modificar el valor hexadecimal #6699CC por #000099 y les quedaria el fondo de los controles color azul.

Es cuestion de ir investigando de que se trata cada propiedad, igual todos los editores webs traen incorporado algun editor de CSS asi que tampoco se rompan la cabeza. Saludos.

Scour Design ™ Todos los Derechos Reservados © Carlos Carmona Xhtml 1.1 Strict Válido!CSS Nivel 2 Válido! Nivel Triple-A de Conformidad con las Directrices de Accesibilidad Web (WAI)