Esta semana, en el trabajo, me pasaron un diseño 'sencillo y rápido' que cuanto más miraba más degradados, esquinas redondeadas y 'detallitos varios' veía.
Hasta la fecha las dichosas esquinas las he hecho con imágenes (bien incluyendolas en celdas, como fondo de las mismas, o dentro de algún elemento HTML) pero debido a la cantidad de ellas que tenía el diseño, me decidí por buscar algo en Internet.
Por casualidad, estaba mirando el correo 🙂 y vi un mensaje en la Lista de Ovillo que hablaba precisamente del tema de las esquinas redondeadas. Entre todos los mensaje unos se decantaban por utilizar imágenes para hacerlas, y CSS para posicionarlas, y otros por CSS y Javascript. Como no veía muy clara la diferencia me puse a leer un rato sobre el tema, y trás un rato, me decanté por este último.
¿Por qué? Porque utilizando el método de las imágenes + CSS tienes que crear un número de imágenes igual a cuatro veces el número de elementos cuyas esquinas quieras redondear. Porque para hacer el posicionamiento, el primero método, utilizaba bastante elementos HTMl 'sin cerrar', produciendo con ello errores en la semántica del documento, como:
<p class='clase'><b class='clase2'></b></p>
Y, porque después de reflexionar, me acordé que de el método CSS+Javascript ya me había hablado mi gurú personal en esto del CSS y la accesibilidad, Marco Giacomuzzi
El método de creación de esquinas redondeadas con CSS+Javascript ha sido desarrollado por Alessandro Fulciniti y os remito a ella para ver toda la potencia del método. No lo dudéis y visitadla.
A pesar de que os voy a dar un ejemplo sencillo del uso del método de Alessandro, que él llama Nifty Corners, os recomiento encarecidamente que visitéis su web.
En el ejemplo vamos a redondear un div, llamado 'box'. Lo primero que hacemos es declarar el div a redondear:
<div id="box"> <h1>Nifty Corners Cube™</h1> <p>Se acabaran las ñapas</p> </div>
El siguiente paso es incluir la llamada a la función que se encargará del redondeo del div (para ver las opciones visita la página del autor). Recuerda que antes de hacer la llamada, a la función que realiza el redondeo, has de incluir el fichero javascript que con tiene a dicha función, Nifty().
<script type="text/javascript">
window.onload=function(){
Nifty("div#box");
}
</script>
Para acabar el proceso, dale un color de fondo al elemento a redondear desde la hoja de estilos.
div#box{
width: 18em;
padding: 20px;
margin:0 auto;
background:#FFA509;
color:#000;
}
Desde este momento debieras estar viendo un div en medio de la pantalla con las esquinas redondeadas. Si por cualquier motivo no funcionase, verifica que las rutas de los ficheros que se incluyen -requiren- estén bien. Además, has de vigilar que el fichero niftyCorners.CSS esté donde indican las líneas de la función AddCSS(), que tienes en la línea 32 del fichero niftycube.js
Recuerda, con estos tres sencillos pasos has redondeado un elemento HTML:
- Creación del elemento a redondear.
- Llamada a la función de redondeo, Nifty()
- Definición el estilo del elemento a redondear.
Espero que el método os sea tan útil como me ha sido a mi
Hice todo tal cual describes y no me sale, es mas el texto sale trunco, no sale el principio de la cadena “Nifty… “ sale como “ifty… “
Hola Isaac,
me imagino que estés hablando del ejemplo propuesto. Si el texto está correctamente escrito como código HTML, vigila que el elemento ‘redondeado’ tenga un padding adecuado. A veces sucede que, al no tenerlo configurado o al estarlo mal ajustado, provoca lo que tu dices, que oculte parte de los elementos contenidos por él. Prueba y dinos, ciao.
Pa k pu** tu ejemplo, no sirve ni mier**, ademas tu eres el pendejo, me cae que eres desordenado y por eso buscastes esta mier**, ademas eres huevon por no querer hacer imagenes e incluirlas en tablas, o mas facil div dentro de div y te solucionas todo…
pinche put* de mier** chinga a tu retropu**madre…
Hola Papá,
siento que el artículo no te gustase pero, como tú siempre me enseñaste, hay que ser más tolerante.
Quizás se podrían decir cosas sobre la calidad del texto pero nadie lo puede hacer sobre la efectividad de lo que en él se cuenta. Y esto no lo digo yo, sino Google [http://www.google.es/search?hl=es&q=nifty+corners]
P.D. sobre lo último que comentas: si lo hago, ¿quién sería el cornudo?
Me funciona.
También hay otros scripts… prueba glossy.js. Está por ahí para descargar, y hay manuales. Y sin java ni imágenes… prueba http://www.spiffycorners.com
Hay muchas formas de hacerlo, pero sólo una de ignorar a tu padre.
Hola Jorge,
a la hora de redondear elementos hay tantas soluciones como programadores pero, por lo que veo, glossy es una librería para redondear imágenes mientras que Nify Corner, así como otras soluciones, permiten redondear otros elementos HTML, lo que quizás de algo más de juego.
Date un paseo por la Web de NiftyCorners para ver las actualizaciones [1] o para ver su versionado usando jQuery [2]
[1] http://www.html.it/articoli/niftycube/index.html
[2] http://dev.jquery.com/~paul/plugins/nifty/example.html
como lo posteaste no me funciono, pero revisando la pagina del creador, creo que te falto esto 😉
<script type=“text/javascript” src=“niftycube.js”></script>
muchas gracias!, realmente me ayudo mucho, hacerlo con imagenes es un real lio, esto te soluciona la vida 😀
jejejejeje ahora me encontre con un problema que no logro solucionar. Intento mover el div de los border redondeados con los parametros top, bottom, left, right en CSS, pero no se mueve, se mantiene en el centro, logre bajarlo pero con unos <br> xDD.
Alguna ayudita?
Hola hector,
gracias por el aporte que haces, cierto es que faltaba de incluir el fichero con la librería de Nifty. Sobre tu problema, si nos dejas ver el código quizás te puedamos echar una mano 🙂