[aporte]bordes redondiados en CSS

pilopi123 · #1 (**permalink**) 11/01/2010, 16:28

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 originalborder-radius: 10 px;
    -moz-border-radius:10px;
    -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

masterojitos · #2 (**permalink**) 11/01/2010, 17:02

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.

chefnelone · #3 (**permalink**) 12/01/2010, 01:46

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.

Impostor · #4 (**permalink**) 12/01/2010, 03:03

Cita:

Iniciado por pilopi123

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 originalborder-radius: 10 px;
    -moz-border-radius:10px;
    -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.

pilopi123 · #5 (**permalink**) 12/01/2010, 10:31

Cita:

Iniciado por Impostor

Ola, inadactado, mobiles Mi no entenderte.

es que aca hablar asi perdon no escribir bien

albertrc · #6 (**permalink**) 12/01/2010, 10:47

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

C2am · #7 (**permalink**) 12/01/2010, 13:32

¿y los bordes redondeados como serían?¿igual que los redondiados pero mas cuadrados?

jomaruro · #8 (**permalink**) 12/01/2010, 17:22

Hola:

Cita:

Iniciado por pilopi123

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.

alexk · #9 (**permalink**) 12/01/2010, 17:41

#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

pilopi123 · #10 (**permalink**) 12/01/2010, 20:15

Cita:

Iniciado por jomaruro

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

pilopi123 · #11 (**permalink**) 12/01/2010, 20:16

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

alexk · #12 (**permalink**) 12/01/2010, 20:28

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).

web_master7 · #13 (**permalink**) 12/01/2010, 23:41

I dont know

chefnelone · #14 (**permalink**) 13/01/2010, 02:13

Cita:

Iniciado por alexk

... 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

...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

Impostor · #15 (**permalink**) 13/01/2010, 03:52

Cita:

Iniciado por pilopi123

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¡¡

alexk · #16 (**permalink**) 13/01/2010, 09:58

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

pilopi123 · #17 (**permalink**) 13/01/2010, 12:21

si es asi todavia no sirve muy bien solo en el ie pero bueno ami me muestra el mismo error

Código CSS:

Ver originalLa 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&#243;n 2.1 pero existe en : 5px

pilopi123 · #18 (**permalink**) 13/01/2010, 12:22

Cita:

Iniciado por alexk

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

alexk · #19 (**permalink**) 13/01/2010, 12:40

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<!--[if IE 6]>
<style type="text/css">a{behavior: url(ie-border-radius.htc);}</style>
<![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!...

pilopi123 · #20 (**permalink**) 13/01/2010, 17:10

Cita:

Iniciado por alexk

lo que puedes hacer poner un comen tario condicional y fuera de tu hoja de estilos

Código HTML:

Ver original<!--[if IE 6]>
<style type="text/css">a{behavior: url(ie-border-radius.htc);}</style>
<![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

alexk · #21 (**permalink**) 13/01/2010, 17:21

50? wow todo un profesional que bien... chao

jomaruro · #22 (**permalink**) 13/01/2010, 17:41

Hola:

Cita:

Iniciado por pilopi123

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.

j21 · #23 (**permalink**) 13/01/2010, 19:02

Muy bueno, ya lo conocia pero no funciona para firefox

alexk · #24 (**permalink**) 13/01/2010, 19:08

Cita:

Muy bueno, ya lo conocia pero no funciona para firefox

Código CSS:

Ver original-moz-border-radius:10px;

:S?

pilopi123 · #25 (**permalink**) 13/01/2010, 19:27

Cita:

Iniciado por j21

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

DaniloWeb · #26 (**permalink**) 14/01/2010, 07:05

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

pilopi123 · #27 (**permalink**) 14/01/2010, 08:06

Cita:

Iniciado por DaniloWeb

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

DaniloWeb · #28 (**permalink**) 14/01/2010, 08:25

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

pilopi123 · #29 (**permalink**) 14/01/2010, 09:06

mira wey sobre tu duda por que no colocar el css del cornet al style de tu web asi ya tendrias solo un css

DragonX · #30 (**permalink**) 14/01/2010, 09:22

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

espero les sirva