Criando uma galeria de fotos em CSS3

Criando uma galeria de fotos em CSS3, com transições, animações e sombra, podemos fazer alguns efeitos visuais bastante impressionantes usando nada, mas a bondade que ele proporciona.

Por Programação Pular para comentários
Criando uma galeria de fotos em CSS3

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 


    

CSS3 Photo Gallery


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

autumn city dirt autumn flower yflowers

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.
http://www.oficinadanet.com.br//imagens/coluna/3029//1.jpg


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

Compartilhe com seus amigos:
Thauan Almeida
Thauan Almeida É desenvolvedor Flash, Joomla e Programação. E aqui na Oficina da Net mostrará tutoriais sobre a ferramenta da Adobe e os outros citados acima.
FACEBOOK //
Quer conversar com o(a) Thauan, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.