CSS3 realmente tem dado capacidades nos muito mais do que seus antecessores. Com transições, animações e sombra, podemos fazer alguns efeitos visuais bastante impressionantes usando nada, mas a bondade que ele proporciona. Hoje, vamos ver como criar uma galeria de fotos com bom aspecto e não usando CSS3. Vamos mergulhar em, não é?

Preview do resultado:




PRIMEIRO PASSO:
Configurando a Página
Vamos começar o tutorial de hoje, adicionando uma imagem de fundo em nossa página HTML. A estrutura HTML irá continuar a crescer à medida que avançamos, mas vamos começar com uma ardósia limpa. Veja como o HTML inicial é semelhante a:


     CSS Photo Gallery </title>
</head>

CSS3 Photo Gallery </h1> </body> </html>


Nada extravagante de todos aqui. A próxima coisa que vamos querer fazer é ir em frente e adicione a imagem de fundo que vamos estar a utilizar para a nossa página de hoje. Isso será feito no CSS, e vamos adicioná-lo ao seletor do corpo. Aqui está o que o CSS inicial deve ser parecido:

body
{
    background:url("wood.jpg");
    background-repeat: inherit;
}


Acho fundos de madeira para serem verdadeiramente agradáveis ​​em sites de fotografia, então é por isso que escolhemos hoje a madeira. Se você quiser, você pode usar qualquer imagem de fundo que você deseja.


SEGUNDA ETAPA:
Adicionando fotos para a nossa página

CSS3 Photo Gallery


Repare que nós adicionamos a "image" de classe para cada uma das nossas fotos. Isto irá permitir-nos ao estilo de cada um deles com um efeito Polaroid, adicionando uma fronteira bastante grossa, branca a eles.


PASSO TRÊS
Estilo com a propriedade Border
Vamos em frente e fazer as nossas imagens se parecem mais com Polaroids, adicionando algum código para o nosso arquivo CSS:

.image
{
    border-top: 10px solid white;
    border-right: 10px solid white;
    border-bottom: 40px solid white;
    border-left: 10px solid white;    
}


Agora carregar a página no navegador e confira a galeria de fotos super legal! Não é bem feito, mas honestamente, mesmo que neste momento está começando a olhar muito bom.



QUARTA ETAPA:
nth-child Filter - Adição de rotação "aleatório"
Em seguida, vamos querer adicionar um pouco de rotação para que olhar fotos colocadas aleatoriamente na página. Nós vamos usar o CSS é nth-child filter para nos ajudar. Aqui está o que a CSS deve ser semelhante a agora:

.image:nth-child(1n)
{
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);    
}
.image:nth-child(2n)
{
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);    
}


Ótimo! As imagens que agora tem o que parece ser uma rotação aleatória para eles. A CSS nth-child está tomando todas as imagens 1 e 2 graus girando-o no sentido horário, e toda segunda imagem e girando-a 5 graus sentido anti-horário.

http://www.oficinadanet.com.br//imagens/coluna/3029//2.jpg



PASSO CINCO:
A propriedade Shadow - Adicionando um pouco de sombra
Vamos em frente e adicionar algumas sombras de nossas imagens para torná-los se destacam a partir da página um pouco mais:

.image
{
    border-top: 10px solid white;
    border-right: 10px solid white;
    border-bottom: 40px solid white;
    border-left: 10px solid white;
    cursor: pointer;
    -moz-box-shadow: 2px 5px #000;
    -webkit-box-shadow: 3px 3px #000;
    position: relative;   
}


Dê uma olhada nas fotos e você verá que nós temos agora uma sombra muito agradável ao redor de cada um deles.

http://www.oficinadanet.com.br//imagens/coluna/3029//3.jpg



PASSO SEIS:
Rotação das Imagens - Podemos agora começar a adicionar os toques finais para as nossas fotos para fazer uma galeria de mais interativa. Nós precisamos fazer algumas coisas para :hover psuedo-selector de modo a obter alguma interatividade quando um usuário passa sobre uma das imagens. A primeira coisa que vai querer fazer girar as imagens de volta para a posição padrão. Veja como isso é implementado no CSS:

{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);            
}
.image:nth-child(2n)
{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);    
}


Estas duas declarações são separadas da enésima declarações nth-child, e rodar uma determinada foto de volta à posição original de 0 graus. Vá em frente e verifique a página para certificar as rotações estão trabalhando.


PASSO SETE:
Adicionando transições
Em seguida é a transição. Primeiro, vamos adicionar a declaração para a transição. Aqui está o que a CSS deve ser semelhante a agora:

.image
{
    border-top: 10px solid white;
    border-right: 10px solid white;
    border-bottom: 40px solid white;
    border-left: 10px solid white;
    cursor: pointer;
    -moz-box-shadow: 2px 5px #000;
    -webkit-box-shadow: 3px 3px #000;
    position: relative;  
    -webkit-transition:linear 0.25s;
    -moz-transition:linear 0.25s;
}



ETAPA OITO:
Usando a Transformada: Scale Property. O último passo será adicionar o "zoom" de funcionalidade, que na verdade é feito usando transformar CSS3 transform: scale. Precisaremos adicionar a propriedade de ambos os nossos pseudo seletores hover para completar o efeito. Veja como adicionar o toque final para o CSS:

.image:nth-child(1n): hover
{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25); 
    z-index: 2;            
}
.image:nth-child(2n): hover
{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25); 
    z-index: 2;     
}


Note que nós também adicionamos uma declaração z-index. Isso vai fazer com que a fotografia é visualizada parece pairar acima do resto deles, e, em seguida, quando o que paira é completa, cai de volta no lugar a seguir aos outros.

http://www.oficinadanet.com.br//imagens/coluna/3029//4.jpg



Preview do resultado:



Vimos que o uso de CSS3 pode fazer uma enorme diferença na experiência de um usuário ao visitar seu site. Coisas como as transições, as sombras, e transforma realmente trazer a profundidade da experiência, e fornecer algumas maneiras muito legal a concretizar suas idéias em realidade.

Arquivo anexo