El estilo de formulario CSS3 puro se está volviendo más popular. Tiene sus inconvenientes, pero el mayor tiempo de carga de la superposición JS tradicional se desperdicia décimas de segundos cuando se habla de optimización para maximizar para toda su audiencia. La mayoría de los formularios son bastante directos y sólo utilizan entradas y áreas de texto en lugar de radios y casillas de verificación que crean su propio desafío.
El código de ejemplo siguiente es solo una pequeña muestra de lo que podría hacer. No tengas miedo de añadir degradados de fondo o color a tu forma. Me concentro en un aspecto gris estándar para la mayoría de los elementos porque satisface un público más amplio que ser específico del color. Puedes jugar con la sombra y el color de fondo para añadir un aspecto completamente diferente a tu sitio web. Si tiene un sitio web oscuro, sugiero intercambiar el código de formulario CSS para mezclar y pop en un fondo oscuro. Simplemente agregue este CSS a su hoja de estilos para aplicar estilo al instante a cualquier formulario.
entrada de entrada de entrada de entrada de
acolchado: 10px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
radio de borde: 4px;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-shadow: 0 0 5px #444;
sombra de caja: 0 0 #444 de 3px;
borde: 1px #fff sólida;
}
textarea ?
acolchado: 15px;
borde: 1px #fff sólida;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
radio de borde: 4px;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-shadow: 0 0 5px #444;
sombra de caja: 0 0 #444 de 10px;
}
[type="text"]
input:hover, textarea:hover ?
borde: 1px sólido #233567;
}
Formulario predeterminado sin CSS. ¡A mí me parece una forma bastante aburrida!
Ahora bien, si agregamos el CSS, realmente podemos mejorar el aspecto general del formulario. ¡Este formulario es mucho más emocionante! Da una sensación más actualizada y moderna con las esquinas redondeadas, el suave sombreado y el acolchado que da una impresión más grande. Este estilo de forma se adapta a una gran cantidad de sitios web, pero definitivamente no se ajusta a todos los sitios web. Espero que disfrutes personalizando este formulario a tu gusto.
El CSS en el formulario tiene un gran impacto en su apariencia web. Si usted está interesado en mejorar su formulario aún más, puede personalizar con otras propiedades que se encuentran en los tutoriales aquí: color de fondo, degradado, relleno, o incluso una imagen, pero creo que estará satisfecho con sólo agregar un poco de CSS a su hoja de estilo.