Como aplicar transparência em imagens utilizando css? 31.05.16 22:20
Aprenda de forma simples como alterar a transparência (opacidade) de uma imagem apenas utilizando CSS. Simples, mas uma técnica bastante funcional que você pode utilizar em galerias de imagens ou para efeitos 'crossover' (quando passa o mouse sobre a imagem).
Primeiro crie um novo arquivo HTML e um arquivo CSS, salve esse arquivo html como index.html no diretório raiz e o outro estilos.css no diretório /css (crie o dir /css).
Voltando ao arquivo HTML... adicione o seguinte conteúdo:
Agora vamos entender pra que serve algumas linhas do código mais acima.
A tag title define o nome da página:
Logo abaixo é o caminho para o seu arquivo CSS externo, que criamos e salvamos na pasta /css, conforme mencionei no início deste tutorial:
E na tag Body, está vazia e se continuar assim, nada será exibido na página. Para
resolver este problema vamos inserir o código que exibirá uma imagem normal, sem efeito nenhum.
Nota: utilize uma imagem de sua escolha para o estudo deste tutorial, desde que esteja no mesmo diretório do arquivo HTML, mas se não tiver neste diretório, copie a imagem para este diretório para que não ocorra problemas. Na verdade o importante é sempre definir o caminho corretamente para as imagens e arquivos necessários para o sucesso deste aprendizado. O local propriamente dito não importa, porém eu sugiro a forma mais fácil de entender e não se perder, mas você tem liberdade para salvar os estilos, dar nomes, salvar as imagens de acordo que achar melhor.
Da forma que está acima, você poderá visualizar a imagem na página, através de seu navegador web (recomendo FireFox), mas não poderá vê-la com a transparência aplicada, pois ainda não definimos um estilo CSS para tag img.
Abra o arquivo estilos.css e adicione o seguinte bloco de código CSS:
Nota: Aplicamos duas propriedades com o mesmo efeito para a tag img, pois o Internet Explorer utilizafilter:alpha(opacity:x) function (x = 0-100), mas o FireFox e Chrome utilizam a propriedade opacity:x (x = 0-1). 0 = invisível, 1/100 = 100% visível.
Lembra que incluímos o arquivo estilos.css no index.html através da tag link? Então, agora todas as imagens que forem inseridas no index.html sempre apresentarão o efeito aplicado através das propriedades que definimos para img no arquivo estilos.css.
Acesse o index.html com o seu navegador e veja imagem com o efeito aplicado.
Simples? Sim muito simples, mas através desta base você pode fazer coisa mais interessantes e leves apenas com CSS.
Então tá, vamos fazer algo um pouco mais interessante com o que aprendemos então.
Para aplicar um efeito que deixaria a imagem com suas cores normais ao passar o mouse sobre ela precisaremos apenas utilizar a função hover na tag img lá no nosso arquivo estilos.css.
Veja como ficaria o estilos.css completinho para o efeito que queremos:
Agora ao passar o mouse sobre a imagem ela recupera suas cores e ao retirar volta a ter transparência.
Nota: IE6 só aceita :hover em tags <a>
Espero que tenham gostado deste simplíssimo tutorial CSS sobre opacidade em imagens.
Bons estudos!
Via : SistemaBasico
@EDIT
?
?
Primeiro crie um novo arquivo HTML e um arquivo CSS, salve esse arquivo html como index.html no diretório raiz e o outro estilos.css no diretório /css (crie o dir /css).
Voltando ao arquivo HTML... adicione o seguinte conteúdo:
- Código:
<html>
<head>
<title>Imagem Transparente com CSS | sistemabasico.com.br</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
Agora vamos entender pra que serve algumas linhas do código mais acima.
A tag title define o nome da página:
- Código:
<title>Imagem Transparente com CSS | sistemabasico.com.br</title>
Logo abaixo é o caminho para o seu arquivo CSS externo, que criamos e salvamos na pasta /css, conforme mencionei no início deste tutorial:
- Código:
<link href="css/estilos.css" rel="stylesheet" type="text/css">
E na tag Body, está vazia e se continuar assim, nada será exibido na página. Para
resolver este problema vamos inserir o código que exibirá uma imagem normal, sem efeito nenhum.
Nota: utilize uma imagem de sua escolha para o estudo deste tutorial, desde que esteja no mesmo diretório do arquivo HTML, mas se não tiver neste diretório, copie a imagem para este diretório para que não ocorra problemas. Na verdade o importante é sempre definir o caminho corretamente para as imagens e arquivos necessários para o sucesso deste aprendizado. O local propriamente dito não importa, porém eu sugiro a forma mais fácil de entender e não se perder, mas você tem liberdade para salvar os estilos, dar nomes, salvar as imagens de acordo que achar melhor.
- Código:
...
<body>
<img src="uma-imagem.jpg" alt="Imagem com transparência" />
</body>
...
Da forma que está acima, você poderá visualizar a imagem na página, através de seu navegador web (recomendo FireFox), mas não poderá vê-la com a transparência aplicada, pois ainda não definimos um estilo CSS para tag img.
Abra o arquivo estilos.css e adicione o seguinte bloco de código CSS:
- Código:
img
{
opacity:0.5; /* Firefox & Chrome */
filter:alpha(opacity=50); /* IE */
}
Nota: Aplicamos duas propriedades com o mesmo efeito para a tag img, pois o Internet Explorer utilizafilter:alpha(opacity:x) function (x = 0-100), mas o FireFox e Chrome utilizam a propriedade opacity:x (x = 0-1). 0 = invisível, 1/100 = 100% visível.
Lembra que incluímos o arquivo estilos.css no index.html através da tag link? Então, agora todas as imagens que forem inseridas no index.html sempre apresentarão o efeito aplicado através das propriedades que definimos para img no arquivo estilos.css.
Acesse o index.html com o seu navegador e veja imagem com o efeito aplicado.
Simples? Sim muito simples, mas através desta base você pode fazer coisa mais interessantes e leves apenas com CSS.
Então tá, vamos fazer algo um pouco mais interessante com o que aprendemos então.
Para aplicar um efeito que deixaria a imagem com suas cores normais ao passar o mouse sobre ela precisaremos apenas utilizar a função hover na tag img lá no nosso arquivo estilos.css.
Veja como ficaria o estilos.css completinho para o efeito que queremos:
- Código:
img
{
opacity:0.5; /* Firefox & Chrome */
filter:alpha(opacity=50); /* IE */
}
img:hover
{
opacity:1; /* Firefox & Chrome */
filter:alpha(opacity=100); /* IE7+ */
}
Agora ao passar o mouse sobre a imagem ela recupera suas cores e ao retirar volta a ter transparência.
Nota: IE6 só aceita :hover em tags <a>
Espero que tenham gostado deste simplíssimo tutorial CSS sobre opacidade em imagens.
Bons estudos!
Via : SistemaBasico
@EDIT
?
?
Última edição por Wiz-Khalifa em 31.05.16 22:43, editado 2 vez(es)
Convidado • 31.05.16 22:31
LooZHp • 03.06.16 18:26
