Empecemos por el botón de envío. El estado CSS actual debería ser el siguiente:
input[type="submit"] { background-color: #3399FF; color: #fff; cursor: pointer; font: bold 1em/1.2 Georgia, "Times New Roman ", serif; border: 1px solid #000; padding: 5px 10px; width: auto; }Esta sintaxis conduce al siguiente resultado:
Este es un botón normal. No tiene un diseño especialmente atractivo, pero cumple su función. Sin embargo, habría que animarlo un poco. El resultado final será el siguiente:
También hay un efecto hover. Esto significa que el botón cambiará de color cuando el puntero del ratón se desplace sobre él.
Si observas el botón más de cerca, te darás cuenta de las esquinas redondeadas. Ésta es sin duda una de las innovaciones CSS que los diseñadores web llevaban mucho tiempo esperando. Porque "antes" no existía esta opción. (Con la excepción de los elementos de botón, por supuesto, donde se podía trabajar con imágenes).
Ahora las esquinas redondeadas pueden aplicarse no sólo a los elementos normales de la página, sino también a los botones.
El borrador de trabajo de CSS3 contiene la propiedad border-radius para este fin. Los navegadores Mozilla y WebKit ofrecen grafías alternativas para el soporte experimental de esta propiedad.-moz-border-radius-webkit-border-radius
Sin embargo, todos los navegadores modernos admiten ahora esquinas redondeadas.
Basándonos en este conocimiento, una definición de border-radius podría tener ahora este aspecto:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Sin embargo, hay algo más que se destaca en una inspección más cercana. En realidad, al botón también se le ha asignado un gradiente de color.
Por fin se puede hacer algo así con las herramientas CSS. Para ello se utilizan las distintas propiedades de degradado. Éstas se asignan a la propiedad background como valor. Por cierto, ahora hay numerosas herramientas que se pueden utilizar para generar gradientes de color.
Encontrará una de ellas, por ejemplo, en la página http://www.css3factory.com/linear-gradients/. En la siguiente sintaxis se ha definido un degradado de color y las conocidas esquinas redondeadas.
En el ejemplo actual, la sintaxis para el botón es la siguiente:
input[type="submit"] { border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); background: -webkit-linear-gradient(top, #3e779d, #65a9d7); background: -moz-linear-gradient(top, #3e779d, #65a9d7); background: -ms-linear-gradient(top, #3e779d, #65a9d7); background: -o-linear-gradient(top, #3e779d, #65a9d7); background: -linear-gradient(top, #3e779d, #65a9d7); padding: 10px 20px; -webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: blanco; font-size: 21px; font-family: 'Lucida Grande', Helvetica, Arial, Serif; text-decoration: none; vertical-align: middle; width: auto; }
Ya he indicado que los botones deben reaccionar cuando el puntero del ratón se desplaza sobre ellos. Para ello se utiliza el conocido :hover.
#submit:hover { border-top-color: #28597a; background: #28597a; color: #ccc; }El botón reaccionará a otro evento. Para ello se utiliza la pseudoclase :active. Esto se puede utilizar para reaccionar cuando se hace clic en el botón.
#submit:active { border-top-color: #1b435e; background: #1b435e; }
En el ejemplo actual, el color del borde superior y el color de fondo del botón cambian cuando se hace clic en el botón.
Esquinas redondeadas para los campos
Por supuesto, las llamadas esquinas redondeadas no sólo pueden aplicarse al botón, sino también a los campos de entrada. El resultado podría ser el siguiente:
Y aquí está la sintaxis correspondiente:
input[type="text"], input[type="email"], textarea { border: 1px solid #bebebe; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
Ya conoce las propiedades necesarias para definir esas esquinas redondeadas.
Validación de formularios con CSS3
Por el momento, los visitantes pueden introducir lo que quieran en los campos de entrada. Los valores introducidos no se comprueban. Esto está a punto de cambiar. Los campos se comprueban según los siguientes criterios:
- El campo nombre debe estar rellenado.
- El campo de correo electrónico debe contener una dirección de correo electrónico sintácticamente correcta.
- El campo de entrada multilínea también debe estar cumplimentado.
El formulario sólo puede enviarse si se cumplen estos criterios.
Para marcar un campo como obligatorio, asígnele el atributo required. Un campo marcado con este atributo debe rellenarse obligatoriamente, es decir, no debe estar vacío.
Una aplicación correspondiente tendría el siguiente aspecto
<form> <input type="text" name="name" id="name" value="" required/> </form>
Aquí, el navegador comprobaría si el campo ha sido rellenado. Si el campo está vacío y se sigue intentando enviar el formulario, el navegador debería mostrar un mensaje de error.
Por cierto, las cosas van un poco más allá con los campos de correo electrónico. A estos se les asigna type="email" y el atributo required. Ahora no sólo debe introducirse un valor, sino una dirección de correo electrónico correcta en el campo, de lo contrario también aparecerá un mensaje de error cuando se envíe el formulario.
El formulario ahora podría tener este aspecto:
<ol> <li> <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" value="" required/> </li> <li> <label for="email">Dirección de correo electrónico:</label> <input type="email" name="email" id="email" value="" required/> </li> <li> <label for="comment">Comentario:</label> <textarea cols="32" rows="7" name="content" id="content" required></textarea> </li> <li class="button"> <input type="submit" name="submit" id="submit" value="Submit" /> </li> </ol>.
Especialmente en formularios más extensos, puede haber, por supuesto, campos obligatorios, pero también campos que no deben rellenarse necesariamente. En tales casos, puede marcar los campos obligatorios por separado. Se puede acceder a los campos obligatorios en CSS mediante:required.
:required { color de fondo: #ff0000; }Esta sintaxis da a los campos obligatorios un color de fondo rojo.
Otra variante para llamar la atención sobre los campos obligatorios es la siguiente sintaxis:
input:required:focus { borde: 1px rojo sólido; contorno: ninguno; }
Si se intenta enviar el formulario aquí, el primer campo que no se ha rellenado o que no cumple los requisitos de validación recibe un borde rojo y el foco.
Si un usuario rellena este campo correctamente, pero hay otro campo que no ha sido rellenado, este también será enfocado y se le dará un marco rojo después de la siguiente visita de envío.
