Hacker of the Web
Tus ideas en código!...y mas

Redondear bordes sin imágenes II

Pues ya habíamos explicado en otra entrada una forma fácil de redondear las esquinas con un poco de CSS pero gracias a un comentario otra forma de redondear las esquinas sin necesidad de código Mozilla, es decir mas estandarizado y que se puedan visualizar las esquinas en casi cualquier navegador.

Lo que necesitas hacer seguir estos pasos:


/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



Antes de comenzar necesitas descargarte y alojar donde prefieras el script redondear.js que viene incluido en ente zip.

[1] Despues tienes que entrar en Edición de HTML y colocar antes de la etiqueta </head>:
<script type="text/javascript" src="URL-redondear.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty(".cajaredonda");
}</script>

[2] Una vez realizado eso, de igual manera que la vez pasada donde quieras que se redondeen las esquinas deberás colocar:

class="cajaredonda"


y el código podría quedar algo mas o menos asi:
<span style="background:#ff0000;color:#000000" class="cajaredonda">aqui el texto</span>


Con esto tus cajas o cualquier etiqueta en la que quieras, podrá tener su esquinas redondeadas.

[MODIFICACIONES] Solo si eres un usuario avanzado, o te interesa quebrarte la cabeza un poco aquí tenemos mas opciones de redondeo de esquinas:

[+/-] En la llamada del script:


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

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

Sólo 1 comentario !

Gabriel C dijo...

Hola master solo para informarte que haciendo el test de tus scripts,tanto del primer post como de éste último usando javascript los resultados son los mismos.

safari 3.1.1 [redondeo ok],
mozilla 3.0.5 [redondeo ok],
Netscape 6.2.3 [redondeo ok],
Opera 9.60 [sin redondeo],
internet explorer 7 [sin redondeo]

De igual manera gracias por la info.
Saludos


Página Principal
Arriba