O código de amostra HTML e o código CSS incluído nele são fornecidos abaixo. A imagem usada nele é fd.jpg e nomeie uma imagem como fd.jpg para ver o efeito completo
<!DOCTYPE HTML PUBLIC "- //W3C. //DTD HTML 4.01 Transicional//EN">
<html>
<cabeça>
<title>Efeito de filtro CSS.html</title>
<meta http-equiv="palavras-chave" content="palavra-chave1,palavra-chave2,palavra-chave3">
<meta http-equiv="description" content="esta é minha página">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="texto/css">
.alfas
{
filter:alpha(opacidade=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.blurs
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
width:350px;/*Este atributo é essencial, caso contrário o efeito não será visível*/
filter:blur(add=true,direction=90,strength=25);
}
.cromas
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:vermelho;
largura:350px;
filtro:croma(cor=vermelho);
}
.dropshadows
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filtro:dropshadow(cor=vermelho,offx=15,offy=10,positivo=1);
}
.flips
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filtro:flip;
}
.flipvs
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filtro: flipv;
}
.brilha
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filter:brilho(cor=azul,força=15);
}
.grays
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filtro:cinza;
}
.inverte
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filtro:inverter;
}
.máscaras
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filtro:máscara(cor=verde);
}
.sombras
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filter:shadow(cor=vermelho,direção=225);
}
.ondas
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filtro:onda(adicionar=verdadeiro,freq=3,intensidade da luz=100,fase=45,intensidade=20);
}
.raios X
{
font-family:lucida handwirting itálico;
tamanho da fonte: 72px;
estilo da fonte: negrito;
cor:#336600;
largura:350px;
filtro: raio X;
}
</estilo>
</head>
<corpo>
<largura da tabela=1000 borda=1>
<tr><td width=100>Propriedades do filtro</td><td width=100>Descrição</td><td width=400>Parâmetros e valores</td><td width=400>Exemplos de efeitos</td </tr>
<tr><td><span class=alpha>Alfa</span></td><td>Definir efeito de transparência</td><td>opacidade: nível de transparência, 0 a 100, 0 é completamente transparente<br>
estilo: especifica as características da forma da área transparente, 0 é distribuição uniforme 1 é linear 2 é radial 3 é retangular<br>acabamento: define a transparência no final do gradiente; de 0 a 100<br>
startX, startY: coordenadas iniciais do efeito de transparência gradiente<br>finishX, finishY: coordenadas finais do efeito de transparência gradiente</td><td><p><img src="fd.jpg" class="alphas"/ </p </td></tr>
<tr><td>Desfoque</td><td>Crie um efeito de desfoque</td><td>add: Especifique se a imagem deve ser alterada para um efeito de desfoque, verdadeiro ou falso<br>
direção: define a direção do desfoque, 0 graus significa verticalmente para cima, cada 45 graus é uma unidade, o padrão é 270 graus para a esquerda<br>força: representa quantos pixels de largura são afetados pelo desfoque, o padrão é 5< /td>
<td><div class="blrs">BOA SORTE!</div></td></tr>
<tr><td>Chroma</td><td>Defina a cor especificada como transparente</td><td>cor: Especifique a cor transparente</td><td>chroma<div class="chromas">Exemplo < /div></td></tr>
<tr><td>DropShadow</td><td>Crie um contorno de imagem deslocado, ou seja, projete uma sombra</td><td>color: a cor da projeção<br>offx, offy: sombra no deslocamento de direção x, y<br>
positivo: true cria uma sombra para qualquer pixel não transparente, false cria uma sombra para pixels transparentes</td><td><div class="dropshadows">exemplo de dropshadow</div></td></tr>
<tr><td>FlipH</td><td>Inversão horizontal</td><td>Nenhum</td><td><div class="fliphs">Inversão horizontal</div></td >< /tr>
<tr><td>FlipV</td><td>Inversão vertical</td><td>Nenhum</td><td><div class="flipvs">Inversão vertical</div></td >< /tr>
<tr><td>Brilho</td><td>Adicione efeitos de luz ao limite externo do objeto</td><td>cor: especifique a cor da luz<br>
intensidade: intensidade luminosa</td><td><div class="glows">Exemplo de GLOW</div></td></tr>
<tr><td>Cinza</td><td>Reduza a cor da imagem e transforme-a em tons de cinza</td><td>Nenhum</td><td><img src="fd.jpg" class ="cinzas"/></td></tr>
<tr><td>Inverter</td><td>Inverte completamente os valores de cor, saturação e brilho para criar um efeito negativo</td><td>Nenhum</td><td><img src="fd .jpg" class="inverte"/></td></tr>
<tr><td>Luz</td><td>Projetar luz em um objeto</td><td>não</td><td>não</td></tr>
<tr><td>Máscara</td><td>Crie uma máscara transparente para um objeto</td><td>cor: especifique a cor da máscara</td><td><div class="masks" >Exemplo de MÁSCARA</div></td></tr>
<tr><td>Sombra</td><td>Estabelece um contorno sólido de um objeto, ou seja, um efeito de sombra</td><td>cor: cor da projeção<br>direção: direção da projeção</td> <td>< div class="shadows">Exemplo SHADOW</div></td></tr>
<tr><td>Onda</td><td>Use ondulações senoidais para interromper a imagem nas direções do eixo X e do eixo Y</td><td>add: verdadeiro significa interromper a imagem em ondas, falso não atrapalhando<br >
freq: A frequência de geração de ondulações (quantas ondulações são geradas)<br>resistência à luz: aumenta o efeito das ondulações geradas (o valor é de 0 a 100)<br>
fase: Defina o deslocamento no início da onda senoidal, geralmente 0, até 100<br>força: defina a amplitude da onda senoidal</td><td><div class="waves">Exemplo de ONDA</ div> </td></tr>
<tr><td>Xray</td><td>Exibir apenas o contorno do objeto</td><td>Nenhum</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</tabela>
</body>
</html>