esquinas redondeadas para una foto

[marilinadg]

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!!

[Borjimante]

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)

[cleek]

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

[marilinadg]

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!!

[metacortex]

esquinas redondeadas css

[marilinadg]

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!

[cleek]

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

[marilinadg]

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.

[bhagat]

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.

[Mikmoro]

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.

[sergiold]

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

http://www.curvycorners.net/

Saludos,

[Mikmoro]

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

Mikel.

[sergiold]

Me alegro de que sirva.

Saludos,

[marilinadg]

Gracias por el enlace, esta noche lo veo a ver que tal, gracias nuevamente!!!

[marilinadg]

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!

[Mikmoro]

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

Mikel.

[sergiold]

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,

[rossz]

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

[JavierB]

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

Saludos,