jueves, 2 de julio de 2009

Redondear bordes de un DIV o capa

Hay 3 formas que yo sepa, la primera y la cual no explicare es hacerlo logicamente con imagenes con los bordes ya hechos, de esta forma no es productiva ya que tardará más en cargar la web.

La segunda forma y solo útil para Mozilla sería poniendole al css o a su style del DIV esto:
-moz-border-radius:20px 20px 20px 20px cada uno de los '20px' es uno de los 4 bordes.

La forma más utilizada es con Nifty, un javascript que redondea los bordes.

Se añade el script en la pagina web donde desees redondear los bordes:

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

Con javascript pones como deseas redondearlos, un ejemplo sería una función que se carga justo con la pagina de esta forma, de esta forma cuando se cargue la web se pondrán redondos los bordes:

<script>
window.onload=function(){
Nifty("#div1","big top");
Nifty("#div2","big top");
Nifty("#div3","same-height");
Nifty("#div4","same-height big bottom");
}
</script>


div1, div2 , etc... son las id de los divs.

La cosa es ir probando, mejor os paso la web donde hay miles de ejemplo y os podeis descargar de ahi los ficheros.

http://www.html.it/articoli/niftycube/index.html

Al final de la web hay un 'download' para bajaros los archivos y los ejemplos.

Para cualquier duda preguntarme.

1 comentario:

  1. lo probaré, si funciona sería perfeco y sencillo, quiero hacerte una pregunta,
    cual es la desventaja de utilizar pluyins para necesidades como esta o mas complejas y elementales como es nose una validacion por ejemplo, es recomendable hacer esto a puro punche de programacion, o lo dejamos que lo haga todo nuestros pluyins, extenciones, hay diferencias??, que metodo es mas eficiente??', gracias

    ResponderEliminar