Tabla Esquinas redondeadas (SIN IMG)

[Korku]

¡Hola!

¿Existe alguna propiedad CSS que permita cambiar las esquinas de una tabla o de una celda misma sin la ayuda del truco de usar imágenes como tal ponen en los ejemplos?

Saludiños

[AlvaroG]

En CSS3, existe border-radius. Pero el soporte para CSS3 no es universal, de hecho es bastante limitado actualmente.
Para navegadores basados en Gecko (firefox), existe -moz-border-radius que se comporta de forma similar.

Por ahora, entonces, hay que usar imágenes o soluciones como NiftyCube.


Saludos.

[Korku]

Iniciado por alvlin

En CSS3, existe border-radius. Pero el soporte para CSS3 no es universal, de hecho es bastante limitado actualmente.
Para navegadores basados en Gecko (firefox), existe -moz-border-radius que se comporta de forma similar.

Por ahora, entonces, hay que usar imágenes o soluciones como NiftyCube.


Saludos.

¿Qué navegadores actuales son compatibles con la propiedad border-radius?

Saludiños

[AlvaroG]

Por lo que encontré acá http://www.the-art-of-web.com/css/border-radius/
no hay soporte para la "original", mientras que los basados en Gecko usan -moz-border-radius y los basados en webkit (Safari, por ejemplo) usan -webkit-border-radius.


Saludos.

[marcelomdsc]

la unica forma sin imagenes es con javascript por ahora.

[JavierB]

Hola a todos.

Este enlace me parece interesante:

http://www.cssplay.co.uk/boxes/

Saludos,

[Korku]

Iniciado por marcelomdsc

la unica forma sin imagenes es con javascript por ahora.

¿Tienes un ejemplo?

Saludiños

[marcelomdsc]

hay una tecnica muy buena que se llama 'nifty corners', pero es en ingles...aqui te encontre la version traducida, pero no la he leido en espanol...asique no se como es, aunque la parte tecnica tendria que ser lo mismo...

link

[Daniel Ulczyk]

Iniciado por Korku

¿Tienes un ejemplo?

El blog de Smiley Cat tiene acá un entrada interesante, donde se citan los diversos métodos (incluído JavaScript) utilizados.

[moNTeZIon]

Hola chicos!
He hechado mano a esta solución de NiftyCorners, y me sorprendí mucho al principio, pero luego le encontré un "punto" que no me gustó nada, y de hecho creo que no voy a conseguir el objetivo, puesto que creo que es una limitación de esta solución. Me explico.
A todas las capas que vienen en los ejemplos, si probais de darle un height superior al que ya tengan (porqué si no no vais a notar nada, claro) vereis como los dos bordes redondeados inferiores se mantienen en la misma posición en la que estaban y la capa se alarga hacia abajo, pero mostrando los bordes inferiores "reales" en forma cuadrada.
En resumen, en capas que se les especifique un height, no se puede hacer uso de esta solución.
¿O si? Si alguien ve la luz se lo agradecería.
Un saludo!

[moNTeZIon]

Yeeeee!!! Con un truquilo muy simple he conseguido lo que quería.
La cosa está en poner otra capa por dentro de la redondeada, y es a la capa interior a la que le damos un height, y tambien en la que metemos el contenido. Ah! Y el width hay que ponérselo a las dos. Si solo se le pone a la interior, la capa exterior (la redondeada) se alarga hasta la derecha, como cuando usamos un DIV tal cual, sin decirle width ni ninguna otra propiedad.
Bueno! A disfrutar!
Un saludo a todos!

[moNTeZIon]

Bien, ahora hice la prueba de colocar la capa con los bordes redondeados por encima de otra capa con una imagen de fondo, y qué chasco al ver que la parte de la esquina redondeada que debería permitir ver la parte de la imagen que hay detrás, se ve de color blanco.
Por lo visto, NiftyCorners viene con una de las opciones que se llama "transparent", que en un principio imaginé que existía precisamente para este propósito, pero no. Sigue mostrando el fondo de las esquinas en blanco (la parte que debería ser transparente).
Saben si se puede conseguir este efecto con NiftyCorners o con alguna otra solución parecida?
Un saludo!!

[bhagat]

Una herramienta online, muy simple e intuitiva para crear lo que quieres, (sin IMG y sin JS).

http://www.spiffycorners.com/

Aunque también hay otras que puedan servir según lo que andes buscando (sin IMG con JS):

http://www.curvycorners.net/


Una muy fácil también (con IMG, aunque las genera online)

http://www.neuroticweb.com/recursos/css-rounded-box/

si quieres ajustar a tu gusto las imágenes de las esquinas tienes esta herramienta:

http://wigflip.com/cornershop/

Y esta otra herramienta online muy completa ( con IMG )

http://www.roundedcornr.com/


Si quereis algo mas manual, escribir código CSS , etc. también podéis mirar:

http://www.cssplay.co.uk/boxes/snazzy.html

Y esta que aunque parezca mentira esta hecha SOLO con CSS2

http://www.cssplay.co.uk/boxes/krazy.html

En realidad esta web: http://www.cssplay.co.uk/ no tiene desperdicio, con un uso muy avanzado y original de las CSS



En fin amigos/as espero que os sirva algunas de las webs que os he pasado.

[nmsdesign]

Iniciado por AlvaroG

[url]http://www.the-art-of-web.com/css/border-radius/[/url]

Genial aporte muchísimas gracias! es muy fácil, intuitivo y además con la versión nueva de explorer también funciona!!!

Se acabó lo de ir recortando esquinitas jeje

[rossijona]

No existe demasiados camionos, la gran mayoría desembocan en lo mismo.

Los script lo que hacen es aplicar css3...

y lo otro es usar capaz anidadas, que quiere decir esto.

usas una capa que contendrá 2 capas más dentro, esas dos capaz contienen las imágenes que hacen los bordes osea una imagen con todo un costado de tu cuadro y la otra con el otro costado o bien arriba y abajo.

Lo que haces con esas dos capas es tirarlas contra las esquinas o bien contra el top y el bottom, es muy sencillo y te recomiendo que lo intentes, una ves puedas ya no tendrás problemas.

Espero que tengas suerte.

[alexk]

el post tiene casi 4 años... miren la fecha