« anterior | siguiente »

Home > 2006 > Septiembre > Martes, 05 de Septiembre 2006 > curvyCorners: esquinas redondeadas mediante Javascript
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Mar05Sep2006

curvyCorners: esquinas redondeadas mediante Javascript

08:43 H (CET)| Temas: Javascript

curvycorners.pngAhora que están tan de moda las esquinas redondeadas, vemos una librería javascript que nos ofrece esta posibilidad sin tener que usar imágenes.

Tan solo identificando las capas que queremos modificar y ejecutando un pequeño script, redondearemos las esquinas de nuestras capas, ya tengan borde o imagen de fondo, mostrando además efecto anti-aliasing.

curvycorners2.png

Me parece que nos va a facilitar la vida a muchos.

curvyCorners

Vía / Bitelia

Relacionados

Feedback (8) » Formulario

1. Luciano A. Ferrer ~ Jueves, 07 Sep 2006 | 04:21H:

alguien puede explicar cómo funciona?

no me refiero a cómo implementarlo, sino a qué hace en si el script...

2. Luis ~ Jueves, 07 Sep 2006 | 08:40H:

Hola Luciano.

No lo he mirado con mucho detenimiento, pero parece que lo que hace es modificar la capa original dejando tan solo los bordes laterales, y luego se crea varias capas que colocarán encima o debajo de la capa original que crearan el efecto de esquina redondeada (usando márgenes laterales para separar el borde de la posición original).

El tema del background, que a mí me ha gustado bastante, se crea subiendo el fondo de la capa principal tantos pixels como tenga el radio y luego lo mismo para las capas que componene la esquina redondeada.

Bueno, es algo corto, pero creo que se entiende algo.

Saludos

3. Luciano A. Ferrer ~ Viernes, 08 Sep 2006 | 00:59H:

Muchisimas gracias por la explicación luis!

4. Luciano A. Ferrer ~ Sábado, 09 Sep 2006 | 01:34H:

una duda, usar esto no es como matar moscas a cañonazos?

5. Luis ~ Sábado, 09 Sep 2006 | 02:29H:

Pues la verdad es que sí, porque si que es cierto que queda genial usar un script para crearte esquinas redondeadas, que es muy automático, pero tampoco hay que pasarse (creo yo) y si usas imágenes de fondo, pues como que no va a pasar nada.

Además, la gente que es de diseño muy estricto, no creo que le haga mucha gracia este script, porque modifica la posición y el tamaño (tampoco demasiado, pero si se puede apreciar en la imagen de arriba), por lo que el diseño puede verse alterado.

También es cierto que para la gente que no sabe de diseño, o de Photoshop, el usar el script le resuelve algo que quizás no fuera capaz de hacer. No sé, mucha gente con la que trabajo, sabe programar, pero no sabe nada de diseño, por lo que hacerte un png o un gif con transparencia y redondeado puede implicar muchas horas de trabajo.

6. edd ~ Lunes, 25 Sep 2006 | 22:55H:

Hola.

Funciona muy bien, sobretodo para que vean en IE los borders redondeados (en firefox esta implementado eso en css). En todo caso leyendo y leyendo esa web he seguido las instrucciones para poder redondear los bordes de distintos divs en una misma pagina y me ha sido imposible. Incluso las instruciones que dan en el foro al parecer nadie las entiende, es una pena esto ultimo.

7. Luis ~ Martes, 26 Sep 2006 | 09:43H:

Hola Edd.

Yo he probado usar dos divs y si me ha funcionado, realmente lo que he hecho ha sido copiar el div dos veces, pero teniendo el mismo class, y no me ha dado problema. El único problema que he encontrado ha sido que se solapaban las capas, pero poniendo un br se ha solucionado porque las he separado.

Si quieres, pásanos un ejemplo y lo miramos.

Saludos
Luis

8. Jesus ~ Viernes, 27 Jul 2007 | 13:17H:

Yo lo he probado con 3 o 4 divs me funciona de escandalo lo malo es el explorador mozilla, que cuando bajas el scroll ( si la pagina ocupa mas del alto del explorador) parece que val un poco lento en el ie va perfecto! haber si alguien lo ha aprecidado

Gracias y un saludo a todos los que hacen posible que el programador ahorre horas de trabajo! jeje

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)