Foros del Web » Creando para Internet » CSS »

Redondear imágenes

Estas en el tema de Redondear imágenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/10/2010, 08:55
Avatar de codify  
Fecha de Ingreso: febrero-2002
Ubicación: Barcelona (España)
Mensajes: 179
Antigüedad: 15 años, 9 meses
Puntos: 1
Redondear imágenes

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!...
__________________
====================
Codify
====================
  #2 (permalink)  
Antiguo 01/10/2010, 08:56
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Redondear imágenes

Con la librería GD lo puedieras lograr. También con CSS.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 01/10/2010, 08:57
Avatar de 3nr1c  
Fecha de Ingreso: septiembre-2010
Ubicación: Barcelona
Mensajes: 407
Antigüedad: 7 años, 3 meses
Puntos: 50
Respuesta: Redondear imágenes

Mira por aquí ;)


http://sourceforge.net/projects/roundedphp/
  #4 (permalink)  
Antiguo 01/10/2010, 09:12
Avatar de codify  
Fecha de Ingreso: febrero-2002
Ubicación: Barcelona (España)
Mensajes: 179
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Redondear imágenes

Alguien me explica como hacerlo con CSS???
__________________
====================
Codify
====================
  #5 (permalink)  
Antiguo 01/10/2010, 10:33
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Redondear imágenes

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)
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 01/10/2010, 12:06
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
Respuesta: Redondear imágenes

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

Saludos
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #7 (permalink)  
Antiguo 01/10/2010, 12:15
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Redondear imágenes

Algo asi
Código CSS:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4. <title>Esquinas redondeadas sin imagenes</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. *{margin: 0; padding: 0;}
  8. .caja {
  9.     margin: 0 auto;
  10.     width: 300px;
  11.     position: relative;
  12. }
  13. .punto {
  14.     position: absolute;
  15.     width: 25px;
  16.     height: 25px;
  17. }
  18. .lt {
  19.     background-image: url(lt.png);
  20.     top: -1px;
  21.     left: -1px;
  22. }
  23. .rt {
  24.     background-image: url(rt.png);
  25.     top: -1px;
  26.     right: -1px;
  27. }
  28. .lb {
  29.     background-image: url(lb.png);
  30.     bottom: 0;
  31. }
  32. .rb {
  33.     background-image: url(rb.png);
  34.     bottom: 0;
  35.     right: 0;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <br />
  41. <div class="caja">
  42.     <div class="punto lt"></div>
  43.     <div class="punto rt"></div>
  44.     <div class="punto lb"></div>
  45.     <div class="punto rb"></div>
  46.     <img src="nubes.jpg" />
  47. </div>
  48. </body>
  49. </html>
Las imagenes http://www.megaupload.com/?d=3F30PT8Y
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #8 (permalink)  
Antiguo 01/10/2010, 12:43
Avatar de codify  
Fecha de Ingreso: febrero-2002
Ubicación: Barcelona (España)
Mensajes: 179
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Redondear imágenes

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...
__________________
====================
Codify
====================
  #9 (permalink)  
Antiguo 01/10/2010, 13:03
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Redondear imágenes

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
  1. -moz-border-radius: 100px;
  2.     -webkit-border-radius: 100px;
  3.     border-radius: 100px;
  4.     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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 01/10/2010, 13:25
Avatar de codify  
Fecha de Ingreso: febrero-2002
Ubicación: Barcelona (España)
Mensajes: 179
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Redondear imágenes

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...
__________________
====================
Codify
====================

Etiquetas: Ninguno
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 00:46.