Atualmente estou reconstruindo meu portfólio e como parte disso estou puxando 3 imagens do Instagram, então posiciona o UL relativo e todos os LIs absolutos para que fiquem um em cima do outro.
Para obter um efeito de imagem empilhada, giro a capacidade de separação de cada uma dessas imagens usando : nth-child ()
.instagram li:nth-child(1) {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg)
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
O problema é o suporte para: nth-child () no Firefox 3. Se isso for um problema, simplesmente use uma classe única em vez desses 3 itens da lista e use-a em vez de nth-child.
Aqui está o resultado
Esta é a minha primeira postagem no coderwall, espero que gostem da dica.