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.
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:
Un archivo Javascript
Un archivo CSS
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
|
