Foros del Web » Creando para Internet » CSS »

[aporte]bordes redondiados en CSS

Estas en el tema de [aporte]bordes redondiados en CSS en el foro de CSS en Foros del Web. Ola amigos bueno e buscado esto en muchos lugares ya que no es fácil de encontrar les coloco los códigos para que ustedes los utilicen ...

  #1 (permalink)  
Antiguo 11/01/2010, 16:28
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Información [aporte]bordes redondiados en CSS

Ola amigos bueno e buscado esto en muchos lugares ya que no es fácil de encontrar les coloco los códigos para que ustedes los utilicen
Código CSS:
Ver original
  1. border-radius: 10 px;
  2.     -moz-border-radius:10px;
  3.     -webkit-border-radius:10px;
es bueno colocar estos 3 codigos pues uno es para el explorador inadactado y los otros dos son uno para el resto de exploradores y otro para cuando los ven desde mobiles

espero que les haya servido
  #2 (permalink)  
Antiguo 11/01/2010, 17:02
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: [aporte]bordes redondiados en CSS

Hola, la verdad que es un buen codigo pero como ya muchos sabran, no funciona para IE.

asi que la mejor opcion siempre seguira siendo utilizar imagenes como borde ^^

Suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #3 (permalink)  
Antiguo 12/01/2010, 01:46
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: [aporte]bordes redondiados en CSS

puedes hacerlo funcionar en IE usando un pequeño archivo .htc (5kb).

La única pega es que si le aplicas bordes-radius a un elemento <a> ya no funcionará la pseudoclase :hover

Ayer preguntaba como solucionarlo en este tema (hay un ejemplo que funciona bien en IE6+):
http://www.forosdelweb.com/f53/usar-...ver-ie-767942/

La ventaja de comenzar a usar esta técnica es que es el futuro de los bordes redondeado para todos los exploradores.
Aunque desgraciadamente IE nos haga esperar 3-4 años más... pero en algunos años ya no usaremos ni imagenes ni js para hacer estos bordes.

Última edición por chefnelone; 12/01/2010 a las 02:24
  #4 (permalink)  
Antiguo 12/01/2010, 03:03
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por pilopi123 Ver Mensaje
Ola amigos bueno e buscado esto en muchos lugares ya que no es fácil de encontrar les coloco los códigos para que ustedes los utilicen
Código CSS:
Ver original
  1. border-radius: 10 px;
  2.     -moz-border-radius:10px;
  3.     -webkit-border-radius:10px;
es bueno colocar estos 3 codigos pues uno es para el explorador inadactado y los otros dos son uno para el resto de exploradores y otro para cuando los ven desde mobiles

espero que les haya servido
Ola, inadactado, mobiles Mi no entenderte.
__________________
Revisa las FAQ's antes de disparar.
  #5 (permalink)  
Antiguo 12/01/2010, 10:31
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por Impostor Ver Mensaje
Ola, inadactado, mobiles Mi no entenderte.
es que aca hablar asi perdon no escribir bien
  #6 (permalink)  
Antiguo 12/01/2010, 10:47
 
Fecha de Ingreso: febrero-2009
Mensajes: 443
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: [aporte]bordes redondiados en CSS

opera 10 ,firefox 3.5,safari4 i chrome 3 lo soportan
puedes limitar a internet explorer con php o javascript que no puedan acceder

yo estoy haciendo una pagina con border-radius
el problema es que no es estandar oficial
para firefox tienes que poner -moz
para opera,safari,chorme que poner -webkit
tampoco se puede validar con css porque no es estándar me parece te va a mostrar como error
pero dentro de un tiempo solo tendrás que borrar el -moz i -webkit i tanbien te vas ahorrar unas cuantas linias ahora necesitas dos
  #7 (permalink)  
Antiguo 12/01/2010, 13:32
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: [aporte]bordes redondiados en CSS

¿y los bordes redondeados como serían?¿igual que los redondiados pero mas cuadrados?
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #8 (permalink)  
Antiguo 12/01/2010, 17:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: [aporte]bordes redondiados en CSS

Hola:

Cita:
Iniciado por pilopi123 Ver Mensaje
es que aca hablar asi perdon no escribir bien
Por lo que he visto eres muy joven así que esa excusa no me parece válida. Quizá algún día tengas clientes que te encarguen que les hagas su página web ¿Piensas hacerselas así? ¿Te pagarán? Yo no lo haría.

Una curiosidad ¿en el mar teneis olas u holas? ¿ves la diferencia?

Estás a tiempo, esfuerzate un poquito.

Saludos.

  #9 (permalink)  
Antiguo 12/01/2010, 17:41
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: [aporte]bordes redondiados en CSS

#8 jeje...

como dice "masterojitos" la mejor opcion es imagenes :S... si queremos algo cross-browser pero sobre todo VALIDO...
eh usado de todo y solo pierdes tiempo... Jquery, prototype etc...
pero claro si no te importa mucho la validacion es una buena opcion el fix que pone en ese post chefnelone #3
chao! y gracias por el dato
  #10 (permalink)  
Antiguo 12/01/2010, 20:15
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



Por lo que he visto eres muy joven así que esa excusa no me parece válida. Quizá algún día tengas clientes que te encarguen que les hagas su página web ¿Piensas hacerselas así? ¿Te pagarán? Yo no lo haría.

Una curiosidad ¿en el mar teneis olas u holas? ¿ves la diferencia?

Estás a tiempo, esfuerzate un poquito.

Saludos.

la verdad soy muy joven tengo 13 ya estoy consiguiendo clientes pero hay voy a utilizar un diccionario para escribir y primero todos los textos en word y después si a el editor web de todas maneras nos salimos un poco de contexto pero si la verdad es que esa no es la excusa perdón por todo
  #11 (permalink)  
Antiguo 12/01/2010, 20:16
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: [aporte]bordes redondiados en CSS

no la verdad es que esta característica sera incluida en el css 3 o eso creo pues segun lo que lei es que esta ya incluida
  #12 (permalink)  
Antiguo 12/01/2010, 20:28
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: [aporte]bordes redondiados en CSS

un consejo si estas buscando clientes no digas tu edad...
no es por dudar por tu capacidad sino por la seriedad, y lo legal... facturas, menor de edad etc...

y si es parte de CSS3... pero vamos hay un mundo en el CSS3 y muchos ya sabemos... el problema esta en la estandarizacion y lo cross-browser (FCK IE).
  #13 (permalink)  
Antiguo 12/01/2010, 23:41
(Desactivado)
 
Fecha de Ingreso: octubre-2009
Mensajes: 109
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: [aporte]bordes redondiados en CSS

I dont know
  #14 (permalink)  
Antiguo 13/01/2010, 02:13
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por alexk Ver Mensaje
... es una buena opcion el fix que pone en ese post chefnelone #3
chao! y gracias por el dato
Si lo usas y descubres como hacer que funcione el :hover sobre un elemento <a> con border-radius aplicado, te agredecería que me pases el dato (aquí o en el otro tema donde abrí con esa pregunta) porque llevo días dándole vueltas a esto y no lo puedo ver...


Cita:
Iniciado por alexk Ver Mensaje
...si no te importa mucho la validacion
Si validas el ejemplo que he dejado verás que no tiene problemas con la validación: Ejemplo

Última edición por chefnelone; 13/01/2010 a las 02:21
  #15 (permalink)  
Antiguo 13/01/2010, 03:52
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por pilopi123 Ver Mensaje
voy a utilizar un diccionario para escribir y primero todos los textos en word y después si a el editor web de todas maneras nos salimos un poco de contexto pero si la verdad es que esa no es la excusa perdón por todo
Si usas firefox, este plugin te puede ayudar.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #16 (permalink)  
Antiguo 13/01/2010, 09:58
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Si lo usas y descubres como hacer que funcione el :hover sobre un elemento <a> con border-radius aplicado, te agredecería que me pases el dato (aquí o en el otro tema donde abrí con esa pregunta) porque llevo días dándole vueltas a esto y no lo puedo ver...
mmm mejor usa imagenes e slo ideal... si quieres compatibilidad entre navegadores y sobre todo VALIDO.

Cita:
Si validas el ejemplo que he dejado verás que no tiene problemas con la validación
error... por que validas el HTML supongo... y como tienes el CSS en ese mismo archivo solo te valida eso el HTML ahora valida el CSS (yo suelo usar mi "style.css" aparte del XHTML)

Código:
La propiedad behavior no existe :  url(ie-border-radius.htc)
35 	a 	La propiedad -moz-border-radius-bottomleft no existe : 5px
36 	a 	La propiedad -moz-border-radius-bottomright no existe : 5px
37 	a 	La propiedad -moz-border-radius-topleft no existe : 5px
38 	a 	La propiedad -moz-border-radius-topright no existe : 5px
49 	a 	La propiedad border-radius no existe en CSS versión 2.1 pero existe en : 5px
chao y suerte
  #17 (permalink)  
Antiguo 13/01/2010, 12:21
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: [aporte]bordes redondiados en CSS

si es asi todavia no sirve muy bien solo en el ie pero bueno ami me muestra el mismo error
Código CSS:
Ver original
  1. La propiedad behavior no existe :  url(ie-border-radius.htc)
  2. 35  a   La propiedad -moz-border-radius-bottomleft no existe : 5px
  3. 36  a   La propiedad -moz-border-radius-bottomright no existe : 5px
  4. 37  a   La propiedad -moz-border-radius-topleft no existe : 5px
  5. 38  a   La propiedad -moz-border-radius-topright no existe : 5px
  6. 49  a   La propiedad border-radius no existe en CSS versi&#243;n 2.1 pero existe en : 5px
  #18 (permalink)  
Antiguo 13/01/2010, 12:22
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por alexk Ver Mensaje
un consejo si estas buscando clientes no digas tu edad...
no es por dudar por tu capacidad sino por la seriedad, y lo legal... facturas, menor de edad etc...

y si es parte de CSS3... pero vamos hay un mundo en el CSS3 y muchos ya sabemos... el problema esta en la estandarizacion y lo cross-browser (FCK IE).
la verdad yo creo que los unicos clientes que voy a tener por ahora va se las 3 webs de mi papa si es que la diseñadora de el se va y si se da cuenta que lo estafan
  #19 (permalink)  
Antiguo 13/01/2010, 12:40
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: [aporte]bordes redondiados en CSS

Cita:
si es asi todavia no sirve muy bien solo en el ie pero bueno ami me muestra el mismo error
lo que puedes hacer poner un comen tario condicional y fuera de tu hoja de estilos
Código HTML:
Ver original
  1. <!--[if IE 6]>
  2. <style type="text/css">a{behavior: url(ie-border-radius.htc);}</style>
  3. <![endif]-->
lo malo que segun veo... cada que quieres usar el redondeado hay que llamarlo... pero bueno de esta manera pasa el validador...

en realidad da igual si usas el comentario condicional o no... el punto es tener esa parte fuera de tu CSS para que valide....

encuanto a tus clientes tranqui... ya luego cogeras... no hay prisa... chao y suerte!...
  #20 (permalink)  
Antiguo 13/01/2010, 17:10
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por alexk Ver Mensaje
lo que puedes hacer poner un comen tario condicional y fuera de tu hoja de estilos
Código HTML:
Ver original
  1. <!--[if IE 6]>
  2. <style type="text/css">a{behavior: url(ie-border-radius.htc);}</style>
  3. <![endif]-->
lo malo que segun veo... cada que quieres usar el redondeado hay que llamarlo... pero bueno de esta manera pasa el validador...

en realidad da igual si usas el comentario condicional o no... el punto es tener esa parte fuera de tu CSS para que valide....

encuanto a tus clientes tranqui... ya luego cogeras... no hay prisa... chao y suerte!...
no si unos me contactaron para hosting y diseño pero son unos tacaños quieren que diseño y hosting por 15 dolares pero mi diseño cuesta 50 dolares
  #21 (permalink)  
Antiguo 13/01/2010, 17:21
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: [aporte]bordes redondiados en CSS

50? wow todo un profesional que bien... chao
  #22 (permalink)  
Antiguo 13/01/2010, 17:41
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: [aporte]bordes redondiados en CSS

Hola:

Cita:
Iniciado por pilopi123 Ver Mensaje
no si unos me contactaron para hosting y diseño pero son unos tacaños quieren que diseño y hosting por 15 dolares pero mi diseño cuesta 50 dolares
¡Qué Dios nos coja confesados!

Saludos.

  #23 (permalink)  
Antiguo 13/01/2010, 19:02
j21
 
Fecha de Ingreso: enero-2010
Mensajes: 7
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: [aporte]bordes redondiados en CSS

Muy bueno, ya lo conocia pero no funciona para firefox
  #24 (permalink)  
Antiguo 13/01/2010, 19:08
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Muy bueno, ya lo conocia pero no funciona para firefox
Código CSS:
Ver original
  1. -moz-border-radius:10px;
:S?
  #25 (permalink)  
Antiguo 13/01/2010, 19:27
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
De acuerdo Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por j21 Ver Mensaje
Muy bueno, ya lo conocia pero no funciona para firefox
por eso coloque 3 uno para el internet explorer y uno para cada tipo de explorador 2 para safari y chrome y otro que es el que te dio mi compa -moz-border-radius
  #26 (permalink)  
Antiguo 14/01/2010, 07:05
 
Fecha de Ingreso: noviembre-2009
Mensajes: 66
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: [aporte]bordes redondiados en CSS

Hola

justo estoy probando una opcion de bordes redondeados.

hay muchisimas variaciones con el mismo fin. yo elegí una muy sencilla pero funciona para todos los browsers, un css y un script.

lo pueden ver aqui
http://www.netzgesta.de/corner/
es muy versatil !

FUNCIONA PERFECTAMENTE !

ahora queria consultarles lo siguiente ! en wordpress tenemos alignleft , y lo estoy usando para algunas imagenes.... COMO PODRIA AGREGAR o escribir un SEGUNDO CSS para una misma imagen ??? porque tengo el alignleft, y debo sumar el de bosrdes redondeados que es CORNER

yo puse asi en el editor del post
<img class="alignleft corner"

Lo he puesto asi, y probé de muchas maneras, y no me responde los dos al mismo tiempo, es decir, o me responde la alineacion izquierda o los bordes, y no las dos cosas. EL TEXTO QUEDA POR DEBAJO DE LA IMAGEN, y NO AL LADO

es decir sume la que ya esta por defecto en wordpress al nuevo que es preciso para redondear bordes,, NO SE Si deber colocarse asi dos CSS que tienen funciones distintas


alguiein sabe decirme como incluir otros CSS a una misma imagen ?

graciassssssssssssssssssssssssss!!!!!!!!!!!!!!!!!! !!!!!!!

Danilo

Última edición por DaniloWeb; 14/01/2010 a las 08:06
  #27 (permalink)  
Antiguo 14/01/2010, 08:06
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: [aporte]bordes redondiados en CSS

Cita:
Iniciado por DaniloWeb Ver Mensaje
Hola

justo estoy probando una opcion de bordes redondeados.

hay muchisimas variaciones con el mismo fin. yo elegí una muy sencilla pero funciona para todos los browsers, un css y un script.

lo pueden ver aqui
[url]http://www.netzgesta.de/corner/[/url]
es muy versatil !

FUNCIONA PERFECTAMENTE !

ahora queria consultarles lo siguiente ! en wordpress tenemos alignleft , y lo estoy usando para algunas imagenes.... COMO PODRIA AGREGAR o escribir un SEGUNDO CSS para una misma imagen ??? porque tengo el alignleft, y debo sumar el de bosrdes redondeados que es CORNER

yo puse asi en el editor del post
<img class="alignleft corner"

Lo he puesto asi, y probé de muchas maneras, y no me responde los dos al mismo tiempo, es decir, o me responde la alineacion izquierda o los bordes, y no las dos cosas.

es decir sume la que ya esta por defecto en wordpress al nuevo que es preciso para redondear bordes,, NO SE Si deber colocarse asi dos CSS que tienen funciones distintas


alguiein sabe decirme como incluir otros CSS a una misma imagen ?

graciassssssssssssssssssssssssss!!!!!!!!!!!!!!!!!! !!!!!!!

Danilo
mira amigo la verdad esos script yo prefiero no utilizarlos ya que vuelven pesado el archivo lo unico malo de este script es que solo funciona en los ultimos IE 7 y 8 y en el resto de exploradores
  #28 (permalink)  
Antiguo 14/01/2010, 08:25
 
Fecha de Ingreso: noviembre-2009
Mensajes: 66
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: [aporte]bordes redondiados en CSS

Hola !! gracias por responder

en IE6 funciona, es el que uso yo. Despues en el resto tambien , como firefox, opera, safari, etc

el tema es que no sé unir dos CSS para una misma imagen

Está el css de las propeidades de la imagen, y tambien hay otro css que es el de imagenes redondeadas, que se llama "corner" y esta asociado al script


No puedo hallar uno que funcione exclusivamente con CSS y para todoas los browsers
  #29 (permalink)  
Antiguo 14/01/2010, 09:06
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: [aporte]bordes redondiados en CSS

mira wey sobre tu duda por que no colocar el css del cornet al style de tu web asi ya tendrias solo un css
  #30 (permalink)  
Antiguo 14/01/2010, 09:22
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: [aporte]bordes redondiados en CSS

una forma cross browser de obtener bordes redondeados 100% CSS y validado es: http://www.neuroticweb.com/recursos/....php?idioma=es

espero les sirva

Etiquetas: Ninguno
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.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:28.