Efecto cinta adhesiva en imágenes | Oloblogger En alguna ocasión he intentado hacer esto de una manera más simple, pero lo cierto es que no lo he l...

14 de enero de 2011

Efecto cinta adhesiva en imágenes

En alguna ocasión he intentado hacer esto de una manera más simple, pero lo cierto es que no lo he logrado. Unas veces no funcionaba en un navegador, otras en el otro, otras requería un ancho de imagen fijo... De momento es una chapucilla, pero puede que a alguien en la que estoy pensando, le sea suficiente ;)

La cosa va de colocar una cinta adhesiva (fixo, celo, scoth tape o como quiera que le llameis vosotros) en la parte superior de las imágenes que queramos. Evidentemente será con una clase CSS, para que podamos variar o incluso suprimir el efecto masivamente, con sólo cambiar las propiedades de la correspondiente clase. La principal ventaja es evitar tener que estar usando programas de edición para cada imagen que publicamos.




El truco principal consiste en la creación de una capa con un alto y ancho igual al de la imagen (cinta adhesiva) que solaparemos gracias a un z-index y que generaremos con un span. Para que quede dónde nos interesa, metemos todo dentro de otra capa (efectoimg) con posicionamiento relativo y que nos servirá para poder dar propiedades independientes a dicho span y a la propia imagen.

Pero más fácil es verlo que explicarlo, así que comenzamos con el estilo, insertándolo en la plantilla. En Blogger, como es habitual, habrá que ponerlo antes de ]]></b:skin>. En las líneas más importantes se incluyen comentarios que podeis borrar sin problemas.

/* IMAGENES SUPERPUESTAS */
.efectoimg {
margin: 20px 10px auto; /* separación entre imágenes */
position: relative;
float:left; /* para poder colocar varias imágenes inline */
}
.efectoimg img {
/* simulando marco fotografía */
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}

.efectoimg span {
/* capa con la imagen superpuesta */
width: 77px; /* dimensiones de la imagen del background */
height: 27px;
display: block;
position: absolute;
top:-12px; /* desplazamiento vertical */
left:50%; /* centrado horizontal */
margin-left:-38px; /* la mitad del width para centrar del todo */
background: url(http://1.bp.blogspot.com/-dETab-2K0no/UGiXzPoOIII/AAAAAAAAFZ8/-71QGwLmZQs/s1600/cinta.png) no-repeat;
z-index:1;
}
.efectoimg a {
text-decoration: none; /* eliminando subrayado enlaces */
}

Todo lo marcado en verde es configurable, aunque la parte de .efectoimg span tiene que ajustarse necesariamente al tamaño de la imagen que pongamos en el background.

Una vez que todo esto está en nuestra plantilla, ya sólo falta aplicarlo a la imagen correspondiente:

<div class="efectoimg">
<a href="url_enlace"><span></span><img alt="Imagen" src="url_imagen" /></a>
</div>

Como podeis ver, al codigo normal de una imagen con enlace, sólo le hemos añadido para poder conseguir el efecto, un div con la clase efectoimg y un span sin contenido. Las propiedades de ese span con ancho y alto determinado, así como la imagen de su fondo, serán la que conviertan ese span en lo que queremos.

Os recuerdo que esta imagen de cinta adhesiva puede ser cambiada por otra cualquiera que vuestra imaginación decida. Si como en este caso, tiene que tener transparencia, el formato siempre será PNG. Para cualquier otro tipo de motivo, dará igual usar un GIF o un JPG.

Truco conseguido gracias a la idea de Webdesignerwall.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

34 comentarios :

  1. Hola Oloman, me adivinaste el pensamiento, esto ya lo tenía pensado hacer para compartirlo y te me has adelantado, de cualquier forma luego lo publicaré por que me encanta, que bueno que lo compartes.

    En FUZZIMO puedes encontrar texturas de tape estilo viejo muuuy padres, yo las usé en la plantilla Mi diario vivir, y quedé encantada :).

    Un abrazo!

    ResponderEliminar
  2. pff!!! veo que te ha llevado muchisimo trabajo. No solo has atendido a mi consulta si no que has tenido el gran detalle de avisarme de que lo habias conseguido. Muchisimas gracias por este estupendisimo blog y por todo el trabajo que pones en el dia a dia. Ahora solo espero poder conseguir ponerlo :D

    ResponderEliminar
  3. Karla, tenía esto en mente hace casi un año, pero nunca me había puesto en serio hasta que la que comenta ahí abajo tuyo, me dijo que le hacía falta. Y aún así, la hice esperar unos dos meses!!! Si no me empujan, casi siempre me cuesta mucho sacar tiempo para experimentar cosas nuevas.
    Lo de Fuzzimo está genial, así que muchas gracias por el link. Seguro que cuando redactes tu post aportarás algo interesante. Para eso están los blogs, para intercambiar ideas y pareceres desde distintos puntos de vista ;)

    Cordobess@, estás obligada a conseguirlo ;D

    ResponderEliminar
  4. jajajajjaja xD ya esta el codigo primero incluido querido amigo, pero...el segundo, ¿supongo que ha de ponerse manualmente en cada imagen a subir no?
    He intentado hacer una prueba con la imagen de mi ultima entrada, y casi me da un telele al verla tan gigante! xD algo hice mal...jajajaja y no vi el celo por ningun ladete :O ;) una ayudita please?

    ResponderEliminar
  5. Cordobess@. El codigo que en el último trozo pongo en verde, lo tienes que añadir al de la imagen de la entrada. No sé que habrás tocado para que la imagen se viera más grande. Este código no afecta a eso :D

    ResponderEliminar
  6. Ok Oloman, seguidos todos los pasos, pero no aparece el celo, todo encuadrado perfecto :D si puedes y quieres mira un segundo la entrada del Blog: Criminal Descubierto Veras como he puesto el codigo a la primera imagen. Le cambia el marco pero no le añade el celo. He mirado si funciona la url de la imagen del celo, y funciona bien.

    ResponderEliminar
  7. No veo los span delante de la etiqueta img ¿es eso?

    ResponderEliminar
  8. ¿Podrias añadir un ejemplo de propiedades para el contenido del span? Yo los habia añadido sin nada dentro...en fin jejeje torpecilla soy para rato. perdona las molestias oloman ;)

    ResponderEliminar
  9. El span tiene que ir vacío, tal cual viene en el ejemplo. Si grabaste la parte CSS, ya se "llenará". Me tengo que ir. Si no lo solucionas lo veo en otro momento Cordobesa

    ResponderEliminar
  10. ok ya lo miraremos, si lo pongo vacio se me borra automaticamente. si entre la apertura de codigo span y /span escribo algo aparece el celo. Voy a escribir algo para que puedas verlo y lo dejo un par de dias en el enlace que te he dejado. Un saludo y gracias otra vez.

    ResponderEliminar
  11. Me salio igual que a cordobess@ una imagen tamaño Original muuuuuy grande! xD

    ya lo quite, intentare de nuevo hacerlo mas tarde!

    Saludos gente!

    ResponderEliminar
  12. Uf... le da un estilo grunge a las imágenes... ¡¡Está brutal!!

    ResponderEliminar
  13. Hola, hola, hola.

    Ya sé lo que era. Simplemente un cierre de comentario olvidado en el código que puse. Aquí falta al final una barra:
    /* capa con la imagen superpuesta *

    Arreglado en el post.

    ResponderEliminar
  14. ¿Hay alguna forma de que aparezca en todas las imagenes que e subido sin tenerlas k poner de 1 en 1?

    ResponderEliminar
  15. Hoal Oloman la verdad me parece muy bien este tipo de cosas pero respecto a que blog tengas o que diseño tengas....
    hablando de otra cosa, tengo un problema con mi blog cada que entras aparece un mensaje de servidor Bloxdir, www.bloxdir.com y la verdad no se porque quisiera saber si tu sabes porque o como seo rigina esto para pdoer kitarlo... :D www.winboox.blogspot.com o si tenga algo que ver con mi internet pasare a ver tu respuesta o si puedes dejarla en el blog cuando cheques el problema te lo agradeceria infinitamente gracias y saludos

    ResponderEliminar
  16. Raúl, lo desconozco, aunque me da la impresión de que no. Para poner dos capas con sendas imágenes superpuestas, creo que siempre habrá que añadir algo 'a mano'.

    Mike, a mí lo único que me sale es un aviso para introducir usuario y contraseña, aunque no funciona y con cerrarlo es suficiente. Probablemente esté construido con un script que entre otro código, contenga un ALERT. En tu plantilla no aparece, así es que lo más probable es que lo tengas metido en un gadget. Busca ese ALERT por ahí y quita ese código si no lo utilizas.

    ResponderEliminar
  17. Muchas gracias Oloman revisare y lo resolvere si es eso, en verdad gracias y un saludo

    ResponderEliminar
  18. Me gusta, me gusta y me gusta :D
    Y esas fotos paisanico jajajaja como tira eh :)

    ResponderEliminar
  19. Ahora si que sii!!! eres un fenomeno Oloman! ;) mil gracias!!!! Yujuuuuuuu!!!!

    ResponderEliminar
  20. Pues sí Gem@, tenía que buscar algunas para el ejemplo y pensé en esas :)

    ResponderEliminar
  21. Maldicion, no puedo hacer que la fotografia quede centrada. Queda alineada a la izquierda... y el textto que puse "debajo" de la imagen, que da pegado a ella. he probado varias veces, pero no he podido centrar mas que la cinta adhesiva. La fotografia siempre queda a la izquierda. ¿Que puedo hacer? Disculpa tanta insistencia, pero no me agrada la idea de comenzar a publicar letras pegadas alrededor de las imagenes XD

    ResponderEliminar
  22. Juansi, eso es porque no has hecho mucho caso de los comentarios que incluí en el código ;)

    En .efectoimg, dónde pone "para poder colocar varias imágenes inline", intentaba explicar que ese FLOAT servía para poder poner varias imágenes una a continuación de la otra. Si no las quieres flotando, entonces quita esa línea y centra con un margin:20px auto;

    ResponderEliminar
  23. Jajaj.. toda la razón. Gracias..

    P.D.= Gracias por el dato de profile banner para facebook. Me encantó!!

    ResponderEliminar
  24. Hola... hoy estaba visitando un blog que de casualidad me encontre y me di cuenta que sus imagenes tenían un efecto de ''marco'' y ''sombra'', es por eso que llegue a tu blog de nuevo (ya en alguna otra ocasión había venido por trucos) y hoy que busque ver si tenias algo parecido, no lo encontre, como sea esta esto del adhesivo que me ha encantado y espero ponerlo en práctica en algun momento, pero si me gustaria saber si me puedes ayudar con eso de las imagenes con sombra y marco...

    te dejo el link del blog que te digo
    http://www.decoracionmesas.com/...

    ResponderEliminar
  25. Artificial es tan sencillo que por eso nunca lo expliqué. Se hace añadiendo a la clase .post img un padding con fondo blanco y efectos CSS3 de sombra para cajas (box-shadow). A ver si saco un rato y lo redacto, pero mientras tanto, puedes intentar averiguar como van esas propiedades, que ando de vacaciones y lo mismo tardo ;)

    ResponderEliminar
  26. Vaya, esto esta bastante interesante. Muchas gracias por el código, lo implementé en un par de fotos para probar y quedó genial. (Comenté pero no salio, espero que no aparezca doble comen). Saludos Oloblogger =)

    ResponderEliminar
  27. Gracias a tí por andar tanto por aquí Olmo.

    ResponderEliminar
  28. Me funcionó todo muy bien, pero si hago que la imagen no quede siempre a la izquierda, sino como la subí originalmente, no coincide con la cinta. Saqué el float como le dijiste a Juansi, la imagen se acomoda bien como debía, pero la cinta me queda siempre centrada.

    Por ahora lo estoy aplicando solo a las imágenes que quiero centradas, je.

    Muchas gracias y disculpa la joroba.

    ResponderEliminar
    Respuestas
    1. Actualmente hay otras opciones más cómodas con CSS3, after y before, pero primero tengo que estudiarlas yo para poder explicar algo al respecto ;)

      Eliminar
    2. No hay problema ni apuro, cuando lo hayas estudiado y saques algo al respecto, aquí estaré yo, como siempre :D

      Mientras me las estoy arreglando bien con este método, tampoco es taaan engorroso.

      Gracias!!

      Eliminar
  29. Hola, he utilizado mucho el efecto cinta en mi blog, pero no he tenido la precaución de guardar la imagen del la cinta adhesiva. Ahora ha desaparecido de su ubicación:

    http://img214.imageshack.us/img214/2161/cinta.png

    Y también de mi blog, ¿podrías echarme un cable?

    Gracias

    ResponderEliminar
    Respuestas
    1. Pues de casualidad que la tenía en otro sitio. En el post está actualizada la dirección. Esta vez, si la vas a usar frecuentemente, alójala tú mismo también. Así la tenemos los dos ;)

      Eliminar
  30. ok, muchas gracias. Ahí te dejo mi blog:
    www.dalealcocounpoco.com

    Un abrazote!

    ResponderEliminar
    Respuestas
    1. Oye, pues si tu sitio es ese y se llama así, quizás te interese este otro sitio mío ;)

      Eliminar