Foros del Web » Creando para Internet » CSS »

imagen redonda

Estas en el tema de imagen redonda en el foro de CSS en Foros del Web. Hola: He leido cómo hacer divs redondos con css, pero necesitaría hacerlo con imagen transparente superpuesta. No he encontrado ningún tutorial donde expliquen las css ...
  #1 (permalink)  
Antiguo 29/04/2012, 04:33
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Pregunta imagen redonda

Hola:

He leido cómo hacer divs redondos con css, pero necesitaría hacerlo con imagen transparente superpuesta. No he encontrado ningún tutorial donde expliquen las css que se necesitan.
Me explico: tengo imagenes que se guardan en bd, quiero mostrarlas en un div que haga la apariencia de redondo, usando una imagen transparente superpuesta a la imagen que se muestra de la bd, pero no consigo hacerlo bien, ya que la imagen de la bd se queda por encima de la transparente. Ambas imágenes se muestran en divs, la transparente está por encima de la de la bd, y por css he puesto que ésta última (la de la bd) se mostrara oculta, aunque no funciona. ¿Podéis ayudarme o mostrarme algún tutorial o algo parecido? Muchas gracias y, lo siento si he sido un poco liosa al explicarme. Saludos.
  #2 (permalink)  
Antiguo 29/04/2012, 07:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: imagen redonda

aplicando los valores correspondientes en las propiedades position y en función del orden de aparición en su html generado quizás z-index.

Esquinas redondeadas es la misma propiedad para todos los tag´s: border-radius.

Ponga sus códigos implicados (css+html generado). Pero mucho mejor un enlace a la página del problema con una indicación clara y precisa de los elementos a los que se refiere.

N.B.: Ya ni raCSStreapollo da abasto:

__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 29/04/2012, 19:36
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: imagen redonda

Pobre bicho. De un tiempo para acá tiene demasiado trabajo. Un día de estos el estrés lo va a llevar a suicidarse a lo bonzo en una parrilla.

Güevadas aparte, y sin esperar la aclaración de cheterporras2 porque ya es un asunto personal, me quedé pensando en tu sugerencia de las esquinas redondeadas. Es muy buena. La probé y anda.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
</head>
<body style="background-color: black; color: white; ">
<h2>Imagen que simula clip circular puesta como fondo en 
<code>div </code>con esquinas redondeadas. </h2>
<center>
<div style="-moz-border-radius: 225px; border-radius: 225px; 
-webkit-border-radius: 225px; background-color: red; height: 450px; width: 450px; 
background-image: url(http://img196.imageshack.us/img196/9730/grondonawhite01.jpg); 
background-position: -45px; "></div>
</center>
</body>
</html>
Ya tenemos un clip redondo.
Gracias.


Imagen:

  #4 (permalink)  
Antiguo 04/05/2012, 13:42
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

Perdón por haber tardado tanto en contestar. La cuestión es que no quiero un div con las esquinas redondeadas, sino con curva en todo el div, el problema es que las dimensiones son diferentes para alto (286 px) y para ancho (322 px). Por eso había pensado en ponerle una imagen con el centro en forma de elipse. Dicha elipse es transparente, mostrándose la otra foto debajo y haciendo el efecto redondo que deseo, pero no tengo ni idea de qué poner en el css para conseguirlo, ya que la imagen me sale por encima de la elipse, cuando debería quedar por debajo. La página es esta : http://www.animalmeeting.com/perfilperro.php . Gracias por cualquier ayuda que podáis aportarne y, si conocéis algún sitio de referencia, también me serviría.
  #5 (permalink)  
Antiguo 04/05/2012, 14:32
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: imagen redonda

realmente has probado el código de furoya??

si no usar el shorthand, la propiedad radius tiene 4 valores. en tu caso has se usar dos
Cita:
border-radius: 161px 144px
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 04/05/2012, 15:30
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

No lo he probado porque no sabía que la propiedad radius tenía 4 valores. La cuestión es, que ese div redondo, debe tener una imagen (hasta ahí, lo mismo que en el ejemplo de furoya), pero, en mi caso, la imagen que se muestra debe salir de la base de datos y, mi pregunta es: ¿sería aplicable este código?. Pregunto esto porque él lo ha hecho con fondo de imagen.
  #7 (permalink)  
Antiguo 04/05/2012, 16:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: imagen redonda

La ventaja de ponerla como fondo es que te resulta más fácil ubicarla o "centrarla" donde quieras que se vea. Pero le puedes dar el formato redondo u ovalado a la misma imagen.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body { background: black;}
img { border-radius: 175px 175px;}
</style>
</head>
<body>
<img src=http://www.animalmeeting.com/imagenes/prueba.png>
</body>
</html>
Para que sea oval, la imagen no debería ser cuadrada. Y el radio será igual a la mitad del lado más corto.
  #8 (permalink)  
Antiguo 04/05/2012, 16:46
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

He intentado adaptar el código que me has dado, pero algo está fallando.Con tu código, lo he modificado a mi gusto y no hay ningín problema, entonces, no sé si lo de que sea la imagen cuadrada o no, realmente importa en este caso, porque lo he hecho con el tuyo. Te dejo parte del código para ver por dónde anda el error.
Cita:
<body>


<form action="" method="get">
<div id="apDiv16" style="background-color:black; color:white">
<div class="oculto" id="apDiv17" style="-moz-border-radius: 150px 140px; border-radius: 150px 140px;
-webkit-border-radius: 150px 140px; background-color:#000; height: 280px; width: 300px; background-image:url(imagenes/prueba.png); background-position: -45px;"> </div>
</div>
La cuestión es que la imagen se encuentra en un div, dentro de un formulario, por lo que el fondo negro del body se hace detrás del formulario, no sé si será por eso...Este div lo he metido dentro de otro div, con lo que tenía la esperanza de que hiciera como fondo, pero no funciona.¿Podría ser por las propiedades asignadas en el css? No sé... Puedes verlo en la página.
  #9 (permalink)  
Antiguo 04/05/2012, 17:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: imagen redonda

Cita:
Iniciado por IsaBelM Ver Mensaje
si no usar el shorthand, la propiedad radius tiene 4 valores. en tu caso has se usar dos
Realmente son 8. Cada esquina tiene 2 radios que pueden declararse de forma independiente.
Cita:
Iniciado por furoya Ver Mensaje
La ventaja de ponerla como fondo es que te resulta más fácil ubicarla o "centrarla" donde quieras que se vea. Pero le puedes dar el formato redondo u ovalado a la misma imagen.

Para que sea oval, la imagen no debería ser cuadrada. Y el radio será igual a la mitad del lado más corto.
No sólo redonda u ovalada. Huevos, limones... y unas cuantas formas más se consiguen con ella.

Cita:
Iniciado por cheterporras2 Ver Mensaje
He intentado adaptar el código que me has dado, pero algo está fallando.Con tu código...
Ya en la primera respuesta le indicaba la conveniencia de que publique todos sus códigos implicados (html+css). Lo mejor sería un enlace a su realización.
E imprescindible una descripción clara y precisa de qué quiere lograr.

Ver más abajo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 05/05/2012 a las 04:45
  #10 (permalink)  
Antiguo 04/05/2012, 21:37
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: imagen redonda

AAAAAHHHHg!

A esa página hay que quemarla y hacerla de nuevo. Con razón el pollo no encontró nada ¡ni quiso mirar!.

Maquetado con tablas, posiciones absolutas para todo, niveles de eje "z" que revuelven el flujo natural del contenido ... ¡DIOSES! ¡¿Para qué me metí en esto?! ¡¿PARA QUÉ?!

...

Bien, como no sé por donde empezar, vamos a hacerlo desde el principio : tienes que aprender diseño.

Y para terminar (salteando todo lo que va en el medio) : tu imagen era más grande que su contenedor, y por eso te sobraba por todas partes.

Código:
<style type="text/css">
#apDiv8 {
	position:absolute;
	width:363px;
	height:337px;
	z-index:7;
	//background-image: url(http://www.animalmeeting.com/imagenes/perfil/imagenes/perfilperro_07.gif);
	left: 0px;
	top: 190px;
}


#apDiv16 {
	position:absolute;
	left:42px;
	top:220px;
	width:322px;
	height:322px;
	//z-index:2;
	back-ground: black;
	overflow: hidden;
}
#muestra { 
	border-radius: 150px; 
	height: 285px; 
	width: 285px; 
	position: absolute; 
	top: 0; 
	left: 20px; 
	border: 6px solid #006600; 
}

</style>

··············

<div id="apDiv16">
<img id=muestra 
src=http://www.animalmeeting.com/imagenes/prueba.png>
</div>
No puedo (ni debo) arreglar todo. Como ayuda, te dejo marcado lo que deberías empezar a modificar, como para subir tu página mientras haces la definitiva. Que será maquetada absolutamente distinto.

Ya me ahorré mil problemas poniendo el borde verde a la imagen en vez de usar una capa, pero al borrarla se "desvaneció" parte del globo. Si estás usando *.gif ¿qué te impedía agregar transparencia para simular una máscara redonda y poner a tu perro detrás?. Respuesta : el desbarajuste de capas con posicionamiento forzado.

Insisto : vas a tener que aprender diseño.

Y que venga de una base de datos o del tipeo de la máquina, da lo mismo. Es una imagen. No sabemos quién la pone, si un programa PHP, o un JS, o ... al final rellenan el source de la imagen como cualquiera. O deberían hacerlo.

Ningún tutorial te va a resolver el problema. Si algo se adapta a esa estructura que tiene tu página, es de pura casualidad.

Cita:
Iniciado por kseso? Ver Mensaje
Ya en la primera respuesta le indicaba la conveniencia de que publique todos sus códigos implicados (html+css). Lo mejor sería un enlace a su realización.
E imprescindible una descripción clara y precisa de qué quiere lograr.
Sí. El hecho de que pusiera el enlace me decidió a seguir respondiendo.

Ahora, y después de verlo, ya no podré dormir.


P.D. : Muy lindos los huevos y limones. ¿Saldrá una pera?.
  #11 (permalink)  
Antiguo 04/05/2012, 23:56
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

... joooo,ahora me da vergüenza hasta hablar...jejje.
A ver, una hace lo que puede con los conocimientos que se tienen (que son muy poquitos)y con lo que lee en internet. Tampoco sé dónde encontrar algún manual de referencia que me hubiera podido servir de base para hacerla.
Por supuesto, coincido contigo furoya, en que no me tienes que dar la página hecha ni arreglarlo todo, porque si no, nunca aprendería, que es de lo que va el asunto. Ya me has dicho que tiene mil y un errores y, con lo que me has comentado, intentaré ir resolviéndolos. Si tienes más críticas en cuestión del diseño, te aseguro que se aceptan de muy buen grado es más, te insto a ello y, así, busco más información y no cometo estos errores en el futuro. Dulces sueños
  #12 (permalink)  
Antiguo 05/05/2012, 01:04
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: imagen redonda

Ah. Te molestó el comentario.

Y lo entiendo. Te debes haber esforzado mucho para hacer la página. Que está muy simpática.
El problema es que estás ubicando las piezas como si editaras en Word, por eso te insistí en eso de aprender diseño. Los pocos conocimientos te alcanzarían para copiar y pegar una plantilla prefabricada donde le cambias los nombres y alguna imagen y ya tienes hecha tu página.
Pero el tuyo es un proyecto más ambicioso. Y todavía no sé qué hay detrás, porque nombraste la base de datos. Antes de meterse hay que aprender algo más que un poquito.

Y el Foro (y la web) está lleno de tutoriales. Lo que no vas a encontrar es un instructivo para hacer esa página, porque la estás inventando. Y justamente para eso es que hay que aprender primero.

El usar imágenes como "marco" o "guía" te ayudó mucho, porque sus medidas están en pixeles y no se modifican, pero la idea es que el documento fluya y se acomode a la configuración del navegador. En todo caso, para centrar los campos de formulario dentro de los huesos, sí puedes usar posiciones absolutas, y cualquier desfasaje va a ser mínimo. Ahora, ya un nivel más arriba, cada hueso debería estar en una caja que se ajustara al documento según lo quiera ver el usuario.

En realidad, lo que hiciste no es tan grave, si tenemos en cuenta que es lo que le pasa a todos los que se hayan metido a hacer este trabajo por primera vez. Lo grave —quizás— es que no lo estés haciendo como prueba sino que pretendas ponerlo en una página de verdad. Y que vengas a un Foro especializado —donde para preguntar ya hay que saber, o se pregunta mal y después hay que aguantarse los comentarios— con un documento que no admite ni la menor compasión.

Para terminar, y ahora sí me voy a dormir en serio, voy a disculparme por si le erré al género en algún mensaje anterior. Leyendo bien descubro que usaste para nombrarte un artículo, o adjetivo —no me acuerdo— que es femenino. Estaba convencido de que eras "nene" y no "nena", así que si encuentras una incongruencia de género, no fue un error de tipeo sino un prejuicio de mi parte.

Y ya que estoy, aprovecho para felicitarte por el sentido de la ubicación. Repito: estoy seguro de que mi comentario extremadamente exagerado te dolió, pero entendiste que era en broma y respondiste como corresponde.
Aunque no lo creas, aparece por aquí mucha gente que no hace lo mismo.

Voy a soñar con tus perritos.
Saludos
furoya
  #13 (permalink)  
Antiguo 05/05/2012, 04:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: imagen redonda

Cita:
Iniciado por kseso? Ver Mensaje
Ya en la primera respuesta le indicaba la conveniencia de que publique todos sus códigos implicados (html+css). Lo mejor sería un enlace a su realización.
E imprescindible una descripción clara y precisa de qué quiere lograr.
Y aquí tengo que cortármela, porque cegato de mi no vi su enlace. Mis disculpas.

border-radius: 50%
Es el valor mágico para hacer una imagen (o cualquier otro elemento) circular (si su ancho/alto son iguales. Si no, saldrá un óvalo.
Y jugando con las anchuras de los cuatro bordes se puede simular cierto descentrado.

Vista ahora su página y la temática, quizás le interese contactar con Tunait (moderadora del foro). Tiene un CMS (bamboo) sobre la temática.

Y si busca manuales para iniciarse y algo más, un buen sitio es www.librosweb.es
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 05/05/2012, 05:42
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: imagen redonda

Cita:
Iniciado por kseso? Ver Mensaje
Realmente son 8. Cada esquina tiene 2 radios que pueden declararse de forma independiente.
8?? me he puesto a buscar, perezosamente, y no he encontrado ninguna referencia a ello
http://www.librosweb.es/css_avanzado...dondeadas.html
Cita:
La propiedad border-radius establece la misma curvatura en todas las esquinas y también se definen las propiedades border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius para establecer la curvatura de cada esquina.
podrías publicar las otras 4 propiedades?? gracias
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #15 (permalink)  
Antiguo 05/05/2012, 06:16
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

Jajajajaja, no te preocupes para nada furoya, tu comentario, cuanto menos histriónico, me hizo muchísima gracia (te imaginé tirándote de los pelos ), en absoluto me molestó. Hasta ahora, lo que había hecho, tenía un diseño muy sencillo, ya que el tema, donde era más complejo era en php y, por ahí, ando un poco mejor. Cualquier crítica, o ayuda, que pueda guiarme, serán bien recibidas, por ello, te doy las gracias kseso? .
No quiero un tutorial que haga mi página (eso sería un chollazo, jejeje, que es bromaaaa), pero sí saber cuáles son los buenos tutoriales, porque en internet hay mucha información, aunque la mayoría mala. Los que sois entendidos, lo detectáis al momento, los que no lo somos, pues necesitamos equivocarnos y liarla parda en los códigos, para darnos cuenta.
Se aceptan tus disculpas, faltaría máss, jeje Procuro tomarme las cosas con humor, que cabrearse no sirve para nada. Me pondré lo antes posible a modificar todo lo que pueda con la información recibida. Muchas gracias, os mantendré informados y, lo siento, preguntar, seguiré preguntando.
  #16 (permalink)  
Antiguo 05/05/2012, 07:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: imagen redonda

Cita:
Iniciado por IsaBelM Ver Mensaje
8?? me he puesto a buscar, perezosamente, y no he encontrado ninguna referencia a ello
http://www.librosweb.es/css_avanzado...dondeadas.html

podrías publicar las otras 4 propiedades?? gracias
El mejor sitio para buscar es la documentación oficial (especificaciones o documentos de trabajo de la W3c).
En este caso http://www.w3.org/TR/css3-background/#the-border-radius
Cita:
Name: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
Value: [ <length> | <percentage> ]{1,2}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 05/05/2012, 07:49
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: imagen redonda

yo es que hablaba de propiedades. de cualquier modo no lo sabía

gracias
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #18 (permalink)  
Antiguo 06/05/2012, 11:19
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

Hola, llevo todo el día leyendo y modificando códigos, pero no me sale nada bien. Furoya, he probado con el código que me diste de muestra para ir empezando, pero no funciona, no sé por qué (ya te digo que lo he modificado cien mil veces y no me sale), no consigo que salga redondo ni en explorer ni en firefox. ¿Le falta algo para que termine de ir bien? RUEGO que me ayudéis, es muy frustante, sobre todo porque, por lo menos, es para empezar e ir modificando las cosas que tengo mal. Os dejo el código que me dejó furoya con muy pequeñas modificaciones
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin título</title>
<
style type="text/css">
#apDiv16 {
    
position:absolute;
    
left:42px;
    
top:220px;
    
width:322px;
    
height:322px;
    
z-index:2;
    
backgroundblack;
    
overflowhidden;
}
#muestra { 
    
border-radius150px; -moz-border-radius150px;
    
height285px
    
width285px
    
positionabsolute
    
top0
    
left20px
    
border6px solid #006600; 
}

</
style>

</
head>

<
body>
<
div id="apDiv16">
<
img id=muestra 
src
=http://www.animalmeeting.com/imagenes/prueba.png>
</div>
</
body>
</
html
Se hace el borde redondo, pero la imagen sale por encima de ese borde, totalmente cuadrada. Muchas gracias.

Última edición por cheterporras2; 06/05/2012 a las 11:31
  #19 (permalink)  
Antiguo 06/05/2012, 12:10
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: imagen redonda

El último código que pusiste es el que no se ve? O se ve pero se desarma al meterlo en tu página?

En Firefox lo veo bien, pero IE va a ser un problema. Creo que el efecto sólo se ve hasta la versión 8, y no sé si con prefijo.

Código:
#muestra { 
    border-radius: 150px; 
    -moz-border-radius: 150px;
    -o-border-radius: 150px;
    -ms-border-radius: 150px;
    -khtml-border-radius: 150px;
    -webkit-border-radius: 150px;
    height: 285px; 
    width: 285px; 
    position: absolute; 
    top: 0; 
    left: 20px; 
    border: 6px solid #006600; 
}
Para versiones de navegador que no acepten esta sintaxis ... habrá que inventar un hack. O volver a tu idea de la máscara *.gif.

Mira, si realmente no te funciona vamos a hacer esto último. Insisto, al menos para subir tu página. Después se ve cómo vas creando otra en paralelo que sea más fácil de manejar, más limpia para ver.

Un detalle : esos 150px deberían ser la mitad del lado más chico de la imagen. Si son mayor, el navegador los corrige, pero siempre trata de que sea lo más cercano que puedas. Por prolijidad, nada más, no es que sea indispensable.

Y el foro ya me mandó un aviso de que casi me explota la bandeja de entrada de los MP. Calma, que por esto no se murió nadie.

Beso y espero a que hagas la prueba.
  #20 (permalink)  
Antiguo 06/05/2012, 12:23
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

¿Tú lo ves bien en Firefox? yo no... sale el borde redondo, eso sí, pero debajo de la imagen http://www.animalmeeting.com/muestra3.html Cuando lo veía antes de subirlo, salía perfecto, pero en la red se ve (o yo lo veo) mal. Esta página no tiene más que el códdigo arriba señalado, nada más.Dime si pinchando en el enlace se ve bien o mal, porfa... Besoss
  #21 (permalink)  
Antiguo 06/05/2012, 12:32
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: imagen redonda

Lo veo exactamente igual.
Una duda : hay detrás de la imagen redonda del perro con borde verde un fondo negro que no sé por qué está.

Código:
    //background: black;
con esa marca se nota que no está exactamente centrado, pero creo que eso no es grave.

¿Hay alguna forma de que hagas una captura ( [CTRL] + [ALT] + [PrintScreen] ) y la cuelgues en la web? Ya estoy empezando a preocuperme de que algo tan sencillo no funcione. Mi FF es versión 12.

Si en la imagen de captura de pantalla sale algún nombre, dirección o dato que no quieres que se vea, lo tachas con cualquier editor antes de subirla.
Gracias. Sigo esperando.
  #22 (permalink)  
Antiguo 06/05/2012, 12:51
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

A ver, esto es lo que veo
http://www.animalmeeting.com/imagenes/circular.jpg

Si tú lo ves bien, sera que me está dando problemas el navegador, como sea eso, primero me estampo contra la pared y luego lo vuelvo a instalar. Por cierto, soy cateta, pero sé copiar imágenes...jajjajaa.
  #23 (permalink)  
Antiguo 06/05/2012, 13:08
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

Bueno, ahora que ya me estampado y he instalado de nuevo el Firefox, puedo decir... qué si funciona!!! todo el día para resultar que era eso... he quedado como una verdadera imbécil... Mil disculpas por haberte hecho perder el tiempo de esta manera... perdona, perdona, perdona... Sólo una última cosa, respecto a Explorer, intenté encontrar información para lo de superponer la imagen y hacer el efecto de redondo, pero sólo he visto páginas muy malas. ¿Sabrías dónde puedo encontrar algo? Y te juro que ya no te molesto más, promesa.
  #24 (permalink)  
Antiguo 06/05/2012, 13:08
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: imagen redonda

Mientras esperaba revisé la página original y resulta que también se ve perfecto.

La única diferencia es que ya no está el perro, sino una morocha muy bonita (¿eres tú? ¡Felicitaciones!) acompañada por ... bueno, no sé cómo lo tratas, pero no creo que sea tu perro.
(¡Un abrazo al afortunado!)


Bueno, volvamos al asunto.

Aproveché para hacer una captura em mi navegador FF, y se ve perfecto.



¿Por que no volteas la caché del browser? Al menos lo que tenga que ver con tu sitio. Quizá esté trulado y te siga mostrando una versión vieja.

En verdad no se me ocurre qué pasa.

(Y me cache en el editor del Foro que me hizo escribir esto dos veces!!

Y encima me ganaste y posteaste antes que yo!

Ahora lo miro)


<@> <@>

Ya lo miré. Prueba borrar la caché y reiniciar. Y veamos si alguien que vea este tema tiene el mismo problema. Como yo lo veo bien, no puedo encontrar la falla.


Edición:

(Pero caray!. Otra vez me ganaste con un nuevo post!
Me alegro que haya funcionado. Si el prefijo -ms- no anda o quieres que también se vea en IE7 o inferiores ... no sé si hay tutoriales. Tienes que crear una imagen con fondo blanco y el interior del globo transparente. Ah!, y el borde verde al transparente.
Después le pones tu imagen, o la del perro, como fondo, y la acomodas a gusto con CSS.

Si puedo te pongo un ejemplo para redondear el tema.)



{ cache , redondear, je ... estoy afiladísimo ... je }

Última edición por furoya; 06/05/2012 a las 13:20 Razón: Siempre llego tarde.
  #25 (permalink)  
Antiguo 06/05/2012, 13:21
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

Esto... sí, soy yo(gracias!!! ), estaba probando porque esa imagen es mucho más grande que la del perro, había probado con varias fotos de diferente tamaño.Jajajjaa, sí,él es mi cachorrito, de vez en cuando lo saco a que le vante la patita, jajaja , le daré las felicitaciones de tu parte. Pero lo tuyo tiene delito, mira que hacer la captura de esa página... para eso te había dado la de muestra, hombre...qué vergüenza... Ya te digo, he instalado de nuevo el FF, y ahora se ve bien, pero me gustaría saber lo de la imagen superpuesta para Explorer, o algún otro método orientativo para que se vea.
  #26 (permalink)  
Antiguo 06/05/2012, 13:47
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: imagen redonda

la superposición de imágenes solventa el problema de cross-browser, también lo hace javascript. caricatos tiene varios códigos que te pueden ayudar
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #27 (permalink)  
Antiguo 06/05/2012, 13:54
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

Muchas gracias IsabelM le echaré un vistazo.
  #28 (permalink)  
Antiguo 07/05/2012, 10:49
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: imagen redonda

Finalmente, un sólo apunte más y doy por terminado el tema. Le estuve echando un vistazo a los códigos de caricatos, están muy bien pero, la mayoría, requieren un nivel mayor que el que tengo, aunque lo he agregado a mis favoritos y lo iré mirando conforme vaya progresando.

Por si a alguien le sirve, resolví el problema con explorer de la siguiente manera:
Encontré una librería en esta página http://css3pie.com/ .El archivo PIE.htc es el importante que funciona en ie. Se sube a la raíz del servidor, y se llama desde las características del div
Cita:
#madre {
border-radius: 156px 153px 151px 151px;
-moz-border-radius:156px 153px 151px 151px;
-o-border-radius: 156px 153px 151px 151px;
-ms-border-radius: 156px 153px 151px 151px;
-khtml-border-radius: 156px 153px 151px 151px;
-webkit-border-radius: 156px 153px 151px 151px;
behavior:url(PIE.htc);
height: 279px;
width: 315px;
position: absolute;
top: 24px;
left: 36px;
}
Y eso es todo, no se necesita nada más. En el caso de que no funcione directamente por algún problema que dé el servidor con los archivos ".htc", también se puede llamar a "PIE.php", que incluye el archivo "PIE.htc" y no da ningún problema. Eso es todo. Muchas gracias por vuestra paciencia y espero que esto le sirva a alguien. Besossss

Etiquetas: efecto, imagenes, redondeadas, redondo
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 09:15.