Construindo uma Galeria com CSS

Olá a todos, hoje veremos como desenvolver uma galeria de produtos com CSS, utilizando um código limpo, conciso e semanticamente correto.

Para começar vamos analisar o nosso objetivo, criar uma galeria de produtos. O que seria uma galeria de produtos? Uma lista de produtos. Uma lista ordenada ou não ordenada? Não ordenada. Entenda como não ordenada uma lista de produtos onde não existe uma seqüência de ordenação como uma lista de nomes de seus amigos, diferentemente de uma lista de etapas para a realização de uma tarefa que possui uma ordem a ser seguida: etapa 1, etapa 2, etc.

Vamos ao HTML.

                    	

Construindo uma Galeria com CSS

Agora que criamos nossa lista HTML, vamos criar a folha de estilo que irá formatá-la.

                    	.container{width:520px; margin:30px auto; }
                        .galeria{padding:0;}
                        .galeria li{display:block; float:left; margin:0 0 40px 40px;}
                        .galeria li a{display:block;}
                    

A <div> com a classe ‘container’ serve como recipiente para posicionar a galeria ao centro da tela e definir o tamanho máximo da linha de produtos, gerando a quebra de linha automaticamente quando os itens da galeria ultrapassar esse limite. Com a propriedade float setada como left nos itens da lista, fazemos com que eles fiquem posicionados um ao lado do outro, e com a margem setada com 40px para a esquerda e para baixo separamos os elementos.

Agora se vocês repararem a linha de produtos quebrou com 3 produtos por linha, e fica um espaço sobrando a direita. Isso se deve ao fato de termos setado margem de 40px a esquerda em todos os itens da lista, assim se multiplicarmos 140 (100 da largura + 40 da margem) por 4 itens (número de itens por linha), teremos 560px onde o limite estipulado foi de 520px. Quando sua lista tiver somente uma linha podemos utilizar a pseudo-classe :first-child para selecionar somente o primeiro item da lista e setar a margem com 0.

                        .galeria li:first-child{margin-left:0;}
                    

Mas como não é nosso caso, vamos ver uma solução que funciona independentemente do numero de linhas. Vamos setar o posicionamento da lista com margem left igual a margem do item, porém negativa, e overflow igual a hidden.

                        .galeria{overflow:hidden; margin-left:-40px;}
                    

Para fazer o download do exemplo, clique aqui.

Agora é só testar. Espero que tenham gostado, um abraço e até a próxima.

voltar