Diseño de Formularios con CSS
Si estas aburrido de trabajar siempre con las mismos inputs o cajas de texto, te presento una alternativa, que utilizando un poco de diseño y css podrías reemplazar por completo esos aburridos formularios de contacto.
La técnica conciste en primero ocultar el input mediante css, luego diseñamos con la aplicación de diseño gráfico que más te guste una caja de texto, como por ejemplo:
Como primer paso insertamos la caja de texto, asignandole un “id” para luego identificarlo con css, de esta manera:
<input id="inp1" maxlength="25" />
Ahora lo trabajamos un poco con CSS, donde primero asignamos la imagen de fondo que tendra nuestra caja con background-image, luego decimos que nuestro fondo no se repita y lo hacemos con background-repeat:no-repeat, por útimo damos los detalles del borde y el tamaño horizontal y vertical, que por lo general debería coincidir con el tamaño de la imagen de fondo:
#inp1{
border: none;
width: 205px;
height: 32px;
padding-left: 3px;
padding-top: 6px;
background-image:url(input1.gif)
background-repeat:no-repeat;
}
Cuando el foco se posicione en el input:
input:focus{
background-color: transparent;
}
De esta manerá podrías diseñar no solo cajas de texto, sino también textarea, botones, fondos de formulario o formularios de contacto como el siguiente:
Bueno espero te sea de utilidad, dejo Demo y Descarga de archivos. Hasta un próximo post.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
muy bueno, era lo que necesitaba para mejorar mis proyectos,, gracias.