CSS3 – Criando uma galeria polaroid

Olá, pessoal! Nesse post aprendemos a criar uma galeria simples utilizando CSS3. Hoje trabalharemos com algo um pouco mais elaborado, mas bem simples de codificar. Se você construiu o que foi feito aqui, para chegar no resultado abaixo basta usar a criatividade.

Tudo foi feito com CSS3 apenas, não utilizei Jquery. A ideia é que, ao passar o mouse sobre uma foto, ela se destaque das demais, como você pode ver na terceira foto abaixo:

Mãos a obra!

O primeiro passo é definir um background legal e a div principal. Isso foi feito como no exemplo abaixo:

[sourcecode language=”html”] body {
background: url(images/bamboo-texture.jpg) repeat;
}

#container {
width: 600px;
margin: 40px auto;
}
[/sourcecode]

Coloque as imagens em sua página, como no exemplo abaixo, dentro do container principal:

[sourcecode language=”html”] <ul class="gallery">
<li><a href="#" class="pic-1"><img src="images/imp_01.jpg" alt="" /></a></li>
<li><a href="#" class="pic-2"><img src="images/imp_02.jpg" alt="" /></a></li>
<li><a href="#" class="pic-3"><img src="images/imp_03.jpg" alt="" /></a></li>
<li><a href="#" class="pic-4"><img src="images/imp_04.jpg" alt="" /></a></li>

<li><a href="#" class="pic-1"><img src="images/imp_05.jpg" alt="" /></a></li>
<li><a href="#" class="pic-2"><img src="images/imp_06.jpg" alt="" /></a></li>
<li><a href="#" class="pic-3"><img src="images/imp_07.jpg" alt="" /></a></li>
<li><a href="#" class="pic-4"><img src="images/imp_08.jpg" alt="" /></a></li>

<li><a href="#" class="pic-1"><img src="images/imp_09.jpg" alt="" /></a></li>
<li><a href="#" class="pic-2"><img src="images/imp_10.jpg" alt="" /></a></li>
<li><a href="#" class="pic-3"><img src="images/imp_11.jpg" alt="" /></a></li>
<li><a href="#" class="pic-4"><img src="images/imp_12.jpg" alt="" /></a></li>
</ul>
[/sourcecode]

Como estamos utilizando uma lista, é importante setar o marcador para nulo, para que não tenhamos problemas com as bolinhas 🙂 Repare que coloquei um link antes de cada imagem. Caso você venha a utilizar esse código em um projeto real, ele será bem usual e permitirá redirecionar o seu conteúdo. Não se preocupe com as classes que foram setadas nas imagens – trataremos delas adiante.

[sourcecode language=”html”] li{
list-style:none;
}
[/sourcecode]

O próximo passo é trabalhar com as imagens. Pode ser que você prefira que cada uma tenha um tamanho, mas como optei por todas com tamanho padronizado, criei um estilo. Seja qual for sua escolha, não esqueça de setar a position para relative para que o efeito de rotação funcione. Para que as imagens fiquem um pouco transparentes, utilizei o opacity e crie um estilo hover, para que as fotos tenham opacidade quando o usuário passar o mouse sobre elas.

[sourcecode language=”html”] img{
width:250px;
height:250px;
position: relative;
opacity: 0.70;
}

img:hover{
opacity: 1;
}

[/sourcecode]

Agora trabalharemos com o efeito polaroid. Não foi utilizada nenhuma imagem, somente CSS. Com o padding definimos um espaço interno para a propriedade. Ao utilizar o background colorido temos o efeito da polaroid. Para que fique visualmente mais bonito, colocamos uma borda fina e sólida, de 1px, como contorno. Lembre-se que esse estilo é aplicado aos links a, ou seja, estão externos à nossas imagens. Caso você tenha outros links em sua página, como estamos especificando que estes estarão dentro de ul.gallery você não encontraria nenhum problema. Para que tenhamos um espaçamento entre as fotos foi utilizado o margin e para criar um efeito de sombra sutil, utilize o box-shabow – saiba mais aqui e aqui .

[sourcecode language=”html”] ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
margin-bottom: 15px;
margin-right:10px;
-moz-box-shadow: 0px 2px 15px #333;
-webkit-box-shadow: 0px 2px 15px #333;
-o-box-shadow: 0px 2px 15px #333;
}
[/sourcecode]

Grande parte já foi desenvolvido e, se você optar por visualizar sua página aqui, verá as imagens em caixas de polaroid lado a lado, sem rotação. O que faremos por último é adicionar uma rotação a essas imagens. Para que elas fiquem com um efeito meio “bagunçado”, criei quatro estilos, que apliquei alternadamente. A propriedade z-index também foi aplicada aleatoriamente, para que as imagens fiquem umas sobre as outras.

[sourcecode language=”html”] ul.gallery li a.pic-1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);

}
ul.gallery li a.pic-2 {
z-index: 2;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}
ul.gallery li a.pic-3 {
z-index: 4;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
}

ul.gallery li a.pic-4 {
z-index: 3;
-o-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
[/sourcecode]

Por fim, o último passo é dizer ao código que, ao usuário passar com o mouse sobre o polaroid, eu quero que ele se destaque dos demais, ficando “por cima” dos outros. Como eu sempre vou usar 12 imagens, utilizei o z-index igual à 13, para garantir que a imagem será colocada acima das outras. Para destaca-la ainda mais, utilizo valores novos para o box-shadow.

[sourcecode language=”html”] ul.gallery li a:hover {
z-index: 13;
-moz-box-shadow: 3px 5px 15px #333;
-webkit-box-shadow: 3px 5px 15px #333;
-o-box-shadow: 3px 5px 15px #333;
}
[/sourcecode]

Sua galeria polaroid está pronta!

Caso você queira, pode baixar os arquivos desse post aqui.

// Comente!

comentários

eufacoprogramas

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

// 1 Comentário

// Siga as boas práticas: Comente!