En los trozitos de código hoy vamos a ver un estilo para lograr que las cajas de texto o casi cualquier otro objeto se vean redondeados en lugar de el rectángulo normal.
Esto es mero diseño pero en ocasiones tenemos nuestra web, con un diseño e imagenes muy trabajadas pero al entrar al login los inputs no encajan con el diseño general.
En realidad es muy sencillo vamos hacer uno muy básico.
Hacemos nuestro archivo html y vamos a crear un input lo voy a hacer en una tabla.
<html>
<head>
<TITLE>objetos redondeados</TITLE>
</head>
<body>
<div id="formulario" >
<table style="background-color:#F5F6CE;">
<tr>
<td>Ingrese su nombre:</td>
<td><input type="text" id="nombre" /></td>
</tr>
</table>
</div>
</body>
</html>
Bueno es muy sencillo es una
tabla(table) que simula un formulario sencillo de un solo campo donde solicito que el usuario
ingrese su nombre y en la otra columna puse un
input de tipo
text (caja de texto ) que es la que vamos a
redondear.
Ahora vamos a poner el estilo. NOTA:"si no manejas una hoja de estilos y el componente lleva mucho estilo es mejor que se le ponga en el head en lugar de en el mismo componente para llevar un mejor control, aunque es mucho más recomendable que generes una hoja de estilo y así tengas más limpio tu archivo html".
Como aqui no te quiero revolver lo voy a poner en el
head el siguiente estilo.
<style>
.round {
background-color: #fff;
width: auto;
height: auto;
margin: 0 auto 15px auto;
padding: 5px;
border: 1px solid #ccc;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(border-radius.htc);
}
</style>
Bueno la clase se va a llamar round y le pusimos de color de fondo blanco, el ancho y el largo serán automáticos le agregamos un margen y padding y un borde de un pixel de color gris.
El behavior se utiliza para que este efecto tambien funcione en Internet Explorer.
Este archivo
"border-radius.htc" lo puedes descargar aquí .
Este archivo yo lo tengo junto a mi archivo html pero si manejas carpetas asegurate de poner bien la rita dentro de los
parentesis de url().
Ahora a nuestro input le vamos a poner la clase : clase="round" y listo. solo es cuestion de darle estilo a la tabla para se vean acomodados.
El código final sería este.
<html>
<head>
<TITLE>objetos redondeados</TITLE>
<style>
.round {
background-color: #fff;
width: auto;
height: auto;
margin: 0 auto 15px auto;
padding: 5px;
border: 1px solid #ccc;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(border-radius.htc);
}
</style>
</head>
<body>
<div id="formulario" >
<table style="background-color:#F5F6CE;">
<tr>
<td style="vertical-align: top;padding-top:5px; ">Ingrese su nombre:</td>
<td><input type="text" class="round" id="nombre" /></td>
</tr>
</table>
</div>
</body>
</html>
El resultado sería como la siguiente imagen:
Como ven es muy sencillo y funciona en todos los navegadores.
Espero les sirva este trocito de código.
Si la liga del archivo no funciona dejame un comentario y lo vuelvo a subir.
Creo que esta es la última publicación del año así que muchas gracias por visitar este blog y les deseos felices fiestas!!!
"Programar no tiene que ser tan difícil como parece...."
+13.31.14.png)
+11.28.53.png){kind=small}
+11.30.25.png)
+15.01.32.png)