Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema imagen más border-radius

Estas en el tema de Problema imagen más border-radius en el foro de CSS en Foros del Web. Buenas a todos, he intentado aplicarle a un .png las propiedades de border-radius con el shadow etc, pero a la hora de aplicarselo, ésta desaparece, ...
  #1 (permalink)  
Antiguo 10/11/2013, 05:02
 
Fecha de Ingreso: mayo-2013
Mensajes: 47
Antigüedad: 6 años, 4 meses
Puntos: 2
Problema imagen más border-radius

Buenas a todos, he intentado aplicarle a un .png las propiedades de border-radius con el shadow etc, pero a la hora de aplicarselo, ésta desaparece, cuando quito las propiedades de radius y shadow, aparece de nuevo.

Dejo el CSS:

Código CSS:
Ver original
  1. .cajaleft {
  2.     width:175px;
  3.     height:300px;
  4.     float:left;
  5.     background:url(../images/foto.png)
  6. -moz-border-radius: 25px 0px 0px 25px;
  7. -webkit-border-radius: 25px 0px 0px 25px;
  8. border-radius: 25px 0px 0px 25px;
  9. -moz-box-shadow: 0px 0px 30px #1a3038;
  10. -webkit-box-shadow: 0px 0px 30px #1a3038;
  11. box-shadow: 0px 0px 30px #1a3038;
  12. filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8');
  13. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8')";
  14. background-image: -moz-linear-gradient(left, #d4d4d4, #e8e8e8);
  15. background-image: -ms-linear-gradient(left, #d4d4d4, #e8e8e8);
  16. background-image: -o-linear-gradient(left, #d4d4d4, #e8e8e8);
  17. background-image: -webkit-gradient(linear, left top, right top, from(#d4d4d4), to(#e8e8e8));
  18. background-image: -webkit-linear-gradient(left, #d4d4d4, #e8e8e8);
  19. background-image: linear-gradient(left, #d4d4d4, #e8e8e8);
  20. }
  #2 (permalink)  
Antiguo 10/11/2013, 06:03
Avatar de Crazylegs  
Fecha de Ingreso: septiembre-2013
Ubicación: Barcelona
Mensajes: 74
Antigüedad: 6 años
Puntos: 14
Respuesta: Problema imagen más border-radius

Arriba pones de fondo la imagen, y luego abajo pones de fondo un gradiente, sobrescribiendo la imagen.

Prueba así:

Código CSS:
Ver original
  1. .cajaleft {
  2.     width:175px;
  3.     height:300px;
  4.     float:left;
  5. -moz-border-radius: 25px 0px 0px 25px;
  6. -webkit-border-radius: 25px 0px 0px 25px;
  7. border-radius: 25px 0px 0px 25px;
  8. -moz-box-shadow: 0px 0px 30px #1a3038;
  9. -webkit-box-shadow: 0px 0px 30px #1a3038;
  10. box-shadow: 0px 0px 30px #1a3038;
  11. filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8');
  12. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8')";
  13. background: url(../images/foto.png) -moz-linear-gradient(left, #d4d4d4, #e8e8e8);
  14. background: url(../images/foto.png) -ms-linear-gradient(left, #d4d4d4, #e8e8e8);
  15. background: url(../images/foto.png) -o-linear-gradient(left, #d4d4d4, #e8e8e8);
  16. background: url(../images/foto.png) -webkit-gradient(linear, left top, right top, from(#d4d4d4), to(#e8e8e8));
  17. background: url(../images/foto.png) -webkit-linear-gradient(left, #d4d4d4, #e8e8e8);
  18. background: url(../images/foto.png) linear-gradient(left, #d4d4d4, #e8e8e8);
  19. }
__________________
¡Mira mis tutoriales web!
  #3 (permalink)  
Antiguo 10/11/2013, 06:26
 
Fecha de Ingreso: mayo-2013
Mensajes: 47
Antigüedad: 6 años, 4 meses
Puntos: 2
Respuesta: Problema imagen más border-radius

Cita:
Iniciado por Crazylegs Ver Mensaje
Arriba pones de fondo la imagen, y luego abajo pones de fondo un gradiente, sobrescribiendo la imagen.

Prueba así:

Código CSS:
Ver original
  1. .cajaleft {
  2.     width:175px;
  3.     height:300px;
  4.     float:left;
  5. -moz-border-radius: 25px 0px 0px 25px;
  6. -webkit-border-radius: 25px 0px 0px 25px;
  7. border-radius: 25px 0px 0px 25px;
  8. -moz-box-shadow: 0px 0px 30px #1a3038;
  9. -webkit-box-shadow: 0px 0px 30px #1a3038;
  10. box-shadow: 0px 0px 30px #1a3038;
  11. filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8');
  12. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8')";
  13. background: url(../images/foto.png) -moz-linear-gradient(left, #d4d4d4, #e8e8e8);
  14. background: url(../images/foto.png) -ms-linear-gradient(left, #d4d4d4, #e8e8e8);
  15. background: url(../images/foto.png) -o-linear-gradient(left, #d4d4d4, #e8e8e8);
  16. background: url(../images/foto.png) -webkit-gradient(linear, left top, right top, from(#d4d4d4), to(#e8e8e8));
  17. background: url(../images/foto.png) -webkit-linear-gradient(left, #d4d4d4, #e8e8e8);
  18. background: url(../images/foto.png) linear-gradient(left, #d4d4d4, #e8e8e8);
  19. }
Muchas gracias por contestar, pero sigue sin funcionar, alguna idea? xD
  #4 (permalink)  
Antiguo 10/11/2013, 07:04
 
Fecha de Ingreso: mayo-2013
Mensajes: 47
Antigüedad: 6 años, 4 meses
Puntos: 2
Respuesta: Problema imagen más border-radius

Solucionado:

Código CSS:
Ver original
  1. .cajaright {
  2.     width:175px;
  3.     height:300px;
  4.     float:right;
  5.     background:url(../images/foto.jpg);
  6. -moz-border-radius: 0px 25px 99px 0px;
  7. -webkit-border-radius: 0px 25px 99px 0px;
  8. border-radius: 0px 25px 99px 0px;
  9. -moz-box-shadow: 0px 0px 30px #1a3038;
  10. -webkit-box-shadow: 0px 0px 30px #1a3038;
  11. box-shadow: 0px 0px 13px #000000;
  12. filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8');
  13. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8')";
  14.  
  15.  
  16.  
  17.  
  18. }

Etiquetas: background, border-radius, color
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 03:12.