Foros del Web » Creando para Internet » CSS »

Div con bordes redondeados y degradado

Estas en el tema de Div con bordes redondeados y degradado en el foro de CSS en Foros del Web. Necesito en mis sitio realizar divs con bordes redondeados y fondo degradado. Algo que logré perfectamente para Firefox y Chrome. El tema es, como se ...
  #1 (permalink)  
Antiguo 19/02/2011, 13:12
 
Fecha de Ingreso: febrero-2010
Mensajes: 22
Antigüedad: 7 años, 10 meses
Puntos: 0
Div con bordes redondeados y degradado

Necesito en mis sitio realizar divs con bordes redondeados y fondo degradado. Algo que logré perfectamente para Firefox y Chrome. El tema es, como se deben imaginar, con Internet Explorer 8.

Para los bordes readondeados utilizo un archivo .htc de este site:
[URL="http://css3pie.com/"]http://css3pie.com/[/URL]

Y para el degradado la siguiente instrucción en una clase CSS:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startC olorstr=#306F88, endColorstr=#A2CEE2);";

El problema surge que la instrucción para el degradado anula lo que hice para los bordes redondeados. ¿Alguna ayuda de como solucionar esto?
  #2 (permalink)  
Antiguo 19/02/2011, 13:19
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Div con bordes redondeados y degradado

Yo siempre los he realizado con imágenes tanto para las esquinas como para el fondo degradado y no he tenido problemas de compatibilidad. CSS3 aún no es un estándar.
Yo no recomiendo usar propiedades exclusivas de ningún navegador salvo casos muy concretos. Es mi opinión particular.
  #3 (permalink)  
Antiguo 19/02/2011, 16:07
 
Fecha de Ingreso: junio-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Div con bordes redondeados y degradado

Para degradado uso esto:
background: #666666;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#666666), to(#000000));
background: -moz-linear-gradient(#666666, #000000);
background: linear-gradient(#666666, #000000);
-pie-background: linear-gradient(#666666, #000000);

Para sombras uso:
box-shadow: 5px -9px 3px #333;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;

y para esquinas redondeadas:

border.radius: 15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
behavior:url(border-radius.htc);
  #4 (permalink)  
Antiguo 21/02/2011, 17:21
 
Fecha de Ingreso: febrero-2010
Mensajes: 22
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Div con bordes redondeados y degradado

Cita:
Iniciado por Fraannn Ver Mensaje
Para degradado uso esto:
background: #666666;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#666666), to(#000000));
background: -moz-linear-gradient(#666666, #000000);
background: linear-gradient(#666666, #000000);
-pie-background: linear-gradient(#666666, #000000);

Para sombras uso:
box-shadow: 5px -9px 3px #333;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;

y para esquinas redondeadas:

border.radius: 15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
behavior:url(border-radius.htc);
Buenisimo!!! ahora me funca todo perfect en IE8, Mozilla y Chrome! Graciela
  #5 (permalink)  
Antiguo 21/05/2011, 09:49
 
Fecha de Ingreso: febrero-2010
Mensajes: 22
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Div con bordes redondeados y degradado

Cita:
Iniciado por Fraannn Ver Mensaje
Para degradado uso esto:
background: #666666;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#666666), to(#000000));
background: -moz-linear-gradient(#666666, #000000);
background: linear-gradient(#666666, #000000);
-pie-background: linear-gradient(#666666, #000000);

Para sombras uso:
box-shadow: 5px -9px 3px #333;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;

y para esquinas redondeadas:

border.radius: 15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
behavior:url(border-radius.htc);
Quería Frann si sabías como hacer esto para el reciente IE9, vi muchas formas por internet, pero quería seguir esta misma forma de trabajo. Saludos!
  #6 (permalink)  
Antiguo 21/05/2011, 10:51
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 6 años, 6 meses
Puntos: 11
Respuesta: Div con bordes redondeados y degradado

lo que se hace para realisar es quear una imagen transparente pero crear solo las esquinas redondiadas de cada borde aun que existe un programa que el otro dia vi por internet que lo haced con javascript no me acuerdo como se llama pero busca en google y lo encontraras y para lo de el dregradado mejor te recomiendo que crees una imagen y la pongas de fondo con el div y que la imagen tenga bordes redondos pero si quieres solo bordes redondos busca ese programa es muy bueno

Suerte xlos_mas_pro
  #7 (permalink)  
Antiguo 21/05/2011, 16:10
 
Fecha de Ingreso: febrero-2010
Mensajes: 22
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Div con bordes redondeados y degradado

Cita:
Iniciado por xlos_mas_pro Ver Mensaje
lo que se hace para realisar es quear una imagen transparente pero crear solo las esquinas redondiadas de cada borde aun que existe un programa que el otro dia vi por internet que lo haced con javascript no me acuerdo como se llama pero busca en google y lo encontraras y para lo de el dregradado mejor te recomiendo que crees una imagen y la pongas de fondo con el div y que la imagen tenga bordes redondos pero si quieres solo bordes redondos busca ese programa es muy bueno

Suerte xlos_mas_pro
Si, había probado con nifty cube para redondeado y esas cosas. Vi que hay muchas alternativas, pero me gustaría saber sí es posible mediante puro CSS. Para no llenar de imágenes el sitio.
  #8 (permalink)  
Antiguo 30/07/2011, 20:40
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 6 años, 6 meses
Puntos: 11
Respuesta: Div con bordes redondeados y degradado

Pero claro hay un hack que es un javascript que remplaza cada codigo y puedes programarlo con css3 y se te visualizara en los IE Espera deja buscarlo un poco y te digo el nombre ok se que funciona con bordes redondeados y sombras no se si con degradados pero yo lo estaba utilizando anteriormente
  #9 (permalink)  
Antiguo 30/07/2011, 21:42
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Div con bordes redondeados y degradado

Hay varios, uno que funciona muy bien en IE/6/7/8/9 es

http://css3pie.com/

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: bordes, degradado, redondeados
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




La zona horaria es GMT -6. Ahora son las 18:25.