Galeria de imagens com CSS3

Olá pessoal! Hoje vou mostrar um tutorial de uma galeria com um efeito CSS3 bem interessante. Ao posicionar o mouse em cima da foto, ela rotaciona, vira para o lado esquerdo, dando um efeito bem legal para a página.

Por Programação Pular para comentários
Galeria de imagens com CSS3

Ol? pessoal! Hoje vou mostrar um tutorial de uma galeria com um efeito CSS3 bem interessante. Ao posicionar o mouse em cima da foto, ela rotaciona, vira para o lado esquerdo, dando um efeito bem legal para a p?gina.

Preview do resultado:



HTML
Galeria de imagens com CSS3 Galeria de imagens com CSS3 Galeria de imagens com CSS3 Galeria de imagens com CSS3


CSS


Entendendo o HTML


O HTML ? bem simples, uma DIV com uma largura definida e centralizada. Dentro delas as fotos que comp?em nossa galeria.


Entendendo o CSS


A class .container cont?m somente os atributos que definem a largura da DIV (550px) e que ela ficar? centralizada independente da resolu??o do monitor do usu?rio (margin: 0 auto; ).
.container {
    width: 550px;
    margin: 0 auto;
}


A class .container img cont?m atributos que v?o atuar nas imagens dentro da DIV com a class container, vou detalh?-la:
margin: 10px;

Toda imagem ter? uma margem de 10px em todos os lados.

border: 5px solid #000000;

Uma borda de 5px na cor preta.

-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);

Estes atributos CSS3 definem a sombra atr?s da imagem. Vou detalhar mais esses atributos:

-webkit-box-shadow: [b]4px[/b] 4px 4px rgba(0,0,0,0.2);

O primeiro 4px define se a sombra ficar? na esquerda ou na direita. Valor positivo, a sombra vai pra direita, valor negativo a sombra vai pra esquerda.

-webkit-box-shadow: 4px [b]4px[/b] 4px rgba(0,0,0,0.2);

O segundo 4px define se a sombra ficar? em cima ou embaixo. Valor positivo, a sombra ficar? embaixo, valor negativo, a sombra ficar? em cima.

-webkit-box-shadow: 4px 4px [b]4px[/b] rgba(0,0,0,0.2);

O terceiro 4px ? o blur (esfuma?ar). Quanto maior o valor, mais esfuma?ado ficar? a sombra.

-webkit-box-shadow: 4px 4px 4px [b]rgba(0,0,0,0.2)[/b];

O rgba define a cor e a transpar?ncia da sombra de acordo com o padr?o rgb. Os valores 0, 0, 0, no padr?o RGB, ? o preto. Para saber os n?meros RGB de uma determinada cor, basta usar um programa de edi??o de imagem para tal.

O 0.2 no final, ? o canal alpha, esse canal controla a transpar?ncia da sombra. Quanto mais perto do 0, mais transparente fica. Se colocar o valor de alpha como 1, ficar? sem transpar?ncia.

-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;

Esses atributos definem como a anima??o vai se comportar:
  • Ela afetar? toda a foto: All
  • Ela acontecer? em: 0,5s
  • Ela usar? um efeito de transi??o chamado: ease-out


Agora vem a anima??o em si, o que acontecer? quando o mouse se posicionar em cima da imagem?

Isso ? definido na class .container img:hover, vou detalh?-la:
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);

A foto vai rotacionar 7 graus para a esquerda. Valor negativo, a rota??o vai para a esquerda, valor positivo, a rota??o vai para a direita.

Resultado:


Ok pessoal, por hoje ? s?. At? a pr?xima.

Mais sobre: CSS3, galeria, imagem, tutorial
Compartilhe com seus amigos:
Suelen Braga
Suelen Braga Sou web designer há 1 ano e meio, adoro experimentar algumas animações com JQuery, JQuery e AJAX, PHP e passar às outras pessoas, ajudando no dia-a-dia do desenvolvedor web. Estou estudando também sobre HTML5 e CCS3.
FACEBOOK // TWITTER: @suelenbraga2006
Quer conversar com o(a) Suelen, comente:
Carregar comentários
Últimas notícias