Imágenes con marcos

Comparte esta nota 18.07.04

Mientras leía atentamente el el tutorial Photoshop: Actions que Diego escribió con el fin de facilitar la tarea a aquellos que ponen marcos a las imágenes, se me ocurrió que podría aprovechar y compartir dos técnicas distintas que nos ayudarán a ahorrar tiempo y ancho de banda.

Update:

Gracias a Sosa ahora contamos con una versión mucho más correcta: Usando padding y backgroud

Uso de transparencias y backgrounds

En este primer caso vamos a ver como poner un marco a una imagen tal y como lo hacemos en este sitio junto al título de cada anotación.

Ingredientes:
marco
En primer lugar necesitamos una imagen que hará la función de marco. Esta imagen es un GIF y tiene el fondo transparente, de modo que luego podremos mostrar la otra imagen “a través” del área transparente.
Imagen
Obviamente también vamos a necesitar la imagen que queremos mostrar con el marco.

Lo que vamos a hacer es bastante sencillo, vamos a usar la propiedad background-image para mostrar la imagen a través del área transparente del marco. Sin embargo, antes de continuar, es importante saber que si bien parece que esta técnica resuelve muchos problemas genera un nuevo inconveniente y es que semánticamente vamos a engañar a los robots de busquéda que van a entrar a nuestra web y van a cree que el marco transparente es la imagen importante, cuando realmente no es así. No es un problema serio, pero quería dejarlo claro antes de continuar.

La implementación
El proceso es bastante sencillo. Vamos a suponer que tenemos la imagen dentr un DIV con la clase contenedor.

<div class="contenedor">
<img src="polaroid.gif" alt="Polaroid" />
</div>


Lo primero que hacemos, en nuestra hoja de estilos es añadir este nuevo selector:

.contenedor img{
     background-position: 3px 3px;
}


En el siguiente y último paso, lo que vamos a hacer es hacer la llamada a la imagen del marco y poner como fondo la imagen que realmente queremos destacar:

<div class="contenedor">
<img src="marco.gif" alt="Polaroid" style="background-image: URL(polaroid.gif);"/>
</div>

Hay que tener en cuenta que si bien podemos determinar la background-image en la hoja de estilos, conviene hacerlo en el HTML ya que es probable que queramos tener distintas imagenes en una misma página y en una hoja de estilos podemos usar un único background por selector.


Método alternativo y semáticamente correcto

En los comentarios Sosa sugería otro método, que ha resultado ser mucho más sencillo y eficiente. De hecho, no necesitamos las transparencias asi como tampoco nos encontramos con el problema semántico del método anterior.

Usamos paddings y background
En este caso, invertimos el orden de las imágenes por lo que en nuestro código html tendremos una llamada a una imagen perfectamente correcta dentro de un elemento cualquiera:

<div class="contenedor">
<img src="polaroid.gif" alt="polaroid">
</div>

En nuestra hoja de estilos agregamos este selector con estás propiedades:

.contenedor img{
padding:3px;
background-image: URL(marco.gif);
}

El resultado es exáctamente el mismo y todo es mucho más correcto. Sólo tenemos que acordarnos de ajustar el padding al ancho del marco que estemos usando.

23 comentarios

A Proletarium Blog › Im?nes con marcos

20.07.04

[...] Imágenes con marcos

manu
[20 July, 2004]

El nuevo HTMLife muestra una forma de hacer Poraloids con CSS

Este post esta guardado bajo [...]

html life » Marcos con Rollover

06.08.04

[...] Hace unos días publicamos un tutorial en el que os explicábamos cómo crear imágenes con marcos. En esta ocasión, además de poner marcos, convertiremos las imágene [...]

afrael

19.07.04

Walter el diseño esta muy muy bueno… Me gustan los colores obscuros :)

Es increible lo util que puede ser el background-image, si se explota correctamente.

FrancoG

19.07.04

felicitaciones por el rediseño y por esta nueva etapa!
nos estaremos leyendo!

stan

19.07.04

Estupendo man… esto es realmente muy interesante y sobre todo muy aplicable.

Tambien te doy una felicitacion por el fantastico nuevo giro que le has dado al sitio… la verdad es que ya estaba alucinando con la cajita que duro como un mes del otro diseño.

Salva

20.07.04

Me gustó mucho el post. El resultado puede ser muy vistoso si se eligen marcos bonitos. Espero que sigais en esta línea, haciendo posts con trucos e ideas para aplicar a nuestros blogs. ¿Tocaréis también la usabilidad?

Un saludo.

manu

20.07.04

Una idea seria la posibilidad de insertar texto en el cuadro que queda debajo de la foto. Muy bueno el articulo :D

sosa

20.07.04

muy chido el rediseño y muy buen tip.

Un comentario, ¿porque para evitar el problema semántico (y la mexcla de prsentacion y contenido que tanto ocupa a los que saen en estos moemntos) no inviertes las imágenes?

Que el marco sea el background y a la imagen le aplicas un padding de 3px. según yo, debe de dar el mismo efecto, pero así tienes separado contenido y presentacion.

Walter

20.07.04

Muy buena idea Sosa… esta noche en casa lo pruebo y si no me da problemas añado un update.

Salva, vamos a publicar tutoriales con cierta frecuencia, y en general añadiremos contenidos relacionados con el diseño y desarrollo de sitios web.

Walter

20.07.04

Como podrás ver ya he puesto el update y también le he aplicado el cambio a htmllife. Muchas gracias por la sugerencia.

sosa

21.07.04

:D Pues, nada que es todo un honor contribuír con un granito de arena.

mark

02.08.04

Hola Walter, antes que nada gracias por el link a duopixel, no conocía tu sitio, pero está realmente impresionante, me estoy devorando el contenido en este momento.

Por otra parte, tengo una sugerencia más para esta anotación. Porqué no, para ser minimalistas con el mark up (eliminando el uso innecesario de divs), usas <img src="polaroid.gif” alt="polaroid" class="contenedor">? Te debe de dar exactamente el mismo resultado.

Anonymous

05.05.05

b nbvm nm n ,

pancho cachondo

02.07.05

gaaaaayyyyyyyyyyyyyyyyyyyyyyyy

Anonymous

25.12.05

Hi! Do not prompt as me to send e-mail? = (

Anonymous

27.12.05

hi
Who today saw Fils. Whether there will be it still here today?

Anonymous

27.12.05

Hi
Good site. It would be desirable to return again and again!

Anonymous

27.12.05

Than will be engaged today?

MiBlogg :: Una de Technorati :: February :: 2006

10.02.06

[...] Imagenes con marcos [...]

fdsfsdfsdfsd

18.04.06

sdfsdfdsfsdfsdfsdfdsfsd

Owen

01.11.06

black and latina bitches fucking big dicksWatch these horny sluts taking it in the ass for the first time and getting their virgin butts ripped wide open.
black sex big dickIt’s an experience they will never forget. Frenzied 3some and wild anal actions caught on video are waiting here for you.

Anonymous

16.04.07

HHHHHHHHHHHHHHHHHHHHHHHH

Ezequiel

29.04.08

Buenas, suelo usar este metodo, pero usar padding en imagenes en ie6 hace que todo se descuadre, solucion? ponerle en css al img
position:absolute;

saludos!

Deja un comentario

Cerrar
Compartir con un amigo