Redondear imágenes

codify · #1 (**permalink**) 01/10/2010, 07:55

Hola,

Tengo una web en la que los clientes pueden rellenar su ficha y subir su imagen. Por el diseño de la web estas imágenes deben ser redondas, o sea, círculares y no puedo pedirles a los clientes que las suban asi, por lo tanto, necesito que, en php, se cogan estas imágenes y se hagan circulares...

...alguien sabe de alguna función o clase que se encarge de redondear estas imágenes???

...gracias por adelantado a quien pueda darme información!...

abimaelrc · #2 (**permalink**) 01/10/2010, 07:56

Con la librería GD lo puedieras lograr. También con CSS.

#3 (**permalink**) 01/10/2010, 07:57

Mira por aquí ;)

http://sourceforge.net/projects/roundedphp/

codify · #4 (**permalink**) 01/10/2010, 08:12

Alguien me explica como hacerlo con CSS???

ArturoGallegos · #5 (**permalink**) 01/10/2010, 09:33

en css se puede realizar con border-radious te dejo link a un ejemplo donde utilizan el borde redondo y sombra mediante css

http://box-shadow.googlecode.com/files/box-shadow.zip

cabe aclarar que el css no validara usando esta técnica, el borde redondeado lo he usado y probado en IE6,IE7,IE8, FF 3.5, FF 3.6, Safari 5, chrome

Nota: el sombreado no funciona en safari 5 (versiones anteriores o posteriores no tengo idea)

rogertm · #6 (**permalink**) 01/10/2010, 11:06

Este link también te puede ayudar... http://css3please.com/

Saludos

abimaelrc · #7 (**permalink**) 01/10/2010, 11:15

Algo asi

Código CSS:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es"> 
<head> 
<title>Esquinas redondeadas sin imagenes</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"> 
*{margin: 0; padding: 0;}
.caja {
    margin: 0 auto;
    width: 300px;
    position: relative;
}
.punto {
    position: absolute;
    width: 25px;
    height: 25px;
}
.lt {
    background-image: url(lt.png); 
    top: -1px;
    left: -1px;
}
.rt {
    background-image: url(rt.png); 
    top: -1px;
    right: -1px;
}
.lb {
    background-image: url(lb.png); 
    bottom: 0;
}
.rb {
    background-image: url(rb.png); 
    bottom: 0;
    right: 0;
}
</style> 
</head> 
<body>
<br />
<div class="caja">
    <div class="punto lt"></div> 
    <div class="punto rt"></div> 
    <div class="punto lb"></div> 
    <div class="punto rb"></div> 
    <img src="nubes.jpg" />
</div> 
</body> 
</html>

Las imagenes http://www.megaupload.com/?d=3F30PT8Y

codify · #8 (**permalink**) 01/10/2010, 11:43

Muchas gracias a todos...

Pero con CSS3 podré hacer que una foto sea completamente redonda???

...por otro lado...y como va de compatibilidad con navegadores antiguos???...aparte de Ag666 nadie me ha confirmado la compatibilidad...

...gracias...

ArturoGallegos · #9 (**permalink**) 01/10/2010, 12:03

con el metodo que yo te di si es posible que sea completamente redonda un ejemplo podria ser considerando la imagen sea de 200x200

Código CSS:

Ver original-moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    behavior: url(ie-css3.htc);

ahora bien tendrías que considerar que todas las imágenes sean del mismo tamaño y/o el contenido que quieras mostrar aparezca justamente en el centro de la imagen.

codify · #10 (**permalink**) 01/10/2010, 12:25

Pues el lunes lo probaré y si es tan simple como me dices va a ser un gran descubrimiento por mi parte...

...muchísimas gracias a todos y en especial a ti Ag666...