Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
jueves, 20 de septiembre de 2007
Si eres de los que, como yo, piensan que la moda de los bordes redondeados la ha impuesto gente que odia a los programadores y diseñadores de webs, nunca te ha convencido introducir (X)HTML sin carga semántica sólo para poder incluir estas filigranas en las esquinas de los DIVS o elementos de bloque similares, o no soportas crear imágenes redondeadas para las esquinas, es posible que te interese Nifty Corners Cube.

Se trata de una librería Javascript para redondear los bordes de elementos de bloque sin necesidad de crear imágenes ni nada parecido, sólo usando CSS y scripting. Además, no es intrusiva: si un navegador no soporta scripts o se trata de una versión no contemplada, el usuario simplemente verá sus bordes como siempre. Buena pinta, eh?

Y la forma de usarlo, fácil. En primer lugar, una vez descargado el archivo .zip y extraído en un directorio de la web, se coloca la referencia al script sobre la página (X)HTML como siempre:

<script type="text/javascript" src="niftycube.js"></script>


Desde ese momento ya podemos invocar desde Javascript a las funciones de la librería para que actúen sobre los elementos cuya presentación queremos modificar, por ejemplo así:

// Esto hace que al div con id="box"
// se le redondeen los bordes con
// esquinas grandes (10px):

Nifty("div#box","big");



Esta llamada, o mejor dicho, todas las llamadas que necesitemos para ajustar los efectos de nuestra página, pueden situarse en el evento onload de la misma, como se muestra a continuación. De todas formas, la propia librería ofrece un método alternativo, a través de la función NiftyLoad(), para cuando esto no sea posible.


<script type="text/javascript">
window.onload=function(){
Nifty("div.redondeadoGrande","big");
Nifty("div.redondeadoPeque","small");
}
</script>


En la función Nifty, el primer parámetro es el selector CSS al que se aplicará el borde (o efecto) deseado. Si no tienes claro qué es un selector, podrías echarle un vistazo a este post (selectores CSS), este (selectores CSS-II-), y este otro (selectores CSS-III).

Así, si indicamos el selector "div.redondeado" estaremos aplicando el efecto a todos aquellos divs cuya clase sea la indicada (class="redondeado").

El segundo parámetro es una palabra clave, a elegir entre una larga lista de opciones, algunas de ellas combinables. Aunque en la web del autor viene muy bien explicado con ejemplos, :


PalabraSignificado
tlesquina superior izquierda
tresquina superior derecha
blesquina inferior izquierda
bresquina inferior derecha
topesquinas superiores
bottomesquinas inferiores
leftesquinas izquierdas
rightesquinas derechas
all (default)las cuatro esquinas
noneno redondear las esquinas (útil para usar las nifty columns
smallesquinas pequeñas (2px)
normal (default)esquinas normales (5px)
bigesquinas grandes (10px)
transparentpermite crear esquinas transparentes con alias. Se aplica automáticamente cuando el elemento no tiene un color de fondo especificado.
fixed-heightse aplica cuando el elemento tiene un alto fijo especificado en su CSS
same-heightParámetro para nifty columns: todos los elementos identificados por el selector CSS tienen el mismo alto. Si el efecto se utiliza sin bordes redondeados, este parámetro se puede usar en conjunción con la palabra clave none.


En la web del autor hay multitud de ejemplos de uso que demuestran lo fácil que puede llegar a hacernos la vida. Por cierto, también he encontrado una versión en español.

Por último, comentar que la librería se distribuye bajo licencia GNU GPL, y lo podéis descargar en esta dirección.

Hala, a disfrutarlo.



Editado [2/11/07]: Si usas ASP.NET, es posible que te interese NiftyDotNet, un componente que encapsula Nifty Corners Cube para hacer aún más sencillo su uso.

9 Comentarios:

Anónimo dijo...

Hola, he llegado al blog buscando informacion sobre diseño de webs y me ha parecido muy interesante los articulos que publicas. Gracias por compartir tanta informaciòn.

Y de paso aunque se que no tiene nada que ver con el tema de este post, necesito ayuda con una cuestiòn sobre diseño de webs. ¿sabes como se puede meter una lupa en el interior de un input type=text? Lo he visto en muchas webs y queda muy profesional. Si me pudieras dar al menos una pista de lo agradecerìa.

Salu2 desde Vigo.

josé M. Aguilar dijo...

Hola, Joaquín. Ante todo gracias por comentar.

Si te he entendido bien, lo que pretendes es introducir en los cuadros de texto de un formulario web iconos, como muchos que se ven por ahí con lupas, teléfonos, etc. La verdad es que dan un aspecto muy profesional a los formularios.

El truco es jugar un poco con CSS, y establecer una imagen de fondo para el input type="text".

De todas formas, es posible que esto pueda interesar a más lectores, así que en unos días publicaré un post exclusivo sobre el tema.

Ah, y... ¡bienvenido a Variable Not Found!

Anónimo dijo...

Estarè atento, gracias!

josé M. Aguilar dijo...

Todo para tí, Joaquín :-)

Imágenes en cuadros de texto de formularios Web.

Un saludo.

Φ♠ HßM§ ƆhØmA§Φ♠ dijo...

bellexa de post y muy bueno el nombra jaja v not found te psaste en el lo de las curvas y n el name tio graxias por tu aporte...!

Anónimo dijo...

HOla,
Segui todo el post, pero no me funciono. Nada de lo que encontre hasta ahora me funciono...
:(
Con los break en css era una buena opcion, pero el explorer y el mozila los manejan diferentes... no me salio tampoco.
Alguna ayuda??

PD: No entiendo por que este java no me funciona.

josé M. Aguilar dijo...

Hola, anónimo.

La librería Nifty funciona bien, ¿qué problema te está dando?

Anónimo dijo...

Me parece muy bueno lo de las curvas pero te preguntare una cosa, primero es posible integrar este ejemplo de las curvas con drupal, segundo puedes explicarme mejor como se pueden quitar las esquinas , estoy trabajando con bloques del drupal y me interesa mucho esto al respecto.
Saludos

Roberto dijo...

Se ve de lujo y muy facil de implementar. Muchas gracias ;)