Galeria de Fotos com CSS

No artigo de hoje iremos construir uma galeria de fotos com CSS. É uma galeria simples, fácil de ser construída, sem complexidade, mas que fica muito bonita dentro do site. Para a construção dessa galeria de fotos, usaremos o conceito de camada, que vem sendo muito utilizado na construção web ultimamente.

Por | @jonathanlamimkt Programação
Olá pessoal, estou de volta, espero que gostem desse artigo.

É uma galeria simples, fácil de ser construída, sem complexidade, mas que fica muito bonita dentro do site.
Para a construção dessa galeria de fotos, usaremos o conceito de camada, que vem sendo muito utilizado na construção web ultimamente.

Chega de conversa e vamos colocar a mão na massa, abra o Bloco de Notas e digite os códigos abaixo:

#principal { 
   margin:0 auto;
}


A camada acima será utilizada para situar a galeria na página.

.camadafoto { 
   float:left;
   width:210px;
   height:180px;
   margin: 10px;
   padding:5px;
   background-color:#f5f7f9;
   border-right: #a5a7aa solid 1px;
   border-bottom: #a5a7aa solid 1px;
   text-align:center;
}


Esta camada é utilizada para dar estilo às miniaturas das fotos. Como por exemplo, faze-las flutuar (float: left) para se alinharem horizontalmente se ajustando na largura da janela e dando margens (margin: 10px) para separar umas das outras.

Salve esse arquivo como “estilo.css”.

Agora crie um novo arquivo e digite o seguinte código:



Galeira de Fotos com CSS





  

GALERIA DE FOTOS COM CSS


  
Galeria de Fotos com CSS
Descrição da imagem

  
Galeria de Fotos com CSS
Descrição da imagem

  
Galeria de Fotos com CSS
Descrição da imagem

  
Galeria de Fotos com CSS
Descrição da imagem de forma longa





Esse é o código da nossa página, salve-o como “index.html”.
Lembre-se que o caminho das imagens desse script são meramente ilustrativos, você deverá colocar o caminho das imagens de acordo com a localização deles no seu PC.

Clique aqui e veja como ficou a galeria de fotos.

Até a próxima...

Mais sobre: css galeria fotos
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo