Foros del Web » Creando para Internet » CSS »

Redondeo esquinas fotografía

Estas en el tema de Redondeo esquinas fotografía en el foro de CSS en Foros del Web. Hola familia: He estado buscando, pero si ya está abierto el hilo, no supe encontrarlo. Estoy haciendo una aplicación para que el cliente suba sus ...
  #1 (permalink)  
Antiguo 28/02/2007, 02:08
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Redondeo esquinas fotografía

Hola familia:

He estado buscando, pero si ya está abierto el hilo, no supe encontrarlo.

Estoy haciendo una aplicación para que el cliente suba sus fotos y se muestren en su web, pero él quiere que las esquinas se muestren redondeadas. Una opción sería que él editase las fotos con cualquier programa y luego las subiese ya recortadas, pero el volumen es grande y quiere automatizar el proceso, es decir, subirlas rectangulares y que en la web se muestren con el redondeo en las esquinas.

¿Alguna sugerencia? Gracias de antemano.

Ejemplo: www_aaservers_org/ejemplo.jpg
  #2 (permalink)  
Antiguo 28/02/2007, 05:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondeo esquinas fotografía

Buenas, floren.

El ejemplo que das no es una foto con las esquinas redondeadas, es un simple truco de dibujarle ese borde redondeado azul y colocarlo sobre un fondo blanco, para que la esquina superior derecha, que sí está, parezca que desaparece

Si tienes que hacer eso a cada foto, al editarla lo mismo te da hacerle el borde redondeado, mejor dicho, seguro que es más fácil.

Un pregunta: ¿las fotos tendrán un tamaño fijo, o será variable? Lo digo porque tengo un posible truco para esto, pero en firefox funciona con cualquier tamaño y en IE sólo con tamaño fijo.

Ya me dirás.

Mikel.
  #3 (permalink)  
Antiguo 28/02/2007, 15:08
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Redondeo esquinas fotografía

Hola Mikel!

Bueno, ciertamente, en el diseño que me pasan, quieren esen redondeo en la esquina superior izquierda y en su opuesta, tal vez en el ejemplo que he pasado no se ve muy bien.

Al ser una recopilación de noticias, me imagino que el tamaño no va a ser siempre igual, aunque se podría forzar una especie de "strech" (ancho y alto fijo) para salvar el diseño propuesto. ¿Qué sugieres?
  #4 (permalink)  
Antiguo 28/02/2007, 15:15
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
off-topic

Bueno, perdón por el off-topic, pero buscando buscando parece que hay algo que se puede hacer con GD y PHP: www'assemblysys'com/dataServices/php_roundedCorners.php

¿Sugieres algo con CSS?
  #5 (permalink)  
Antiguo 28/02/2007, 15:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondeo esquinas fotografía

Bueno, en realidad la solución que pensaba era con css pero apoyado en prototype y openrico, así que vendrá aser parecido a lo que dices que has encontrado, de manera que pensaremos un poco a ver si se me ocurre algo que hacer sólo con css.

Mikel.
  #6 (permalink)  
Antiguo 28/02/2007, 16:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondeo esquinas fotografía

Bueno, pues sólo con css lo que se me ocurre es un truco de usar un cuadro con las esquinas al mismo color del fondo, colocado como fondo de un elemento y posicionado encima de la foto con posición absoluta.

http://www.menoslobos.com/mikel/foro...dondeadas.html

A ver si te sirve de algo.

Mikel.
  #7 (permalink)  
Antiguo 01/03/2007, 01:12
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Redondeo esquinas fotografía

Personalmente me gusta más tu sugerencia, así la aplicación no es dependiente de tener la librería GD instalada en el servidor, aunque se me plantea el problema de distinguir fotos verticales o apaisadas.

¡No podemos hacer milagros!

Gracias Mikel, estoy muy verde con CSS.
  #8 (permalink)  
Antiguo 01/03/2007, 01:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondeo esquinas fotografía

Muy fácil: si tanto a las verticales como a las apaisadas les vas a dar un tamaño fijo, crea un segundo gráfico de cubierta vertical, y al div le das una clase según sea el tipo de foto: <div class="fotoA"> ó <div class="fotoV">.

Me explico: haciéndo ese segundo gráfico, separas el div que lo contiene con dos clases diferentes:

.fotoA { margin: 10px;
float: left;
position: relative;
width: 100px;
height: 85px;
overflow: hidden;
}
.fotoV { margin: 10px;
float: left;
position: relative;
width: 85px;
height: 100px;
overflow: hidden;
}
span { display: block;
position: absolute;
top: 0px;
left: 0px;
background-repeat: no-repeat;
}

.fotoA span {background-image: url(redondas.gif);
width: 100px;
height: 85px;
}
.fotoV span {background-image: url(redondas_vertical.gif);
width: 85px;
height: 100px;
}

Y luego ya, si la foto es vertical el div lleva una clase y si es apaisada la otra:

<div class="fotoA"><img src="1.jpg" /><span></span></div>
<div class="fotoV"><img src="2.jpg" /><span></span></div>

Tan simple como es. Sólo debes hacer el gráfico de cubierta de las fotos verticales.

http://www.menoslobos.com/mikel/foro...ondeadas2.html

Mikel.

Última edición por Mikmoro; 01/03/2007 a las 02:45
  #9 (permalink)  
Antiguo 01/03/2007, 07:12
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Redondeo esquinas fotografía

Ya, pero el tema está en que a priori no sé si una foto es vertical o apaisada para aplicarle un estilo u otro.

Podría acudir a GD y ver la proporción ancho x largo para aplicar la clase fotoA o la clase fotoB, pero justamente la preferencia era evitar GD.

En el formulario, a la hora de cargar la página, podría pedirle al usuario que seleccionase una casilla u otra, dependiendo de la foto, pero no queda eso muy elegante, ¿no te parece?

¡Gracias Mikel!
  #10 (permalink)  
Antiguo 01/03/2007, 08:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondeo esquinas fotografía

Pues elegante igual no es, pero, cargar fotos mediante un formulario, cuya orientación se desconoce, ponerle un redondeado de esquinas, y que quede perfecto, sin usar ningún script de ningún tipo, sólo con css... me parece que no. De alguna manera tendrás que detectar las dimensiones (digo yo que con javascript no sería difícil).

Mikel.
  #11 (permalink)  
Antiguo 01/03/2007, 09:34
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Redondeo esquinas fotografía

Sí, tienes razón.

Dándole vueltas de todas formas creo que voy a tirar por la calle de enmedio, con un híbrido entre lo que tú propones y GD: con PHP-GD redondeo y luego le coloco una capa encima al estilo que tú decías, ya que la esquina superior izquierda debe llevar una línea azul que enlaza con el resto del diseño (por suerte esta esquina está siempre en la coordenada 0 0 del div contenedor, menos mal).

Muchas gracias Mikel!!!!!

Saludos,

Floren
  #12 (permalink)  
Antiguo 01/03/2007, 11:08
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
Re: Redondeo esquinas fotografía

Mírate esto a ver si te funciona:

http://www.curvycorners.net/

Puedes ver los ejemplos aquí:

http://www.curvycorners.net/examples.php

Saludos,
__________________
sergiold
  #13 (permalink)  
Antiguo 02/03/2007, 06:11
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Redondeo esquinas fotografía

Hola Sergio, gracias por el link.

La base, aunque usando JS, es la misma que aportaba Mikel con CSS: crear una capa con las esquinas redondas y poner debajo la fotografía. Digamos que JS actúa sobre el DIV y no sobre la imagen.

Saludos y gracias de nuevo,

Floren.
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 08:31.