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!
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:
Mas onde coloca este codigo, ou seja como coloca lo junto com o codigo auto gerado
De boa.... que post nada a ver... voce tem certeza que sabe do que tá falando???
De boa na lagoa meu!!!!
Postar um comentário