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>+11.28.53.png){kind=small}
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>
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>
+11.30.25.png)
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...."
una consulta como hago para colocar el mismo estilo de borde redondeado para los combobox, gracias por anticipado por tu respuesta
ResponderEliminarSe hace precisamente igual al <select></select>" agregale la clase
Eliminar"<select class="round"></select>" el combo se vera redondeado eso si el icono que despliega la caja se vera cuadradito y tambien la lista.
Muy buen post, espero que sigas posteando cosas como esta
ResponderEliminarmuy buenooo thanks!
ResponderEliminarmuchas gracias por el tip!!!
ResponderEliminarExcelente. Muchas gracias
ResponderEliminarProbablemente no es el tema a tratar, pero como haces lo del cuadro con orilla verde y ligeramente sobriado, y que las puntas sean redondas?me refiero a todo estos cuadros que aparecen en la pagina.. Gracias :D
ResponderEliminarA estoy usando uno de los temas proporcionados por blooger. pero me acabas de dar una buena idea para tutorial como hacer un menú!! básicamente usas un div con un trozo de imagen ya estilizada y dandole padding a los bordes puedes crear buenos efectos. generalmente se usan dos imagenes e intecalarlas dependiendo del movimiento del mouse.
Eliminar