Esquinas redondeadas con CSS y Javascript, sin imágenes

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.

17/8/06 - 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

+ 2 manuales relacionados
+ 2 categorias relacionadas
+ 6 comentarios (Añadir)
+ 7 comentarios no revisados

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Licencia Copyleft. Puedes reproducirlo citando al autor y enlazando con DesarrolloWeb.com. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Javascript
+ Entrar en CSS

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestran 6 comentarios revisados

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 7 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba