viernes, 23 de diciembre de 2011

Como hacer borde redondeado a los textbox usando CSS

hola como estan, hace tiempo que no escribo algo al blog, espero que esto les sirva a los amantes del diseño web, CSS y gente que quiera aprender, aqui explicare como hacer un borde redondeado a una caja de texto usando una imagen y CSS. El textbox sera ubicado sobre la imagen la cual dara el efecto de ver los bordes redondeados para que luzca asi

utilize este formulario de inicio de sesion que tenia hecho en php para explicarles.
Ahora lo que van a colocar en el textbox que deseen poner este efecto es este codigo HTML
Codigo HTML para textbox con bordes redondeados
en el ejemplo que tengo como eran 2 textbox, uno de login y el otro de password dentro de una tabla tuve que hacerlo asi:

ID Usuario
Password

para explicarles mejor la etiqueta div contiene la imagen de fondo(la de los bordes redondeados) y en la etiqueta input definimos el textbox y llamamos a loginbox.
Ahora para utilizar esa imagen hemos llamado a loginboxdiv la cual contiene a la imagen.
aqui pondre el codigo CSS para lograr tal efecto:

Como ven este codigo CSS es muy sencillo, el alto y el ancho de la clase loginboxdiv es mayor que la clase loginbox. La clase loginbox es la clase del texbox. Como pueden ver en el codigo CSS, el borde es eliminado y la altura, ancho y relleno son manejados de acuerdo al tamaño de la imagen de fondo.
Obviamente donde ejecuten su pagina ya sea .php .html lo que sea tienen que poner la imagen login_bg.gif y el codigo de arriba lo ponen antes de la etiqueta .
Pero si su pagina esta en php y hereda los estilos de otro archivo .css el codigo CSS peguenlo en el mismo script PHP.
Espero les sirva el codigo :D, si quisieran que postee otros contenidos solo diganme, trato de poner lo que voy aprendiendo aqui porque creo que elc onocimiento se comparte, ya no he tenido mucho tiempo pero ojala este post les haya gustado. Gracias por su visita y su tiempo. Tengan Feliz Navidad.

1 comentario: