Tendencias na web e novas tecnologias

Mais uma vez estamos aqui para falar do nosso tão esperado CSS3. Já falamos e mostramos novos recursos em outros dois posts, 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. Leia o resto deste post »

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>

Leia o resto deste post »