Esquinas redondeadas, o como hacer fácil lo dificil

Esta semana, en el trabajo, me pasaron un diseño 'sencillo y rápido' que cuanto más miraba más degradados, esquinas redondeadas y 'detallitos varios' veía.

Hasta la fecha las dichosas esquinas las he hecho con imágenes (bien incluyendolas en celdas, como fondo de las mismas, o dentro de algún elemento HTML) pero debido a la cantidad de ellas que tenía el diseño, me decidí por buscar algo en Internet.

Por casualidad, estaba mirando el correo 🙂 y vi un mensaje en la Lista de Ovillo que hablaba precisamente del tema de las esquinas redondeadas. Entre todos los mensaje unos se decantaban por utilizar imágenes para hacerlas, y CSS para posicionarlas, y otros por CSS y Javascript. Como no veía muy clara la diferencia me puse a leer un rato sobre el tema, y trás un rato, me decanté por este último.

¿Por qué? Porque utilizando el método de las imágenes + CSS tienes que crear un número de imágenes igual a cuatro veces el número de elementos cuyas esquinas quieras redondear. Porque para hacer el posicionamiento, el primero método, utilizaba bastante elementos HTMl 'sin cerrar', produciendo con ello errores en la semántica del documento, como:

	<p class='clase'><b class='clase2'></b></p>

Y, porque después de reflexionar, me acordé que de el método CSS+Javascript ya me había hablado mi gurú personal en esto del CSS y la accesibilidad, Marco Giacomuzzi

El método de creación de esquinas redondeadas con CSS+Javascript ha sido desarrollado por Alessandro Fulciniti y os remito a ella para ver toda la potencia del método. No lo dudéis y visitadla.

A pesar de que os voy a dar un ejemplo sencillo del uso del método de Alessandro, que él llama Nifty Corners, os recomiento encarecidamente que visitéis su web.

En el ejemplo vamos a redondear un div, llamado 'box'. Lo primero que hacemos es declarar el div a redondear:

	<div id="box">
		<h1>Nifty Corners Cube&trade;</h1>
		<p>Se acabaran las ñapas</p>
	</div>

El siguiente paso es incluir la llamada a la función que se encargará del redondeo del div (para ver las opciones visita la página del autor). Recuerda que antes de hacer la llamada, a la función que realiza el redondeo, has de incluir el fichero javascript que con tiene a dicha función, Nifty().

	<script type="text/javascript">
		window.onload=function(){
			Nifty("div#box");
		}
	</script>

Para acabar el proceso, dale un color de fondo al elemento a redondear desde la hoja de estilos.

	div#box{
		width: 18em;
		padding: 20px;
		margin:0 auto;
		background:#FFA509;
		color:#000;
	}

Desde este momento debieras estar viendo un div en medio de la pantalla con las esquinas redondeadas. Si por cualquier motivo no funcionase, verifica que las rutas de los ficheros que se incluyen -requiren- estén bien. Además, has de vigilar que el fichero niftyCorners.CSS esté donde indican las líneas de la función AddCSS(), que tienes en la línea 32 del fichero niftycube.js

Recuerda, con estos tres sencillos pasos has redondeado un elemento HTML:

  1. Creación del elemento a redondear.
  2. Llamada a la función de redondeo, Nifty()
  3. Definición el estilo del elemento a redondear.

Espero que el método os sea tan útil como me ha sido a mi