Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Diseño web | Promoción web | Ganar dinero
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

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

 Seguir navegando a partir aquí:
+ 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 Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Taller de Javascript

Dentro de Taller de CSS

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Javascript
+ Entrar en CSS


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestran 6 comentarios revisados

 Comentario de Christian González
17/8/06 
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/


 Comentario de Esteban
06/9/06 
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">

 Comentario de Dave
13/9/06 
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?

 Comentario de Dave
14/9/06 
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

 Comentario de Miguel
20/9/06 
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.


 Comentario de César
28/11/06 
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.

Añadir un comentario al artículo Añadir un comentario del artículo
 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 7 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Taller de Javascript
+Taller de CSS
Categorías
+Javascript
+CSS

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia