Construir uma galeria de fotos com CSS
Criamos uma galeria de fotos construída com CSS, de uma maneira muito simples, porém vistosa.Por Javier Chaure
Publicado em: 08/11/06
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.
Comentários do artigo
