Skip to content
22/06/2010 / Danresa Consultoria de Informática

Galeria de imagens com CSS3

Galeria de imagens com CSS3

Nesse tutorial vou mostrar como desenvolver uma galeria de imagens com a pseudo-classe :target das CSS3. A Pseudo-classe :target tem como função alterar os estilos do elemento alvo, já fiz outros tutoriais sobre o assunto, portanto, não vou me alongar explicando os benefícios de utilização dessa pseudo-seletor.

Eu não sou o autor original dessa galeria, acabei a encontrando no site VirtuousWeb e acabei efetuando algumas alterações para que a mesma funcionasse no Internet Explorer.

Dando continuidade ao tutorial, o HTML é bem simples e não tem segredo, basta você observar a estrutura abaixo utilizada para o tutorial:

01.<div id="container">
02.    <div id="galeria">
03.        <div id="bloc_img">
04.            <img src="img/foto1.jpg" alt="Foto 1" title="Foto 1" />
05.            <div id="img_1"><img src="img/foto1.jpg" alt="Foto 1" title="Foto 1" /></div>
06.            <div id="img_2"><img src="img/foto2.jpg" alt="Foto 2" title="Foto 2" /></div>
07.            <div id="img_3"><img src="img/foto3.jpg" alt="Foto 3" title="Foto 3" /></div>
08.        </div>
09.        <div id="bloc_bt">
10.            <a href="#img_1" class="bt_1"><img src="img/foto1-thumb.jpg" alt="Foto 1" title="Foto 1" /></a>
11.            <a href="#img_2" class="bt_2"><img src="img/foto2-thumb.jpg" alt="Foto 2" title="Foto 2" /></a>
12.            <a href="#img_3" class="bt_3"><img src="img/foto3-thumb.jpg" alt="Foto 3" title="Foto 3" /></a>
13.        </div>
14.    </div>
15.</div>

A div com o id “bloc_img” é onde devem ficar as imagens maiores e a div com o id “bloc_bt” é onde ficam os thumbnails das imagens. Se repararem existe uma imagem que é filha direta da div com o id “bloc_img”, ela será utilizada como imagem default da galeria, essa opção foi implementada por mim e não existia na galeria original.

Agora vamos as regras CSS:

01.#container {
02.    width:720px;
03.    margin:50px auto;
04.}
05.#galeria {
06.    background-color:#eee;
07.    border-bottom:3px solid #aaa;
08.    padding:10px;
09.    overflow:hidden;
10.    width:700px;
11.}
12.#bloc_img {
13.    width:700px;
14.    height:500px;
15.    margin-bottom:10px;
16.}
17.#bloc_img > img {position:absolute}
18.#img_1, #img_2, #img_3 {
19.    width:700px;
20.    height:500px;
21.    display:none;
22.    position:relative;
23.    z-index:2;
24.}
25.#img_1:target, #img_2:target, #img_3:target {display:block}
26.a.bt_1, a.bt_2, a.bt_3 {
27.    float:left;
28.    width:226px;
29.    height:130px;
30.    margin-right:11px;
31.}
32.a.bt_3 {margin-right:0}

O código acima nada mais faz do que ao usuário clicar nos thumbs das imagens aplicar display:block ao seu alvo. Vejam a demonstração. Se você reparar no código-fonte, verá que existe um JavaScript desenvolvido por Peter Ryan para habilitar o funcionamento da pseudo-classe :target no Internet Explorer.

Anúncios

Deixe um comentário

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: