Limar las esquinas con CSS
por Juan Carlos García, 6 de Mayo de 2005
Varias veces hemos hablado ya aquí al respecto del papel de la estética a la hora de conseguir una web más o menos usable. En síntesis, la idea es que una mejora estética no debe perjudicar aspectos de usabilidad o accesibilidad.
Uno de los aspectos que contribuyen a hacer más agradable el aspecto de una página web es suavizar los colores demasiado agresivos o las formas abruptas.
Las esquinas de las tablas o cajas con las que trabajamos son uno de esos aspectos. Habitualmente, una solución para ello había sido recurrir a usar un gráfico con forma de esquina redondeada del mismo color que el resto del elemento.
Sin embargo, si deseamos una solución basada en CSS esta puede ser una manera:
En la hoja de estilo en cuestión insertamos algo parecido a:
div#nifty{ margin: 0 ;background: #F0EDE0}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #F0EDE0}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
Y en la página web propiamente dicha:
<div id=”nifty”>
< b class=”rtop”><b class=”r1″></b><b class=”r2″></b><b
class=”r3″></b><b class=”r4″></b></b>[Aquí el contenido]
<b class=”rbottom”><b class=”r4″></b><b
class=”r3″></b><b class=”r2″></b><b
class=”r1″></b></b></div>
En el siguiente enlace podéis observar un ejemplo sencillo de caja con esquina redondeada (el resto de elementos de presentación queda de vuestra parte).
Se puede hilar más fino, y modificar el redondeo, para ello basta con añadir más clases “.rx“.
También se puede complicar más a base de javascript, pero como que no nos apetece entrar ahí, que luego lo mismo tienes desactivado el javascript en tu navegador y estamos perdiendo el tiempo.
Una solución más fina, elegante y adecuada que usar un gráfico para redondear las esquinas ¿no?.
Y ni siquiera hay que poner “falsas etiquetas ALT” para pasar los validadores automáticos.
Adenda 14/09/2005:
Nos deja Tomás Saorín un comentario sobre una mejora del artículo que comentábamos:
Hola. El autor del código para limar esquinas ha hecho una versión mejorada, que cambia un tanto la manera de hacerlo.La dirección del documento es: http://pro.html.it/print_articolo.asp/id_599/stampa.html
El nuevo código tampoco usa imágnees. Tan solo CSS y Javascript. (Si no estuviera activado el JS, saldrían las cajas, pero con esquinas normales)
Según el autor, las principales mejoras en sus “Nifty Corners” son:
Mayor soporte de exploradores. Asegura que funciona también en Internet Explorer 5.5, y los principales (Probado con IE6, IE5.5, Opera 7.6, Firefox 1.0 y Safari 1.1.) Aunque el soporte para IE5.0 es parcial.
También funciona en páginas HTML y usa un selector de clases.
Además se pueden elegir las esquinas a redondear. También permite usar bordes.
En resumen “Nifty Corners” se compone de:
- CSS file for the screen
- CSS file for the print
- Javascript library to get Nifty Corners
- The Javascript calls to round the elements you want
Adios y hasta otra.
