domingo, 19 de outubro de 2008

Criando opacidade com CSS

Oi galera!

Introdução

Mais um tutorial de CSS para vocês! No tutorial de hoje trabalharemos com um dos filtros da CSS, ou melhor, com o filtro "aplha", para nós, filtro opacidade. Esse já é um filtro bastante conhecido por design's gráfico ou similares, pois é encontrado facilmente em softwares de edição profissional, como, por exemplo: Photoshop, Fireworks (talvez seja profissional), GIMP etc.

Informações
Programa utilizado: Nenhum
Subcategoria: Efeitos
Nível de dificuldade:
Fácil

Tutorial

1. Para começarmos o tutorial: utilizarei como exemplo a foto abaixo que eu roubei do tutorial de Thales XD!

img_tuto1

Para incorporar essa imagem em um código HTML, usa-se:

<img src="http://lh6.ggpht.com/_Hneb5r6Cx8s/SOkk4JXI2zI/AAAAAAAAAkk/0R9XB_mcRcQ/fiat_500_lateral_thumb.jpg" class="imagem" />


Obs: Essa parte tem que ser colocada dentro da tag "body".

2. Agora aplicaremos o efeito de opacidade sem ter a necessidade de criar outra foto com a opacidade alterada, só utilizaremos CSS! Não esqueça que essa parte é colocada dentro na tag "head".

<style type="text/css">

.imagem {
filter: alpha(opacity=70);
-moz-opacity: 0.70;
opacity: 0.70;
}

</style>




Flw!



Original de: Tuto de Tudo
Se caso você viu este post em outro blog, site, etc sem seus devidos créditos. Denuncie-o clicando aqui.

3 comentários:

kl disse...

Mas onde coloca este codigo, ou seja como coloca lo junto com o codigo auto gerado

Anônimo disse...

De boa.... que post nada a ver... voce tem certeza que sabe do que tá falando???

Anônimo disse...

De boa na lagoa meu!!!!

© 2008
Tuto de Tudo
Todos os direitos reservados.