Construir uma galeria de fotos com CSS

Criamos uma galeria de fotos construída com CSS, de uma maneira muito simples, porém vistosa.

Hoje em dia é cada vez mais comum contar com uma galeria fotográfica em nossa página web. Ao longo deste tutorial veremos duas propostas para fazer uma galeria de fotos vistosa e trivial de usar para nossos visitantes, construída integramente com código padrão HTML e CSS.

Construir a galeria utilizando camadas

Nesta primeira versão de nossa galeria fotográfica vamos empregar camadas como contêiner onde inserir cada uma das nossas miniaturas, junto com a informação que quisermos associar (título, descrição, etc.).

Para termos uma idéia mais clara do trabalho que vamos realizar o melhor seria ver o exemplo em funcionamento.

Como vem sendo habitual trabalhar com camadas usaremos outra camada contêiner para nossa galeria fotográfica coma intenção de organizar de forma lógica nosso desenho e englobar nosso conteúdo em um bloco que podemos manipular com estilos. Podemos limitar a largura desta camada contêiner e situá-la ao nosso gosto. Neste exemplo, não restringiremos nenhuma propriedade salvo as margens para conseguir que nossa construção se adapte a qualquer resolução. Os estilos para esta camada contêiner principal são:

#principal {
   margin:0 auto;
}

Agora que já temos uma camada onde inserir as fotos, prepararemos o estilo para cada uma das miniaturas das fotos. Faremos flutuar cada uma das miniaturas com um float:left; para que se alinhem horizontalmente se ajustando na largura da janela. Dando-lhes margem, separamos uma das outras. Graças às camadas que contém as miniaturas das fotos que flutuam, se organizarão segundo a largura da janela, adaptando-se à resolução do usuário.

Uma primeira aproximação ao estilo para as miniaturas é:

.conteinerfoto {
   float:left;
   margin: 10px;
   padding:5px;
}

O código HTML de nossa galeria tem o seguinte aspecto:

<body>
<div id="principal">
   <h3>GALERÍA CSS</h3>
   <div class="conteinerfoto"><a href="#"><img src="img/1.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div>
   <div class="conteinerfoto"><a href="#"><img src="img/2.jpg" border="0" alt=""/></a><br /><span>Descriçaõ da imagem</span></div>
   <div class="conteinerfoto"><a href="#"><img src="img/3.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div>
   <div class="conteinerfoto"><a href="#"><img src="img/4.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div>
   <div class="conteinerfoto"><a href="#"><img src="img/5.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem extranhamente longa</span></div>
</div>
</body>

Como se pode observar, acrescentamos uma descrição adicional com um <span>. Pode-se ver o aspecto desta primeira aproximação aqui.

Antes de melhorar a aparência do texto trabalharemos sobre a camada contêiner da foto para limitar sua largura e altura e assim conseguir a aparência de mosaico típica das galerias de fotos. Centralizaremos o conteúdo dentro desta camada, lhe adicionamos estilo à cor de fundo e duas bordas (em nosso caso inferior e direito) para dar a cada miniatura aparência de profundidade:

.conteinerfoto {
   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;
}

Agora já temos nossa galeria com uma aparência mais apropriada, como se pode ver no exemplo terminado aqui. Para este exemplo, usamos para mostrar as miniaturas umas dimensões proporcionais à resolução típica.