CSS3 – Construindo uma galeria

O CSS já é interpretado por boa todos os navegadores mais novos – contudo, se você fizer o teste no IE8, não funcionará.

Como é uma tendência, vale a pena dar uma olhada na gama de recursos bacanas que vem por aí. Hoje construiremos uma galeria de imagens simples, mas com um efeito visual bacana no hover.

A idéia é a de uma galeria como a imagem abaixo, aonde, ao usuário passar o mouse, essa imagem faça uma pequena rotação para a esquerda – como você pode ver na foto do gato.

Para conseguir esse trabalho, criaremos uma div principal, que chamarei de content, aonde você deverá colocar as imagens desejadas.

[sourcecode language=”html”] <div class="container">
<img src="images/im_01.jpg" />
<img src="images/im_02.jpg"/>
<img src="images/im_03.jpg" />
<img src="images/im_04.jpg" />
<img src="images/im_05.jpg" />
</div>

[/sourcecode]

Para conseguir o resultado acima optei por não tratar o tamanho das imagens – se elas forem maiores do que a div permite, serão colocadas na próxima linha. Contudo, você pode personalizar o código como quiser.
A classe do container é entao bem simples, só setei uma largura qualquer e centralizei com o atributo margin.

[sourcecode language=”html”] .container {
width: 600px;
margin: auto;
}
[/sourcecode]

O segredo começa agora: definir os atributos das imagens do container.

[sourcecode language=”html”] .container {
margin: 10px;
border: 5px solid #000000;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
[/sourcecode]

Os atributos margin e border você provavelmente já conhece. Os atributos -webkit-box-shadow, -moz-box-shadow e box-shadow tratam a sombra da imagem estática.

Como pode-se ver, foram necessárias três linhas de código para produzir a sombra. Casa uma delas atua em uma plataforma de browsers diferente. A -webkit, por exemplo, atua em browsers como Chrome e Safari, -moz no Firefox, -o em Opera e -khtml, que não foi utilizada aqui,  em Konqueror. Há browsers que não aceitam todas as propriedades CSS3. Para testar você pode utilizar o Teste de Seletores do CSS3 .Info.

Considere

-webkit-box-shadow  x y w z

  • x : Indica se a sombra será à esquerda ou direita. Valores negativos indicam esquerda.
  • y: Indica se a sombre será à acima ou abaixo. Valores negativos indicam que a sombra será colocada acima.
  • w: Indica o blur, ou seja, o qual desfocada a sombra será. Quanto maior esse valor, mais nítida será sua sombra.
  • z: Indica  a cor, em rgba no caso, da sombra aplicada. Em caso de dúvidas, consulte uma tabela de cores rgba.

Os atributos -webkit-transition, -moz-transition e -0-transition tratam a sombra da imagem estática. Considere

-webkit-transition  x y w 

  • x : Indica em quais imagens será aplicada a transição – utillizamos all para todas.
  • y: Indica o tempo que a animação ocorrerá, nesse caso, em segundos.
  • w: Indica o tipo de transição que será aplicada –  o ease-out.

Como você poder perceber, ainda não foi dito nada sobre o hover do usuário. Faremos isso com o código abaixo:

[sourcecode language=”html”] .container img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
[/sourcecode]

A propriedade acima indica o grau da rotação que a imagem sofrerá quando o usuário aciona-la. Novamente, valores negativos a fazem girar para a esquerda, enquanto valores positivos giram para a direita.

E o sua galeria está pronta!

Caso queria baixar os arquivos dessa aula, utilize esse link.

 

// 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

7 Comentários

// Siga as boas práticas: Comente!