1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    43
    Posts
    29.633

    Padrão 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



    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;
    }



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    43
    Posts
    29.633
    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>



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  3. #3
    Avatar de helldanger1
    Registo
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    43
    Posts
    29.633
    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar