Uma dica de CSS3 muito legal para deixamos o visual do nosso site mais atraente, é utilizando a propriedade CSS3 opacity. Com ela podemos deixar uma imagem ou o fundo de uma caixa de texto transparente, fazendo com que seja possível observar o background do site.

Recentemente eu utilizei essa propriedade aqui no Criador Sites para deixar as caixas de texto da barra lateral e o rodapé transparentes.

Apesar de eu não ser um Web designer e não ter conhecimento e nem mesmo o dom para design de sites, achei que essa propriedade ficou bem bacana.

Se vocês observarem o antigo rodapé do TecnoUP na figura abaixo, notarão a transparência que ficou dando um efeito onde os prédios escuros podem ser vistos como uma espécie de marca d’água por trás das tags.

Criando uma imagem transparente

A propriedade CSS3 para a transparência chamasse opacity.
Veja como criar uma imagem transparente com CSS3.

Imagem normal

Mesma imagem utilizando o efeito da transparência

Veja o código CSS utilizado para esse efeito:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Para o IE9, Firefox, Chrome, Opera e Safari utilizamos a propriedade opacity para transparência. A propriedade de opacidade pode ter valor de 0.0 até 1.0. O valor mais baixo deixa a imagem mais transparente.

Para o lamentável IE8 e outros browser antigos devemos utilizar filter: alpha (opacity = x) . O x pode assumir um valor de 0 até 100. Um valor mais baixo torna o elemento mais transparente.

Agradeço ao blog W3Schools pela força!

Veja mais exemplos da utilização da propriedade opacity nesse artigo: CSS Image Opacity/Transparency.