Foros del Web » Creando para Internet » CSS »

esquinas redondeadas para una foto

Estas en el tema de esquinas redondeadas para una foto en el foro de CSS en Foros del Web. Hola, ya he visto que este tema fue tratado en alguna ocasión, pero no consigo que me quede claro. El tema es así, quiero poner ...
  #1 (permalink)  
Antiguo 16/01/2007, 11:19
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 17 años, 2 meses
Puntos: 1
Pregunta esquinas redondeadas para una foto

Hola, ya he visto que este tema fue tratado en alguna ocasión, pero no consigo que me quede claro.
El tema es así, quiero poner en un sitio que estoy armando unas fotos (no muchas 2 por pág) y quiero que éstas tengan los bordes redondeados y de un color y grosor determinado. Esposible hacerlo con css?
Hasta ahora las estoy haciendo en forma manual en el illustrator, pero al llevarlas al Dreamweaver me queda un recuadro blanco por detrás (cuando las pego sobre un fondo de color).
Bueno, esa es mi duda, me gustaría saber si es posible hacerlo de una manera más simple o automática (tipo css)
Gracias!!
  #2 (permalink)  
Antiguo 16/01/2007, 12:57
Borjimante
Invitado
 
Mensajes: n/a
Puntos:
Re: esquinas redondeadas para una foto

bueno pues decirte que la unica forma que conozco de hacer las esquinas redondeadas es mediante los programas de diseño gráfico (photoshop, freehand, etc)
  #3 (permalink)  
Antiguo 17/01/2007, 02:16
Avatar de cleek  
Fecha de Ingreso: diciembre-2006
Ubicación: Atras del cocodrilo
Mensajes: 122
Antigüedad: 17 años, 3 meses
Puntos: 1
Re: esquinas redondeadas para una foto

Automatico parece y simple que digamos simple no se ve pues necesitas las medidas exactas de la imagen.

Lo que se puede hacer para agregarle esquinas redondeadas a las imagenes sin hacerlo desde un programa de diseño es hacer una tabla con la imagen que quieres como fondo y en las celdas las imagenes de las esquinas, de hecho puedes ponerle así borde completo y no solo las esquinas.

Te recomiendo que en las imagenes de las esquinas pongas la parte interior transparente y la exterior de color para que funcione bien.

De hecho sería así:
Código:
<table border="0" cellpadding="0" cellspacing="0" width="ANCHO_DE_LA_IMAGEN" height="ALTO_DE_LA_IMAGEN" background="AQUI_LA_IMAGEN.JPG">
	<tr>
		<td align="left" valign="top"><img src="ESQUINA_ARRIBA_IZQ" /></td>
		<td align="right" valign="top"><img src="EQUINA_ARRIBA_DERECHA" /></td>
	</tr>
	<tr>
		<td align="left" valign="bottom"><img src="ESQUINA_ABAJO_IZQUIERDA" /></td>
		<td align="right" valign="bottom"><img src="ESQUINA_ABAJO_DERECHA" /></td>
	</tr>
</table>
Y eso hace el truco de las esquinas

Espero te haya ayudado, saludos
  #4 (permalink)  
Antiguo 17/01/2007, 06:51
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 17 años, 2 meses
Puntos: 1
De acuerdo Re: esquinas redondeadas para una foto

Hola Cleek, la verdad es que me interesa esto que planteaste, pero no logro entenderlo del todo, a ver, yo tengo una foto de 203 x 152px, yo se trabajar en photoshop y diferentes programas de diseño (de hecho soy diseñadora gráfica) solo que me pidieron para este sitio que al incluir las imágenes se hiciera de forma "automática" por así llamarlo para que cualquiera lo pudiera hacer, por eso quiero dejar un cód o algo asi para que cualquiera ingrese el nombre de la nueva foto en cuestión y quede con los bordes redondeados y de color y grosor determinados.
Entonces, a ver si entendí, tengo que abrir lka foto en photoshop (por ej) y "cortar" la imagen en 4 partes iguales (dividiendo cada cuarto) y ponerle un nombre a cada esquina, grabándolas por separado para luego llamarlas desde el html?
Si es así, cómo se que radio le va a dar a cada esquina?
Dóinde puedo especificar el color y grosor del borde?
Bueno, espero tu respuesta y gracias!!
  #5 (permalink)  
Antiguo 17/01/2007, 07:04
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Re: esquinas redondeadas para una foto

esquinas redondeadas css
  #6 (permalink)  
Antiguo 17/01/2007, 07:13
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 17 años, 2 meses
Puntos: 1
Sonrisa Re: esquinas redondeadas para una foto

Bueno, la verdad es que tenía la esperanza de que existiera algun css que hiciera todo el trabajo, de no ser asi, creo que prefiero hacerlo con photoshop, además no son miles de fotos, el tema solo era porque este cliente quiere poder hacerlo él en cualquier momento y como obviamente no maneja programas de diseño...
Pero bueno, voy a decirle que lo hacemos asi (lo hago yo) o le dejo las esquinas rectas y listo.
Gracias a todos por los datos aportados!
  #7 (permalink)  
Antiguo 17/01/2007, 10:32
Avatar de cleek  
Fecha de Ingreso: diciembre-2006
Ubicación: Atras del cocodrilo
Mensajes: 122
Antigüedad: 17 años, 3 meses
Puntos: 1
De acuerdo Re: esquinas redondeadas para una foto

No es tan feo como parece y se puede automatizar al punto de solo darle el nombre y las medidas. Primero supongo que ya tienes recortadas las esquinas y guardadas.
  • Primero:
    En el head de tu html le escribes
    Código HTML:
    <script>
    function getImg(nombre, ancho, alto)    {
        document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+ancho+'" height="'+alto+'" background="'+nombre+'"><tr>');
        document.write('<td align="left" valign="top"><img src="ESQUINA_ARRIBA_IZQ" /></td>');
        document.write('<td align="right" valign="top"><img src="EQUINA_ARRIBA_DERECHA" /></td>');
        document.write('</tr><tr>');
        document.write('<td align="left" valign="bottom"><img src="ESQUINA_ABAJO_IZQUIERDA" /></td>');
        document.write('<td align="right" valign="bottom"><img src="ESQUINA_ABAJO_DERECHA" /></td>');
        document.write('</tr></table>');
     }
    </script> 
  • Segundo, reemplaza ESQUINA_ABAJO_IZQUIERDA por la imagen de tu esquina e igual con todas las esquinas

  • Finalmente, cada vez que quieras poner una imagen solo le dices:
    Código HTML:
    <script>getImg('el_nombre.gif', 203, 152)</script> 


Espero te haya servido, saludos


Por cierto y casi se me olvidaba, NO es necesario recortar nada (excepto las esquinas) ni meterse con nadie, algo artificial pero por dios, es mejor que editar y editar imagenes
__________________
:: nocturno ::
inGenia soluciones

Última edición por cleek; 17/01/2007 a las 10:42 Razón: olvido
  #8 (permalink)  
Antiguo 18/01/2007, 07:19
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 17 años, 2 meses
Puntos: 1
Sonrisa Re: esquinas redondeadas para una foto

A ver, perdón por mi ignorancia, digamos que yo comienzo con una foto que tiene obviamente los bordes rectos, bueno, lo que sugeris es que corte cada esquina, eso lo hice, pero son esquinas con los bordes rectos no? Porque si tengo que recortar las esquinas con los bordes ya redondeados entonces ya hice el trabajo!
Tengo esa duda, si pudieras contestarme te agradecería mucho.
Gracias.
  #9 (permalink)  
Antiguo 18/01/2007, 07:44
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 21 años, 8 meses
Puntos: 7
Re: esquinas redondeadas para una foto

Hola

he visto esta web y parece que puede funcionar con CSS sin manipular la imagen

http://www.cssplay.co.uk/opacity/png2.html

no he tenido tiempo de estudiarla pro la pongo por si sirve.
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #10 (permalink)  
Antiguo 18/01/2007, 12:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: esquinas redondeadas para una foto

Desgraciadamente, el título de ese artículo es:

Partial Opacity II (Not for IE5+ or IE6)

Ni siquiera ellos los resuelven todavía.
Como he puesto en otro mensaje: "algún día todos los navegadores serán respeturosos, o algún día todos usaremos navegadores respetuosos"

Mikel.
  #11 (permalink)  
Antiguo 18/01/2007, 12:40
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 19 años, 5 meses
Puntos: 4
Re: esquinas redondeadas para una foto

Puede que esto os sirva. Mirar los ejemplos a ver que os parece:

http://www.curvycorners.net/

Saludos,
__________________
sergiold
  #12 (permalink)  
Antiguo 18/01/2007, 13:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: esquinas redondeadas para una foto

Yo diría que es exactamente lo que busca
Muy buen enlace. Saludos.

Mikel.
  #13 (permalink)  
Antiguo 18/01/2007, 13:43
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 19 años, 5 meses
Puntos: 4
Re: esquinas redondeadas para una foto

Me alegro de que sirva.

Saludos,
__________________
sergiold
  #14 (permalink)  
Antiguo 18/01/2007, 16:17
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 17 años, 2 meses
Puntos: 1
De acuerdo Re: esquinas redondeadas para una foto

Gracias por el enlace, esta noche lo veo a ver que tal, gracias nuevamente!!!
  #15 (permalink)  
Antiguo 19/01/2007, 18:53
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 17 años, 2 meses
Puntos: 1
De acuerdo Re: esquinas redondeadas para una foto

Bueno, les comento, me bajé el curvyCorners-v1-2-9-beta.zip, que es la última versión disponible, son 7 archivos de los cuales 2 son ejemplos y 2 son fotos, 1 más es la licencia y los 2 restantes son archivos de JS, que no tengo idea de dónde se abren ni cómo.
Si me pueden contestar este detalle se los voy a agradecer mucho,ya que parece ser lo que estoy buscanco pero no lo pueo poner en práctica aún.
Gracias Sergiold!
  #16 (permalink)  
Antiguo 19/01/2007, 19:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: esquinas redondeadas para una foto

Si usas windows los puedes abrir sencillamente con el block de notas: botón derecho del ratón, "abrir con", block de notas.

Mikel.
  #17 (permalink)  
Antiguo 20/01/2007, 08:18
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 19 años, 5 meses
Puntos: 4
Re: esquinas redondeadas para una foto

Mikmoro tiene razón, con el Bloc de Notas de Windows puedes abrirlo, de todas formas no necesitas abrir ningún archivo js.

Uno de los archivos esta comprimido para que ocupe menos, el otro es lo mismo pero supongo que con saltos de linea, comentarios para entender el código...

Tu, en principio no necesitas abrir estos archivos, te vasta con seguir las instrucciones de aquí:

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

Si no entiendes algo, simplemente pregunta!

Saludos,
__________________
sergiold
  #18 (permalink)  
Antiguo 21/09/2008, 13:11
 
Fecha de Ingreso: abril-2008
Mensajes: 20
Antigüedad: 15 años, 11 meses
Puntos: 0
Respuesta: esquinas redondeadas para una foto

Hola amigos,
Hice un banner y unos botones pero quiero que sus bordes se vean como los de esta web: http://www.comchrist.com/

Quisiera que mis botones se vieran como los que dice JOURNEY INWARD...etc

Las imagenes tienen los bordes redondeados tanto de ADENTRO como de AFUERA. Si me pudieran decir como hago esos bordes con PHOTOSHOP?

Mil Gracias
  #19 (permalink)  
Antiguo 21/09/2008, 14:35
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Respuesta: esquinas redondeadas para una foto

El mensaje original es de hace más de 1 año. Por favor, no reviváis temas tan antiguos.

Saludos,
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 04:40.