Galeria de Fotos em CSS

Precisando melhorar a exibição de imagens no seu site ou aprender um pouco mais de CSS, independentemente do motivo, com esse tutorial você irá criar galerias incriveis utilizanda a maior ferramente de formatação existente no mundo WEB, sim estamos falando dele mesmo o CSS!

Para criar galerias como essa ao lado é muito simples, basta criar uma lista e emcada item adicionar uma tag div e uma tag span. Apensa com isso você irá criar lindas galerias com inuremos efeitos.

Conceito Básico

Você precisa inserir uma tag <span> extra dentro da tag <div>, com a qual iremos aplicar uma imagem de fundo para criar um efeito de sobreposição!!!


Depois, no CSS, o ponto chave uq você tem que lembrar é especificar: no elemento div a position:relative e do elemento span position:absolute. Você pode posicionar o elemento span onde desejar basta configurar os parametros top e left

Exemplos:

Como pode ver, utilizando essa tecnica você consegue criar diversos efeitos, com icones, máscaras, bordas, links, sombras e detalhes.

Para treinar baixe os exemplos e as imagens para treinar e começar a produzir suas próprias galerias!!!

DOWNLOAD AKI

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: