Esquinas redondeadas con CSS y Javascript, sin imágenes

  • Por
Comentamos un script que sirve para hacer cajas con las esquinas redondeadas, pero sin necesidad de usar imágenes, sólo con CSS y un poco de Javascript.
Hacer cajas con las esquinas redondeadas es una de las típicas preguntas que se pueden hacer sobre CSS. Existen varias soluciones al problema, que hemos visto en algunos artículos de DesarrolloWeb.com, pero en estas cajas con CSS utilizábamos imágenes, que es lo más directo.

Ahora vamos a ver un método para crear cajas con las esquinas redondeadas que no utiliza imágenes, sino simplemente CSS y un poco de Javascript. El desarrollo de esta técnica no corre por nuestra cuenta. En este caso simplemente vamos a comentar un desarrollo de Alessandro Fulciniti que se llama Nifty Corners Cube que ya está en su tercera versión y se puede ver en la URL: http://www.html.it/articoli/niftycube

Como hemos dicho, el sistema crea cajas o bloques de contenido con esquinas redondeadas o suavizadas, pero sin usar imágenes. En lugar de imágenes utiliza CSS y Javascript compatible con la mayoría de los navegadores. Aunque según se informa en la página de producto, los navegadores Internet Explorer 5, así como los que tengan deshabilitado Javascript, verán cajas cuadradas en lugar de ver las esquinas redondeadas. En la primera versión ya se presentaba como una interesante opción, pero en la segunda y sobretodo en la tercera versión se ha visto mejorado el script y simplificado su manejo, dentro de lo posible.

Lo mejor de todo es que se presenta con licencia GPL, luego cualquiera puede usarlo en sus desarrollos libremente.

Dispone de tres elementos para ponerlo en marcha:

  1. Un archivo Javascript
  2. Un archivo CSS
  3. Llamadas Javascript dentro de las páginas que quieran mostrar cajas con esquinas redondeadas.
En realidad el archivo CSS para hacer esquinas redondeadas lo incluye internamente Javascript, por lo que nosotros simplemente tendremos que incluir un archivo externo .js, que es el código Javascript con las funciones que sirven para hacer las esquinas redondeadas.

<script type="text/javascript" src="niftycube.js"></script>

Luego será necesario hacer unas llamadas a Javascript para redondear las esquinas de las capas que deseemos. De esta manera:

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


Como se puede ver, se ha definido una función que se ejecutará con el evento onload (cuando termine de cargarse la página). Esa función invoca a otra función llamada Nifty() que está definida en el Javascript que habíamos incluido como archivo aparte. La función Nifty() recibe dos parámetros. El primero es el selector CSS de la capa que se desea redondear y el segundo sirve para indicar opciones específicas del redondeo.

El primer parámetro, que decíamos es el selector CSS, tiene mucha versatilidad. Permite especificar el redondeo de elementos de la página variados, como todas las apariciones de una etiqueta concreta, una clase de CSS, una etiqueta con un identificador determinado, etc. En la documentación del producto se pueden ver todos los tipos de selectores CSS, pero algunos son estos:

Selector de etiqueta: "p" o bien "h2"
Se mostrarán con los bordes redondeados todas las apariciones de una etiqueta, como los párrafos o los encabezamientos h2.

Selector por identificador "div#capax" o bien "p#parrafoy"
Esto sirve como selector de las siguientes etiquetas con sus identificadores:
<span class=codigo>
<div id="capax">Div con su identificador</div>
<p id="parrafoy">P con su identificador</p>

Selector de clase "div.nave" o bien "span.fuentepequena".
Cada vez quw apliquemos esa clase, se pondrá con las esquinas redondeadas.

Selector descendente "div#cabecera h1"
Hace referencia a la etiqueta h1 dentro de la capa con id="cabecera".

Hay otros selectores que se pueden ver en la documentación. Además en el primer parámetro se pueden especificar varios selectores a la vez, separados por una coma:

Nifty("div#box,div#prueba,p","big");
Esto afectará a las capas box, prueba y a todas las etiquetas de párrafos.

El segundo parámetro son las opciones de redondeo que se aplicarán a los selectores en cada función. Las distintas opciones se deben escribir separadas por comas. Existe una lista de opciones bastante grande, pero comentamos algunas que parecen más útiles:

tr: redondear sólo la esquina superior derecha.
tl: redondear sólo la esquina superior izquierda.
br: redondear sólo la esquina inferior derecha.
bl: redondear sólo la esquina inferior izquierda.
top: esquinas de arriba
bottom: esquinas de abajo
left: esquinas de la izquierda
right: esquinas de la derecha
all: todas las esquinas (es la opción por defecto)
none: ninguna esquina se redondea

Con estas opciones juntas se pueden definir redondeos de varias esquinas, pero no todas, para que quede alguna sin redondear:

Nifty("p","tl,bl,br");

small: se utilizan esquinas pequeñas, de 2px
normal: se utilizan esquinas normales 5px (opción por defecto)
big: se utilizan esquinas grandes de 10px

Con estas opciones definimos tamaños de las esquinas.

Luego hay otras opciones que son un poco menos claras, que dejamos para que cada uno se las estudie si las llegase a necesitar: transparent, fixed-height, same-height. Parece útil la opción same-height, que hace que todas las capas tengan la misma altura, por si queremos hacer un diseño en distintas columnas donde cada columna tiene la misma altura.

Ejemplo muy básico de esquinas redondeadas sin imágenes

Hemos hecho unas pruebas del sistema y además hemos tratado de conseguir el código más básico con el que probar este script. El resultado es el siguiente ejemplo, en el que se redondean las esquinas de todos los párrafos de la página. Hemos colocado dos párrafos con dos colores distintos de fondo.

<html>
<head>
<title>Ejemplo esquinas redondeadas basico</title>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("p");
}
</script>
</head>
<body>
<p style="background:#ccccff;padding:5px;">
Esto es una prueba
<br>mola cantidad!!!
</p>
<br>
<p style="background:#cccccc;padding:5px;">
De nuevo, Hola mi amigo!!!
</p>
</body>
</html>


Este ejemplo se puede ver en una página aparte.

Haciendo pruebas hemos comprobado que si ponemos el color de fondo de un párrafo con el nombre de un color en lugar de su código RGB, no funciona.

<p style="background: red;">

Si cambiamos el color de fondo de la página, las esquinas redondeadas también se ven perfectamente.

<body style="background: #66ff00;">

Pero si ponemos el color de fondo de la página con un nombre en lugar de RGB, tampoco funciona.

Podemos ver multitud de ejemplos y descargar los códigos necesarios para hacer esquinas redondeadas y los ejemplos, en la web del propio sistema:

http://www.html.it/articoli/niftycube/index.html

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Christian González

17/8/2006
Quisiera saber como hacer para aplicar este efecto pero solamente a un determinado bloque, no a todo los que estan dentro de la clase de etiqueta, porque al iniciarse la pagina, en el evento window.onLoad se llama a la funcion y se le pasa como argumento la clase de etiqueta a la cual aplicar, pero en una determinada pagina me interesa solamenta aplicar a algunas, y no a todas los parrafos o bloques.

Agradeceria si alguien pudiera ayudarme y, si puede ser, enviarme por email la solucion, es que estoy necesitando implementar eso, seria agradecido.

Christian http://www.dreamcoders.com.ar/

Esteban

06/9/2006
Hola Christian, la solucion es facil: en la instruccion de JS la pones asi:
Nifty("<bloque>#<ID> <subbloque>", "<caracteristicas>");

Por ejemplo:
Nifty("ul#nav123 a","small transparent top");
Solo actuara sobre <ul id="nav123">

Dave

13/9/2006
He intentado probar esta aplicación y no consigo ponerla en funcionamiento. Solo consigo ver esquinas cuadradas, no se porque no se puede pues incluso he probado el html de vuestro ejemplo y no me funciona. Podeís ayudarme?

Dave

14/9/2006
A mi me funciona viendo los ejemplos hechos pero si copio vuestro codigo y cojo vuestro js, por lo menos en mi pc, no funciona ni con IE6 ni con firefox. Alguien puede ayudarme o pasarme un ejemplo que funcione a daserweb@hotmail.com

Miguel

20/9/2006
Este ejemplo funciona tanto en Internet Explorer como en Firefox. Está probado. Si no te funciona, puede ser porque tengas deshabilitado Javascript en tu navegador. Esto ocurre muy a menudo con Internet Explorer, que te bloquean los scripts.

Si no te funciona lo que has bajado, prueba que la ruta del archivo js esté correctamente creada.

César

28/11/2006
Hola, es genial esta forma de hacerlo, llevaba tiempo detras de algo como esto porque con imagenes no da más que problemas.

Para los que hayan tenido algún tipo de problemas, que introduzcan todos los archivos que aparecen en la descarga(los .css y los .js) que el script por dentro los llama y a mi no me lo cargaba por que solo había adjuntado el niftycube.js, además han de estar todas en el mismo directorio o si no se ha de cambiar el script.

Y si no comprobad que estan bien introducidas las direcciones de donde estan el script en el código html.

Lorena

03/2/2007
Cuando corro el ejemplo localmente veo las esquinas redondeadas, de hecho me muestra el mensaje de que tengo deshabilitado y de click para activar scripts o algun ActiveX control... pero bueno, cuando ya lo hago en el servidor donde esta la pagina de produccion que estoy realizando, no me hace el redondeo y ni siquiera me marca el mensaje de activacion que mencionaba...Pense que era problema con la direccion del js pero no, lo pongo mal y de plano no me muestra ni una linea (laterales son las que si muestra hasta ahorita)... a alguien le ha pasado lo mismo?? y lo mas importante.. lo pudo solucionar?

lis

26/2/2007
Hola, yo lo he probado y no funciona porque de donde saco el archivo niftycube.js?

No esta en ningun lado para descargarlo y guardarlo para despues llamarlo, donde esta??

jeik

30/3/2007
DONDE ESTA EL .JS POR FAVOR SI ALGUIEN LO TIENE MANDELO A ESTE CORREO PLEASE

JEYRZ@HOTMAIL.COM
J.RAMIREZ@TECNOLOGICA.CL

LO AGRADECERIA YA Q ME SIRVE MUCHO PARA LA CONSTRUCCION DE PAGINAS

GRACIAS

Florencia

03/4/2007
Muy bueno el recurso pero cuando tengo una imagen de fondo, o sea quiero que mi div que tiene un fodo redonde las puntas con este recurso pero no pude. Sera que no se puede con imagenes de fondo lograr este efecto?

Jonathan Soriano

13/4/2007
Para obtener el .js, solo teneis que guardar la página web en la que se muestra el resultado a vuestro ordenador. Después de esto, vais a la ubicación donde acabáis de guardar la web y junto a ella, habrá una carpeta cuyo nombre debe de terminar con "_archivos". Dentro de ella está el js.

Un saludo

Rubbnns

16/1/2008
A mí me funciona perfectamente al hacer la prueba en el ordenador con distintos navegadores. Eso sí, tengo que pegar los .js y .css del nifty (4 en total) tanto en la carpeta de los HTML como de la plantilla que los genera.

El problema viene cuando subo todo a la red, ya no se ven las esquinas redondeadas.

¿Alguien puede ayudarme?

Saludos

Jose Nobile

02/2/2008
Hay alguna solucion para esquinas redondeadas sin imágenes ni javascript, solo xhtml y css?

Richard

19/5/2009
soy principiante y queria...
soy principiante y queria saber si el archivo javaScript va en un archivo aparte...
yo supongo
q solo se le da la direccion y se ponen las propiedades.
como en las bases de datos.

el problema esq no le entiendo muy bien a lo de javascript
a ver si me dicen donde puedo ver un curso gratis y pequeño de javaScript o ActionScript

apart que tengo que diseñar la pagina web de mi escuela!
y necesito ver opciones mas nuevas para el diseño y q llamen la atencion...
quiero q sea la mejor Web de todos los planteles hermanos!

;)

Salu2!
y gracias por su aprte, pero les agradeceria mas que me ayudaran un poco ....

pueden ver una web en la q estoy trabajando, esta en construccion, todavia no esta en el servido final (solo es el de pruebas): chupamelapija.uuuq.com espero que la cargue bien

yolanda_cordoba_valoyes

23/7/2009
Archivo Js
Hola, el ejercico no me sale por que me falta el archivo niftycube.js, donde lo consigo o el codigoq ue contiene, alguien que me guie, gracias.

diego

21/8/2009
Pregunta Frecuente
No sé si ya alguien por aqui lo comentó, pero si no, aqui lo pongo:

Para aquellos compañeros que no les funciona aún bajando el JS del mismo ejemplo es por que también hay que bajar el CSS que necesita el niftycube.js para aplicar el estilo. El archivo se llama niftyCorners.css y seguramente esta en la misma carpeta en donde esta el niftycube.js, deben estar juntos.

Espero les sea de ayuda este comentario.

Saludos desde la Ciudad de México!

peter_muoz

13/10/2009
js + css
Para aquellos que aun no consiguieron el JS ni el CSS aqui les dejo los links:
JS -> http://www.desarrolloweb.com/articulos/ejemplos/css/niftycube.js
CSS -> http://www.desarrolloweb.com/articulos/ejemplos/css/niftyCorners.css
Espero les sirva.

Manuel

21/4/2010
Esquinas redondeadas
Ok. Está muy bien.

eslomao

19/8/2011
esquinas redondeadas
hola amigos, bueno he leido bastante en todo esto pero sigo sin aclararme , eso de las esquinas redondas me gusta , pero tengo un par de problemas , el ejemplo que pones aki es bien, pero siempre salen las 4 esquinas redondeadas , el problema es q si haces una cabecera me gustaria q solo las 2 esquinas superiores se vieran redondeadas, pues las inferiores llevan debajo una tabla q empezaria con esquinas cuadradas y se veria como una continuacion de la primera barra, se veria poco estetico, pero no encuentro la manera de modificar ese scrip para q solo se vean redondeadas las esquinas que yo le asigne ,
por otra parte tambien ando haciendo esto con roundedcorners , y ahi tengo otro problema, solo puedo cargar una funcion , si cargo mas de una solo funciona la ultima , os dejo aki el codigo a ver en q estoy fallando

ESTE FUNCIONA BIEN, SOLO TIENE UNA FUNCION

<script type="text/JavaScript" src="Nueva carpeta/rounded_corners.js">
</script>
<script type="text/JavaScript"> window.onload = function() {
sett = {
tl: { radius: 9 },
tr: { radius: 00 },
bl: { radius: 00 },
br: { radius: 00 },
antiAlias: true,
autoPad: false
}
var vdiv = document.getElementById("myDiv");
var vCorner = new curvyCorners(sett, vdiv);
vCorner.applyCornersToAll();
}
</script>
<style type="text/css">#myDiv {
background-color:#FF0000;
color:#cccccc;
font-family: "trebuchet ms", verdana, sans-serif;
font-weight: bold;
font-size: 13px;
text-align: center;
vertical-align: middle;
height: 30px;
}
</style>
</head>

<body>

<div id="myDiv">

</div>

ESTE YA NO FUNCIONA

<script type="text/JavaScript" src="Nueva carpeta/rounded_corners.js">
</script>
<script type="text/javascript">
window.onload= function(function1, function2, function3) {
return function() {
if (function1)sett = {
tl: { radius: 9 },
tr: { radius: 00 },
bl: { radius: 00 },
br: { radius: 00 },
antiAlias: true,
autoPad: false
}
var vdiv = document.getElementById("nueva");
var vCorner = new curvyCorners(sett, vdiv);
vCorner.applyCornersToAll();
}
function1();
if (function2)sett = {
tl: { radius: 9 },
tr: { radius: 00 },
bl: { radius: 00 },
br: { radius: 00 },
antiAlias: true,
autoPad: false
}
var vdiv = document.getElementById("myDiv");
var vCorner = new curvyCorners(sett, vdiv);
vCorner.applyCornersToAll();
}
function3();
if (function3)sett = {
tl: { radius: 09},
tr: { radius: 09 },
bl: { radius: 00 },
br: { radius: 00 },
antiAlias: true,
autoPad: false
}
var vdiv = document.getElementById("tercera");
var vCorner = new curvyCorners(sett, vdiv);
vCorner.applyCornersToAll();

function3();
</script>
<style type="text/css">#nueva {
background-color:#FF0000;
color:#cccccc;
font-family: "trebuchet ms", verdana, sans-serif;
font-weight: bold;
font-size: 13px;
text-align: center;
vertical-align: middle;
height: 30px;
}
</style>
<style type="text/css">#myDiv {
background-color:#FF0000;
color:#cccccc;
font-family: "trebuchet ms", verdana, sans-serif;
font-weight: bold;
font-size: 13px;
text-align: center;
vertical-align: middle;
height: 30px;
}
</style>
<style type="text/css">#tercera {
background-color:#FF0000;
color:#cccccc;
font-family: "trebuchet ms", verdana, sans-serif;
font-weight: bold;
font-size: 13px;
text-align: center;
vertical-align: middle;
height: 30px;
}
</style>
</head>

<body>
<div id="nueva"></div>
<br />
<div id="myDiv"></div>
<br />
<div id="tercera"></div>

siento haberme extendido, pero no encontraba una forma mejor de hacerlo , gracias