Efecto imágenes apiladas | Oloblogger Efecto CSS muy fácil para simular que una imagen está apilada sobre otras. Esto lo conseguiremos con tan solo añadir una porción de código...

12 de mayo de 2014

Efecto imágenes apiladas

Imágenes apiladas
Efecto CSS muy fácil para simular que una imagen está apilada sobre otras.

Esto lo conseguiremos con tan solo añadir una porción de código a nuestra hoja de estilo. A partir de ahí sólo será cuestión de incorporar una caja (div) con una clase creada ad hoc dispuesta de manera que "rodee" la imagen. 

Todas las imágenes a las que les añadamos esa clase que en este ejemplo hemos nombrado como separator, se verán como si tuvieran dos imágenes más debajo algo desordenadas, por lo que he añadido una opción que hará que al pasar el puntero por encima de la imagen principal, se "cuadren" las que simulan estar debajo.


Suponiendo que ya tuviéramos la imagen, el HTML a añadir sería el que a continuación he marcado con color más oscuro:

<div class="separator"><a href="javascript:void();">
<img src="URL_IMAGEN" />
</a></div>


Y el CSS que habría que añadir en nuestra plantilla sería el siguiente:

.separator {
margin: 20px;
text-align: center;
clear: both;
}
.separator a {
display: table;
position: relative;
z-index: 10;
max-width: 94% !important;
margin: 10px auto !important;
}
.separator img {
display: table-cell;
max-width: 100% !important;
padding: 15px;
background: #fff;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.separator a:before, .separator a:after {
content: "";
display: block;
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 100%;
background: white;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-transition: .3s all;
-moz-transition: .3s all;
transition: .3s all;
}
.separator a:before {
z-index: -2;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.separator a:after {
z-index: -3;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
}


Los pseudoelementos :before y :after no funcionan con imágenes y ese es el motivo por el que no podemos prescindir de la caja auxiliar y por el cual el código queda algo más largo de lo que en un principio sería necesario si no estuviéramos trabajando con img.


El detalle para Blogger


El detalle no es otro que el uso del nombre separator no es casual, sino que lo elegí de manera muy consciente. Resulta que esa caja auxiliar que ya he mencionado varias veces, la añade Blogger automáticamente siempre que subimos una imagen con el editor de entradas. Además le asigna una clase que ¿cuál diríais que es? Pues eso, separator.

Así que para Blogger no es necesario ir añadiendo la caja que rodea la imagen a mano, sino que simplemente deberemos añadir el CSS a la plantilla (entre las etiquetas skin) y después de eso TODAS las imágenes que subamos incorporarán este efecto sin necesidad de que toquemos el HTML.

Efecto reordenar imágenes


Bueno y falta lo del efecto para el hover. Simplemente habría que añadir al CSS esta regla adicional y listo:

.separator a:hover:before, .separator a:hover:after {
top: -2px;
left: 2px;
bottom: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}

Entrada ilustrada con una imagen de Monkeypainter y código inspirado fuertemente (vamos, casi plagiado) en una idea vista en Inspectelement.

¿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

15 comentarios :

  1. Muy bueno Oloman, muy buen aporte.

    ResponderEliminar
  2. Hola!!! Está genial esto!!! lo quiero para mi blog....tengo otro efecto en las fotos de mis entradas, cómo lo saco y lo cambio por este?? Saludos!!!

    ResponderEliminar
    Respuestas
    1. Depende ¿Cual es ese efecto? ¿Está hecho con CSS, con JavaScript...?

      En cualquier caso y de manera genérica, sólo hay que quitar lo que en su momento añadieras.

      Eliminar
    2. Hola! Es un efecto con CSS3 (border-radius) pero me gustaría cambiarlo por este, entonces, sólo tengo que ir a donde está el efecto en la plantilla y cambiarlo por esto....??? nada más??? Saludos!

      Eliminar
  3. Nada más. Incluso si es eso único lo que tienes añadido (esquinas redondeadas), puedes dejarlo y añadir este sin problemas.

    ResponderEliminar
    Respuestas
    1. Otra pregunta: en las páginas estáticas no tiene aplicado el efecto de esquinas redondeadas, entonces, subiendo la imagen a Picasa, agregando en el HTML de la página este efecto con los estilos, ya sería suficiente??? Es decir, se pueden tener dos efectos distintos para las imágenes en el blog, uno para las entradas y otro para las páginas estáticas??? Saludos!!!!

      Eliminar
    2. Para eso habría que poner condiciones, de manera que el estilo "normal" se ejecutará en todo tipo de páginas, pero al llegar a las estáticas se aplicará otro.

      Ahí ya tienes que dejar el "normal" entre las etiquetas SKIN y añadir el otro antes del cierre del HEAD (</head>), más o menos así:

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <style>
      REGLAS CSS PARA LAS PÁGINAS ESTÁTICAS)
      </style>
      </b:if>

      Eliminar
  4. Buenos días Oloman,
    llevo un tiempo buscando la forma de hacer un truco en blogger y el Potro me dijo que buscara aquí pero no encuentro la entrada, por eso te escribo en esta.

    No se si se podra hacer en blogger, que ahora esta de moda en las web de juegos, y es poner una pequeña imagen de "Nuevo" por ejemplo, encima de la imagen principal de la entrada, en las últimas 5 o 6 entradas de manera automática allí donde aparezca la imagen, ya sea en el "Home", "post relaccionados", "páginas de etiquetas", etc. Lo he buscado en varios sitios y no he encontrado nada de este tema.
    Te pongo una imagen para que lo puedas ver mejor.

    https://lh3.googleusercontent.com/-39s4SP1rQ94/VPjKogPAeHI/AAAAAAAAFDg/BeAyaXNE29A/w702-h505-no/pantallazo.JPG

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Javier

      Para poner una imagen fija sobrepuesta a TODAS las imágenes sería con este sistema pero hacerlo sólo con las últimas entradas y sólo esas, no sabría cómo hacerlo. Lo siento.

      Eliminar
  5. Muchas gracias, ya me imaginaba que no se podia en blogger, porque en los sitios que lo he visto utilizan (PHP), de todas maneras le sacare algun uso a ese sistema.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. A ver... con JavaScript seguramente también se pueda, pero lo complicado es buscar un patrón para marcar las imágenes. Es decir ¿cómo detectamos automáticamente cuales son las últimas 5 imágenes publicadas?

      Ahora mismo se me ha ocurrido que si las imágenes tienen determinado nombre que coincida con la fecha, la cosa sería más fácil, pero no sé si es viable en tu proyecto nombrarlas así.

      Eliminar
  6. La verdad, no lo sé, me puedes poner algún ejemplo?

    ResponderEliminar
    Respuestas
    1. Me refiero a que el nombre de las imágenes sea el de la fecha. Por ejemplo 20150329.jpg
      Quizás con eso puedas montar algún JS que seleccione de las que "ve", sólo las que estén entre determinado intervalo de fechas. Esa sería la idea, pero no me pidas que lo haga yo :)

      Eliminar
  7. OK, gracias por la idea Oloman,
    un saludo

    ResponderEliminar