Celdas con puntas redondeadas utilizando CSS
En esta oportunidad vamos a explicar como utilizar las hojas de estilo para realizar celdas con puntas redondeadas sin la necesidad de utilizar imágenes.
Antes de iniciar es necesario especificar que este ejemplo funciona con Internet Explorer únicamente.
Para inicar es necesario incluir el siguiente estilo en el documento que contendrá la celda:
<style type="text/css">
<!--
body {text-align:center}
#ttt {width:396;height:1;background:D3D3D1;}
#tt {width:398;height:1;background:EFEFEF; border-right:1px solid D3D3D1;border-left:1px solid D3D3D1;}
#t {width:400;background:EFEFEF;border-right:1px solid D3D3D1; border-left:1px solid D3D3D1;padding:4;}
-->
</style>
La hoja de estilo anteriormente publicada posee 4 (cuatro) capas. Para los que recién se inician en CSS o para los que necesitan refrescar la memoria, las capas se utilizan para aplicar estilos a partes amplias de un documento HTML y poseen atributos especiales que hacen más fácil su manejo.
Para poder experimentar el resultado en nuestra página en necesario incluir las siguientes líneas en el lugar donde queramos que aparezca la celda:
<div id="ttt"><img src="blank.gif" width="1" height="1"></div> <div id="tt"><img src="blank.gif" width="1" height="1"></div> <div id="t" style="font-family:Verdana;font-size:x-small;color:999">Esta es una celda con puntas redondeadas realizada enteramente con hojas de estilo.</div> <div id="tt"><img src="blank.gif" width="1" height="1"></div> <div id="ttt"><img src="blank.gif" width="1" height="1"></div>
Debo aclarar que para su buen funcionamiento es necesario crear una imagen de 1×1 px transparente (en este ejemplo se lo llamó ‘blank.gif’).
Dejo a su gusto el tamaño, el grosor de los bordes y el color, el color de fondo y el texto.
El resultado final se puede apreciar a continuación:
(5 votos, promedio: 3.40 de 5)
Loading ...
