Esquinas redondeadas sin emplear imágenes: sólo CSS y JavaScript
La nueva versión de Nifty Corners, ahora llamada Nifty Corners Cube, nos permite generar bordes con esquinas redondeadas en nuestras páginas web de la manera más sencilla y flexible, sin emplear imágenes. Sólo CSS y JavaScript. A continuación incluyo una traducción de la documentación de este magnífico software libre, creado por Alessandro Fulciniti.
Nifty Corners Cube: libertad para redondear
Ha pasado más de un año desde la primera versión de Nifty Corners. Aunque se trataba más bien de probar un concepto, y la segunda versión presentaba algunas grandes mejoras, todavía faltaba algo. Así que aquí os presento Nifty Corners Cube, una versión más simple y flexible que las anteriores versiones. Comencemos.
Nuevas características
Si es la primera vez que te encuentras con Nifty Corners, te sugiero que eches un vistazo a la primera versión del artículo para entender los conceptos que manejamos. Básicamente, Nifty Corners es una solución basada en CSS y JavaScript para conseguir esquinas redondeadas sin usar imágenes.
En Nifty Corners Cube hay varias mejoras y nuevas características, que lo hacen más versatil y más simple de usar que las versiones anteriores:
- El número de parámetros se ha reducido de cuatro en la primera versión y cinco en la segunda, a sólo dos, el segundo de los cuales es opcional.
- Ya no es necesario especificar los colores, porque ahora se detectan automáticamente.
- Son más fáciles de integrar en el proceso de diseño, ya que el relleno (tanto horizontal como vertical) de los elementos se preserva.
- Es más fácil de usar junto con otros scripts.
- Se ha mejorado y ampliado el soporte de selectores CSS.
- Ahora sólo hace falta una sóla línea en la sección >head para cargar la librería completa: aunque sigue estando basada en JavaScript y CSS, los archivos CSS se cargan automáticamente desde el JavaScript.
- Ahora está publicado bajo licencia GPL.
Junto a todas estas novedades, que descubriremos en los siguientes ejemplos, se han abandonado dos características de la versión anterior. En primer lugar, se ha abandonado por completo el soporte para Internet Explorer 5.0/Win. Los usuarios de este navegador simplemente verán las esquinas cuadradas, al igual que los usuarios que tengan deshabilitado JavaScript. El soporte a navegadores sigue siendo bueno, en cualquier caso: los ejemplos de este artículo han sido probados con éxito en IE5.5, IE6 e IE7 beta 2 preview, Opera 8.5, Firefox 1.5 y Safari 2.0. Tuve que eliminar a IE5.0/Win de la lista de compatibilidades por la nueva manera de funcionar del script.
Nifty Corners Cube: introducción
Nifty Corners Cube es una solución para conseguir esquinas redondeadas sin imágenes, y esta tercera versión incluye tres componentes principales:
- Un fichero JavaScript, llamado “niftycornerscube.js”
- Un fichero CSS, llamado “niftycorners.css”
- Las llamadas de JavaScript específicas para las páginas
Ahora estamos preparados para mirar el primer ejemplo: es un div con grandes esquinas redondeadas gracias a Nifty Corners. Como dije anteriormente, el fichero CSS se añade automáticamente por JavaScript. De hecho, la única referencia a un fichero externo en el ejemplo es la siguiente:
<script type="text/javascript" src="niftycube.js"></script>
Teniendo en cuenta el tercer punto, esto es, las llamadas JavaScript necesarias para la página, el código para el ejemplo es el siguiente:
<script type="text/javascript">
window.onload=function()
{
Nifty("div#box","big");
}
</script>
He marcado en negrita la parte del script que depende de la página. Se trata de la llamada a la función Nifty. Esta función es el corazón de toda la librería, y recibe dos parámetros que son el punto fuerte del script. Los parámetros se tienen que especificar entre comillas, y separados por una coma. El primer parámetro es el selector CSS, que especifica los elementos que se redondearán, mientras que el segundo parámetro es para las opciones así que, para los casos por omisión, se puede obviar. Veámoslos en profundidad.
Los parámetros
El primer parámetro se emplea para el selector CSS, que determina los elementos a los que se aplicarán las Nifty Corners. Los selectores CSS aceptados son: selector de etiqueta, id, descendiente (con id o class) y agrupación. La siguiente tabla muestra algunos ejemplos:
| Selector | Ejemplo |
|---|---|
| selector de etiqueta | "p" "h2" |
| selector de id | "div#header" "h2#about" |
| selector de clase | "div.news" "span.date" "p.comment" |
| selector de descendiente (con id) | "div#content h2" "div#menu a" |
| selector de descendiente (con class) | "ul.news li" "div.entry h4" |
| agrupación (cualquier número y combinación de los selectores anteriores) | "h2,h3" "div#header,div#content,div#footer" "ul#menu li,div.entry li" |
Pasemos ahora a hablar de las opciones: se identifican con palabras clave que se pueden emplear en cualquier orden y número. Veámoslas:
| palabra clave | significado |
|---|---|
| tl | esquina superior izquierda. |
| tr | esquina superior derecha. |
| bl | esquina inferior izquierda. |
| br | esquina inferior derecha. |
| top | esquinas superiores. |
| bottom | esquinas inferiores. |
| left | esquinas de la izquierda. |
| right | esquinas de la derecha. |
| all (por omisión) | todas las esquinas. |
| none | no se redondeará ninguna esquina (para usar nifty columns). |
| small | esquinas pequeñas (2px). |
| normal (por omisión) | esquinas de tamaño normal (5px). |
| big | esquinas grandes (10px). |
| transparent | para conseguir esquinas transparentes con alias. Esta opción se activa automáticamente si el elemento a redondear no tiene especificado el color de fondo. |
| fixed-height | necesario cuando el elemento tiene aplicado una altura fija a través de CSS. |
| same-height | Parámetro para nifty columns: todos los elementos identificados por el selector CSS del primer parámetro tendrán la misma altura. Si el efecto se necesita sin que además se redondeen las esquinas, simplemente usarlo junto con la palabra clave none. |
Nos encontraremos con los selectores y las opciones a través de la siguiente serie de ejemplos que he preparado. Comencemos.
Ejemplo 1: un solo div
El primer ejemplo ya ha sido presentado anteriormente. El código para redondear el div con id="box" es el siguiente:
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>
La primera línea se necesita para enlazar con la librería de Nifty Corners, mientras que las siguientes son específicas para esta página. Los colores de fondo de la página y del div id="box" los detecta automáticamente el script. Es importante resaltar que el relleno del div (20 px en los lados verticales en este caso) se mantiene intacto.
La parte mostrada en negrita es la llamada a la función Nifty. En beneficio de la brevedad, desde el siguiente ejemplo en adelante sólo informaré de las llamadas a esta función, pero por favor recuerda que éstas se han de incorporar dentro de una sección de script o, incluso mejor, en un fichero js externo.
Ejemplo 2: dos divs
En el segundo ejemplo de nifty corners, se redondean dos divs con una sola llamada:
Nifty("div#content,div#nav");
En este caso sólo se ha usado el primer parámetro, que es un selector CSS con agrupación: los dos selectores de id están separados por una coma. El segundo parámetro no se usa, por lo tanto las nifty corners serán de tamaño medio (5px) con antialias, por omisión.
Ejemplo 3: transparencia
En el ejemplo tres vemos cómo crear esquinas redondeadas en un div que tiene un fondo degradado. En estos casos, el uso de la transparencia interior puede ser realmente útil, y se consigue con el uso de la opción transparent. Veamos la llamada de JavaScript:
Nifty("div#box","transparent");
La opción de transparencia es compatible con todas las demás, y se usa por omisión en los elementos que no tienen establecido un valor para background-color.
Ejemplo 4: pestañas redondeadas
El cuarto ejemplo es una de las características más solicitadas de nifty corners: un menú de pestañas sin imágenes. La llamada de JavaScript es la siguiente
Nifty("ul#nav a","small transparent top");
Los enlaces se redondean en su parte superior, con esquinas pequeñas y transparentes en el interior. La transparencia interior es esencial para conseguir el efecto de rollover. En caso de que no se necesite un efecto de rollover con cambio de background-color, aquí hay una pequeña variante en la que cada pestaña está redondeada y tiene un color diferente. La llamada de JavaScript en este caso es:
Nifty("ul#nav a","top");
Hay que resaltar el hecho de que en ambos ejemplos las pestañas son perfectamente elásticas, ya que se dimensionan en medidas "em".
Ejemplo 5: botones redondeados
En el quinto ejemplo conseguimos una mini-navegación, muy apropiada para blogs y sitios por el estilo, que se obtiene usando nifty corners. El código es el siguiente:
Nifty("ul.postnav a","transparent");
En este código, se ha empleado una clase para los botones, así que sería posible redondear varios conjuntos de botones-enlace en la misma página. Desde el punto de vista de nifty corners, se ha empleado un selector de descendente con clase.
Ejemplo 6: cajas
En el sexto ejemplo hemos usado nifty corners para redondear seis divs con altura fija. Cada div tiene un color diferente, incluyendo el de abajo a la derecha, que es blanco como el fondo de la página. El antialias se consigue automáticamente, y se ha mantenido el relleno de los elementos de las listas, tanto el vertical como el horizontal. Pero para hacer honor a la altura fija especificada a través de CSS, hemos empleado la palabra clave fixed-height. Esta es la única llamada JavaScript empleada:
Nifty("div#about li","tl bottom big fixed-height");
Ejemplo 7: nifty columns
Con el séptimo ejemplo presentamos una de las nuevas características de nifty corners: nifty columns. Esta característica nos permite conseguir un efecto de falsas columnas sin fondos. La opción que consigue este truco es same-height, y los elementos se deben especificar dentro del primer parámetro. La llamada para este ejemplo es:
Nifty("div#content,div#nav","same-height");
La opción same-height le dice al script que detecte la altura de los elementos especificados por el selector css y que les asigne la misma altura, que será el máximo valor detectado, sin necesitar imágenes de fondo.
Ejemplos 8, 9 y 10: más nifty columns
Los ejemplos ocho, nueve y diez se basan en el mismo marcado, que es el siguiente:
<ul id="split">
<li id="one">
<h3>Título</h3>
<div>Contenido</div>
</li>
<li id="two">
<h3>Título</h3>
<div>Contenido</div></li>
<li id="three">
<h3>Título</h3>
<div>Contenido</div>
</li>
</ul>
Las únicas cosas que varían son de hecho CSS y las llamadas a nifty corners, que usan nifty columns en los tres casos. En el ejemplo ocho la llamada de JavaScript es la siguiente:
Nifty("ul#split li","same-height");
En el ejemplo nueve se emplearon dos llamadas: una para los encabezados, y otra, con la opción same-height, para los divs infereiores:
Nifty("ul#split h3","top");
Nifty("ul#split div","bottom same-height");
Si no necesitas esquinas redondeadas en la parte de abajo, pero te gustaría que los elementos tuvieran la misma altura, como en el ejemplo diez, simplemente especifica la opción none:
Nifty("ul#split h3","top");
Nifty("ul#split div","none same-height");
Ejemplos 11 y 12: maquetación con Nifty Corners
Hemos llegado a los dos ejemplos más grandes de este artículo, que cubren el tema de la maquetación con Nifty Corners. En los ejemplos once y doce, empleamos nifty corners de manera intensiva para el layout y los elementos de la página.
En el ejemplo once, como en los ejemplos anteriores, he mantenido para mayor claridad la sección de CSS y el script. La sección de JavaScript es la siguiente:
window.onload=function()
{
Nifty("div#container");
Nifty("div#content,div#nav","same-height small");
Nifty("div#header,div#footer","small");
}
Cuando la página termina de cargar, se aplica Nifty Corners al contenedor; al contenido y a la navegación se le aplica con las opciones de tamaño pequeño y falsa columna, y al pié de página se le aplica con opción de tamaño pequeño. El efecto de borde blanco alrededor de toda la página se consigue con relleno en el contenedor.
El ejemplo doce representa un layout de dos columnas, con navegación por pestañas y algunos elementos (como fechas y comentarios) comunes en el diseño de blogs. En este caso, el CSS y el JavaScript se han mantenido en ficheros externos. Aquí está el código correspondiente en la sección head:
<link rel="stylesheet" type="text/css" href="NiftyLayout.css" media="screen">
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript" src="NiftyLayout.js"></script>
Aparte del CSS, se enlaza con dos ficheros de JavaScript; uno es la librería de nifty corners, mientras que el segundo contiene la llamada específica para la página:
window.onload=function()
{
Nifty("div#menu a","small transparent top");
Nifty("ul#intro li","same-height");
Nifty("div.date");
Nifty("div#content,div#side","same-height");
Nifty("div.comments div");
Nifty("div#footer");
Nifty("div#container","bottom");
}
La opción same-height se ha empleado en dos casos: en las tres cajas de introducción y entre el contenido y la navegación. En este segundo caso, las esquinas redondeadas no son visibles, ya que están hechas con transparencia interior porque el contenido no tiene especificado un valor para background-color.
Ejemplo 13: NiftyLoad
Hemos llegado finalmente al último ejemplo. Una de las preguntas más frecuentes en cómo se consigue que coexista Nifty Corners con otros scripts, dado el hecho de que sólo es posible realizar una asignación a window.onload.
En el ejemplo 13, se muestra un mensaje de alerta, asociado a window.onload, antes de que se proceda al redondeado de esquinas. Esto se consigue gracias a la función NiftyLoad, que mantendrá las funciones asociadas previamente a window.onload. La sección de JavaScript, incluida en la página en esta ocasión, es la siguiente:
NiftyLoad=function()
{
Nifty("div#box","big");
}
Para conseguir que nifty corners funcione con otros scripts en la misma página, simplemente tienes que usar NiftyLoad en lugar de window.onload. Obviamente, la función podría ir incluso en un fichero externo, lo único importante es que los dos bloques de script de nifty corners, que son la librería y las llamadas específicas de la página, sean los dos últimos bloques de script de la sección head en la página. La función NiftyLoad también se puede usar cuando nifty corners sea el único script de la página, como en cualquiera de los ejemplos anteriores que hemos visto.
Resolución de problemas
Al crear Nifty Corners Cube he intentado mantener el script todo lo simple y robusto que he podido, y espero que haya inspirado a los lectores a lo largo de los ejemplos.
Los ejemplos fueron también una manera de probar la
compatibilidad entre navegadores, pero esto no garantiza que no nos
vayamos a encontrar con problemas.
Aunque no es necesario conocimiento de JavaScript, sí que
hace falta saberse manejar con CSS y HTML, y siempre es una buena
práctica validar el código. Si encuentras
problemas, lo primero que deberías hacer es eliminar
temporalmente nifty corners y ver si persisten. Un acercamiento de
desarrollo general que he usado al preparar los ejemplos de este
artículo, es escribir por completo el HTML y CSS antes de
añadir nifty corners a la página.
Dos características que fueron introducidas en esta
versión deberían simplificar el uso de Nifty
Corners. Los colores se detectan automáticamente, y se
pueden cambiar en el CSS sin necesidad de actualizar las llamadas de
JavaScript. El relleno, tanto vertical como horizontal, se mantiene
intacto. Especialmente en el relleno vertical, se sugiere especificar
un valor en píxeles al menos igual al tamaño de
las esquinas.
Los ejemplos deberían ser un buen punto de comienzo: una
cosa a tener siempre presente es que en algún caso he
empleado ID, pero si necesitas aplicar nifty corners
a más de un elemento en una página,
siempre deberías usar selectores de clase o de descendencia,
ya que los id en una página, de acuerdo con la
especificación de HTML, deben ser únicos.
Créditos, licencia y descarga
Me gustaría dar las gracias a David Lindquist por su ayuda en conseguir que las cosas fueran bien en Safari. La idea de las nifty columns vino inspirada por CSS balanced Columns, una manera muy ingeniosa para conseguir falsas columnas sin fondo.
Nifty Corners Cube se licencia bajo la licencia GNU GPL y fué publicado el 22 de marzo de 2006 en italiano e inglés.
Los ejemplos y código están disponibles para su descarga. ¡Que los disfrutes!
Traducción a
castellano: Jaime
Iniesta, 18 de abril de 2006.
URL de la traducción original: http://railes.net/tutoriales/css-nifty-corners-cube