Foros del Web » Creando para Internet » CSS »

Tabla Esquinas redondeadas (SIN IMG)

Estas en el tema de Tabla Esquinas redondeadas (SIN IMG) en el foro de CSS en Foros del Web. ¡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 ...
  #1 (permalink)  
Antiguo 10/07/2007, 03:52
Avatar de Korku  
Fecha de Ingreso: noviembre-2003
Ubicación: En un lugar oscuro...
Mensajes: 692
Antigüedad: 13 años, 6 meses
Puntos: 5
Pregunta Tabla Esquinas redondeadas (SIN IMG)

¡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
__________________
Carpe diem quam minimum credula postero.


http://www.programador-freelance.es
  #2 (permalink)  
Antiguo 10/07/2007, 06:20
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: Tabla Esquinas redondeadas (SIN IMG)

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.
  #3 (permalink)  
Antiguo 10/07/2007, 08:12
Avatar de Korku  
Fecha de Ingreso: noviembre-2003
Ubicación: En un lugar oscuro...
Mensajes: 692
Antigüedad: 13 años, 6 meses
Puntos: 5
Re: Tabla Esquinas redondeadas (SIN IMG)

Cita:
Iniciado por alvlin Ver Mensaje
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
__________________
Carpe diem quam minimum credula postero.


http://www.programador-freelance.es
  #4 (permalink)  
Antiguo 10/07/2007, 09:30
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: Tabla Esquinas redondeadas (SIN IMG)

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.
  #5 (permalink)  
Antiguo 10/07/2007, 10:37
Avatar de marcelomdsc  
Fecha de Ingreso: junio-2007
Ubicación: Windsor, California.
Mensajes: 706
Antigüedad: 9 años, 11 meses
Puntos: 8
Re: Tabla Esquinas redondeadas (SIN IMG)

la unica forma sin imagenes es con javascript por ahora.
__________________
ginkgo.com.uy
  #6 (permalink)  
Antiguo 10/07/2007, 10:44
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 3 meses
Puntos: 770
Re: Tabla Esquinas redondeadas (SIN IMG)

Hola a todos.

Este enlace me parece interesante:

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

Saludos,
  #7 (permalink)  
Antiguo 10/07/2007, 11:10
Avatar de Korku  
Fecha de Ingreso: noviembre-2003
Ubicación: En un lugar oscuro...
Mensajes: 692
Antigüedad: 13 años, 6 meses
Puntos: 5
Re: Tabla Esquinas redondeadas (SIN IMG)

Cita:
Iniciado por marcelomdsc Ver Mensaje
la unica forma sin imagenes es con javascript por ahora.
¿Tienes un ejemplo?

Saludiños
__________________
Carpe diem quam minimum credula postero.


http://www.programador-freelance.es
  #8 (permalink)  
Antiguo 10/07/2007, 11:20
Avatar de marcelomdsc  
Fecha de Ingreso: junio-2007
Ubicación: Windsor, California.
Mensajes: 706
Antigüedad: 9 años, 11 meses
Puntos: 8
Re: Tabla Esquinas redondeadas (SIN IMG)

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
__________________
ginkgo.com.uy
  #9 (permalink)  
Antiguo 10/07/2007, 12:39
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.126
Antigüedad: 12 años, 3 meses
Puntos: 2041
Re: Tabla Esquinas redondeadas (SIN IMG)

Cita:
Iniciado por Korku Ver Mensaje
¿Tienes un ejemplo?
El blog de Smiley Cat tiene acá un entrada interesante, donde se citan los diversos métodos (incluído JavaScript) utilizados.
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #10 (permalink)  
Antiguo 13/07/2007, 05:06
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 4 meses
Puntos: 9
Re: Tabla Esquinas redondeadas (SIN IMG)

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 ::..
  #11 (permalink)  
Antiguo 13/07/2007, 05:28
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 4 meses
Puntos: 9
Re: Tabla Esquinas redondeadas (SIN IMG)

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 ::..
  #12 (permalink)  
Antiguo 13/07/2007, 05:40
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 4 meses
Puntos: 9
Re: Tabla Esquinas redondeadas (SIN IMG)

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!!
__________________
..:: moNTeZIon ::..
  #13 (permalink)  
Antiguo 17/07/2007, 03:33
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 14 años, 10 meses
Puntos: 7
Re: Tabla Esquinas redondeadas (SIN IMG)

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.
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com

Última edición por bhagat; 21/07/2007 a las 11:18
  #14 (permalink)  
Antiguo 05/06/2011, 22:32
 
Fecha de Ingreso: abril-2011
Ubicación: Castellon
Mensajes: 10
Antigüedad: 6 años, 1 mes
Puntos: 1
De acuerdo Respuesta: Re: Tabla Esquinas redondeadas (SIN IMG)

Cita:
Iniciado por AlvaroG Ver Mensaje
[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
  #15 (permalink)  
Antiguo 06/06/2011, 13:23
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 6 años, 11 meses
Puntos: 5
Respuesta: Tabla Esquinas redondeadas (SIN IMG)

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.
  #16 (permalink)  
Antiguo 06/06/2011, 14:10
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 7 años, 10 meses
Puntos: 137
Respuesta: Tabla Esquinas redondeadas (SIN IMG)

el post tiene casi 4 años... miren la fecha
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 12:38.