Tuto de Tudo

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidRtmTO343UG6UnD_3Q2ApwrxpYZWavnoV1L3PQtlkm3PbUUF6HvwIF32Rpu06znchLECydUydfiWKwZfHZ_DRUmlz0GnuDqqnuIv_iAPOuisKHRv0Xgx-3sVabn4bFL8KyUGIwHS_55c/" 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.