Tendencias na web e novas tecnologias

Como já mostramos antes, é possível obter efeitos úteis e legais usando somente o CSS. No post anterior vimos como criar um simples Efeito de Rollover com CSS, e neste post vamos aprender a montar uma Galeria de Fotos usando apenas o CSS.

Aviso que é uma galeria simples, com um resultado bonito, mas que apresenta apenas fins decorativos, como em um banner ou em algum outro lugar onde sua criatividade puder fazer uso dela. Então, vamos lá.

1. Primeiro, veja como é o HTML da nossa galeria.

<ul id="css-gallery">
<li><a href="#" title="Wanted - Adalberto">
<img src="http://www.comunicaweb.com.br/blog/wp-content/themes/
BrownMagic/images/posts/09/css-galery-adalberto-small.jpg" alt="Wanted -
Adalberto" title="Wanted - Adalberto" /></a></li>
<li><a href="#" title="Wanted - Mariane">
<img src="http://www.comunicaweb.com.br/blog/wp-content/themes/
BrownMagic/images/posts/09/css-galery-mariane-small.jpg" alt="Wanted -
Mariane" title="Wanted - Mariane" /></a></li>
<li><a href="#" title="Wanted - Leonardo">
<img src="http://www.comunicaweb.com.br/blog/wp-content/themes/
BrownMagic/images/posts/09/css-galery-leonardo-small.jpg" alt="Wanted -
Leonardo" title="Wanted - Leonardo" /></a></li>
<li><a href="#" title="Wanted - Sodré">
<img src="http://www.comunicaweb.com.br/blog/wp-content/themes/
BrownMagic/images/posts/09/css-galery-sodre-small.jpg" alt="Wanted -
Sodré" title="Wanted - Sodré" /></a></li>
</ul>

1. Agora vamos ver como fica o CSS.

#css-gallery {
  padding:0;
  margin:0;
  list-style:none;
  overflow:hidden;
  width:434px;
  height:332px;
  border:1px solid #a67b49;
  background:#fff url(http://www.comunicaweb.com.br/blog/
  wp-content/themes/BrownMagic/images/posts/09/css-galery-back.jpg)
  right no-repeat;
  }
#css-gallery li {
  float:left;
  }
#css-gallery li a {
  display:block;
  height:332px;
  width:30px;
  float:left;
  text-decoration:none;
  border-right:1px solid #fff;
  cursor:default;
  }
#css-gallery li a img {
  width:340px;
  height:332px;
  border:0;
  }
#css-gallery li a:hover {
  background:#eee;
  width:340px;
  }
#css-gallery li a:hover img {
  width:340px;
  }

Prontinho. Vamos ver como deverá ficar a galeria acima descrita:

Espero que encontrem utilizações criativas e diferentes para esse pequeno truque de CSS.