CSS: Galeria de Fotos
Formatando uma galeria de fotos utilizando CSS.
Resultado final:
[iframe http://www.linhadecomando.com/css_galeria 520 150]
Arquivo CSS
div.imagem { margin: 2px; border: 1px solid #000000; height: auto; width: auto; float: left; /* alinhamento a esquerda */ text-align: center; /* texto da legenda alinhado no centro */ font-family: Arial; font-size: 12px; } /* formatação das imagens */ div.imagem img { display: inline; /* exibição das imagens alinhadas */ margin: 3px; border: 1px solid #ffffff; } /* uma borda será exibida quando passar o mouse sobre a imagem */ div.imagem a:hover img {border: 1px solid #000000} /* formataçao do texto que servirá como legenda para as imagens */ div.legenda { text-align: center; font-weight: normal; width: 130px; /* define o tamanho da área em que será exibida a legenda - se o valor for menor que a quantidade de caracteres, ocorre uma quebra de linha */ margin: 2px; } |
Arquivo HTML
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS - Galeria de Fotos</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <!-- ****************************************** *** Tamanho das imagens: 130 x 90px. *** ****************************************** --> <div class="imagem"> <a href="#" target="_blank"> <img src="imagem/imagem1.jpg" alt="Imagem 1" width="130" height="90" /></a> <div class="legenda">Decrição: Imagem 1</div> </div> <div class="imagem"> <a href="#" target="_blank"> <img src="imagem/imagem2.jpg" alt="Imagem 2" width="130" height="90" /></a> <div class="legenda">Decrição: Imagem 2</div> </div> <div class="imagem"> <a href="#" target="_blank"> <img src="imagem/imagem3.jpg" alt="Imagem 3" width="130" height="90" /></a> <div class="legenda">Decrição: Imagem 3</div> </div> </body> </html> |
Muito bom cara, parabéns ae pelo tutorial.
Simples e eficaz !
Muito bom!
Bem simples mesmo, boa para o entendimento da coisa.
Muito bom