14
Mar 07
Nifty Corners Cube - Bordes redondeados en CSS
Nifty Corners es una solución basada en CSS y JavaScript para obtener borders redondeados en nuestras páginas web. Se pueden usar en menus, botones, tabs, cajas de texto… etc.
Bueno, siempre se pudo hacer… que es lo novedoso de esto? El asunto es que con Nifty Corners se consigue el efecto de bordes redondeados sin utilizar imágenes.
Según se explica en el sitio web: Nifty Corners utiliza 3 componentes principales:
- niftycorners.js.
- niftycorners.css.
- la llamada javascript específica en cada página.
En este ejemplo: http://www.html.it/articoli/niftycube/nifty1.html, el código utilizado es:
<script type="text/javascript"> window.onload=function(){ <b>Nifty("div#box","big");</b> } </script>
Y este es el html:
<div id="box">
<h1>Nifty Corners Cube™</h1>
One call. Two parameters. Three sizes.</div>
<h1>Nifty Corners Cube™</h1>
One call. Two parameters. Three sizes.</div>
Donde, “div#box” es el nombre del div al que le queremos aplicar el efecto. Y “big”, es el tipo de efecto.
En el sitio web vas a encontrar muchos ejemplos de las posibles aplicaciones.
Categorías: CSS, JavaScript.
Porque cuando le pongo la propiedad border al div el borde sale cuadrado? pero el fondo del div no
bomby, en realidad el div sigue teniendo los bordes cuadrados. Lo que hace nifty es usar javascript para dibujar un borde redondeado del mismo color que el fondo. Pero no modifica los bordes del div.
Si necesitas ponerle bordes a un div que usa nifty, tal vez te sirva darle una mirada al ejemplo 11: http://www.html.it/articoli/niftycube/nifty11.html
Es un div dentro de otro.
un saludo
A mí me parece una “librería” buenísima que mejora notablemente el aspecto de las aplicaciones web. Seguramente le haga algunas mejoras, pero me parece una base excelente.