17/03/2010
CSS3 Gallery: Galeria de imagens com o CSS3
Mais uma vez estamos aqui para falar do nosso tão esperado CSS3. Já falamos e mostramos novos recursos em outros dois artigos, o CSS-Trick: Escondendo uma mensagem no texto e o CSS3 – Usando o border-radius. Já no post CSS-Gallery: Criando uma galeria usando somente CSS, mostramos como criar um simples galeria usando apenas o CSS. Desta vez vamos mostrar outro modelo de CSS-Galery, mas desta vez usando novas possibilidades do CSS3.
Estrutura do HTML
Em primeiro lugar, criamos a estrutura HTML mostrada abaixo, que nada mais é do que uma lista ul dentro de uma div cujo ID é "galeria". Dentro de cada item dessa lista, colocaremos uma imagem, sendo uma a smallatura e uma a imagem no tamanho natural, que deverá ser mostrada quando o mouse for passado por cima da imagem em questão.
Para cada imagem daremos uma classe, sendo que a na smallatura daremos a classe "small" e na imagem em tamanho natural denominaremos a classe como "natural".
<div id="galeria"> <ul> <li> <img src=".../.../imagen1_small.jpg" class="small" /> <img src=".../.../imagen1.jpg" class="natural" /> </li> <li> <img src=".../.../imagen2_small.jpg" class="small" /> <img src=".../.../imagen2.jpg" class="natural" /> </li> <li> <img src=".../.../imagen3_small.jpg" class="small" /> <img src=".../.../imagen3.jpg" class="natural" /> </li> <li> <img src=".../.../imagen4_small.jpg" class="small" /> <img src=".../.../imagen4.jpg" class="natural" /> </li> </ul> </div>
Estrutura do CSS
Com o HTML criado, vamos dar forma a nossa criação. A primeira coisa que formataremos será a nossa div galeria. Já nela, usaremos uma das novas propriedades do CSS3, o box-shadow, fazendo as devidas adptações para os navegadores, claro.
#gallery {
border:10px solid #60431c;
height:260px;
width:880px;
margin:auto;
overflow: visible;
background: #e7d5b5;
/*Para os navegadores Safari e Chrome*/
-webkit-box-shadow: #cdb48b 8px 8px 20px;
/*Para o Mozilla Firefox*/
-moz-box-shadow: #cdb48b 8px 8px 20px;
/*Gambiarra para funcionar no IE*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#cdb48b',
Direction=135, Strength=8);
/*Para os navegadores que já suportam o CSS3, como o Opera 10.5
pre-alpha release*/
box-shadow: #cdb48b 8px 8px 20px;
}
Pronto. Nossa div galeria já está formatada. Agora o próximo passo é centralizar o ul, e para isto vamos usar uma margin, como descrito abaixo.
#gallery ul{
margin-left:-30px;
list-style:none;
}
Agora vamos formatar o nosso li, dando um padding de 10px para que darmos uma separada boa entre as imagens. Também vamos colocar por o display como inline-table para fixar a posição das imagens.
#gallery ul li {
display:inline-table;
padding:10px;
}
Agora é hora de darmos o efeito à nossa galeria, usando a propriedade do CSS3, transition.
#galeria ul li .natural{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
opacity:0;
visibility:hidden;
position:absolute;
margin-top:10px;
margin-left:-20px;
border:1px solid #000;
-webkit-box-shadow:#cdb48b 2px 2px 10px;
-moz-box-shadow:#cdb48b 2px 2px 10px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#cdb48b',
Direction=135, Strength=5);
box-shadow:#cdb48b 2px 2px 10px;
}
Vamos adicionar um tipo de cursor à imagem em miniatura.
#gallery ul li .small:hover{
cursor:pointer;
}
Por fim, vamos dar o efeito de animação à imagem em tamanho natural, que deverá ocorrer assim que o mouse passar sobre a miniatura. Para isso, alteraremos a opacidade e colocaremo o tamanho dela.
#gallery ul li:hover .natural {
width:200px;
height:289px;
opacity:1;
visibility:visible;
float:right;
}
Prontinho. Espero que o tutorial tenha sido bom e claro para todos. Para ver um exemplo de como é esse efeito que acabamos de ensinar, veja a Demo da Galeria com CSS3.
Autor: Léo - ComunicaWeb
