Filtro Alpha em CSS
Benedito Silva Júnior
15/11/2021
O filtro Alpha em CSS permite ajustar a transparência de elementos, sendo especialmente útil para criar efeitos de opacidade e destacar conteúdo. Com opacity, podemos definir o nível de visibilidade de um elemento, variando de 0 (totalmente transparente) a 1 (totalmente opaco). Neste post, aprenda sobre filtro Alpha em CSS.
Vantagens
Além disso, o filtro Alpha pode ser aplicado em compatibilidade com navegadores mais antigos através do filter: alpha(opacity=x);, substituindo o valor x por um número de 0 a 100. Esta técnica é valiosa para criar efeitos de sobreposição e foco em páginas web.
Exemplo de código
.transparent-box {
opacity: 0.7;
}Além de opacity, há outras propriedades CSS que ajudam a controlar a opacidade de elementos específicos, como rgba() para cores de fundo e borda, onde o último valor define o nível de transparência. Exemplo:
.elemento {
background-color: rgba(255, 0, 0, 0.3); /* Fundo vermelho com 30% de opacidade */
}Esses efeitos são úteis para destacar elementos, criar sobreposições e melhorar a estética e legibilidade de um site ao interagir com o design visual das páginas.
Outro exemplo prático
É possível reproduzir o efeito de um filtro alpha para imagens que sejam compatíveis com qualquer navegador com suporte ao CSS, evitando assim, utilizar uma solução específica de um determinado fabricante.
Código HTML/XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
html xmlns="estilo.css" rel="stylesheet" type="text/css" />
<title>CSS - Dicas</title>
</head>
<body>
<h1>Exemplo de Filtro Alpha para imagem></h1>
<div class="imagem">
<img src="foto_grande.jpg" width="500" height="300" alt="Lagoa do taquaral" />
<div class="texto">Campinas<br />Vista da lagoa<br />Taquaral<br />
</div>
</body>
</html>É necessária uma imagem de fundo “especial”, no formato GIF, para a área de texto. Essa imagem é composta por duas cores no formato de um tabuleiro de dama ou xadrez, sendo que uma das cores será configurada como transparente.
Código CSS (arquivo estilo.css):
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
div.imagem { width: 530; }
div.texto
{
width: 50%;
position: absolute;
left: 23%;
top: 43%;
text-align: center;
text-weight: bold;
background: transparent url(alpha.gif) center repeat;
}
h1
{
font-size: 15pt;
color: #000000;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-bottom: 1px;
}Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
A verdade é que continuar sem esse conhecimento pode estar custando muito mais do que você imagina.
Você pode economizar centenas ou até milhares de reais ao longo do tempo fazendo você mesmo a manutenção dos seus computadores. E, se decidir prestar serviços, esse conhecimento também pode se transformar em uma fonte de renda, que pode variar de R$2.000 a R$5.000 por mês ou mais.
Tudo isso com aulas práticas, objetivas e focadas no que realmente funciona, sem enrolação:
✔ Resolver seus próprios problemas sem depender de ninguém ✔ Ganhar dinheiro com manutenção e suporte técnico ✔ Ou até entrar de vez no mercado de TI
A decisão é sua: continuar gastando dinheiro sempre que o computador apresentar um problema ou aprender uma habilidade que pode fazer você economizar e até gerar uma nova fonte de renda.
👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe:
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação e apaixonado por tecnologias e games do tempo da vovó!
0 Comentários