Redondeo esquinas fotografía

[floren]

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

[Mikmoro]

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.

[floren]

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?

[floren]

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?

[Mikmoro]

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.

[Mikmoro]

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.

[floren]

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.

[Mikmoro]

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.

[floren]

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!

[Mikmoro]

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.

[floren]

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

[sergiold]

Mírate esto a ver si te funciona:

http://www.curvycorners.net/

Puedes ver los ejemplos aquí:

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

Saludos,

[floren]

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.