Filtros CSS - efeitos de texto e imagem
Você pode usar filtros CSS para adicionar efeitos especiais a textos, imagens e outros aspectos de uma página da web sem usar imagens ou outros gráficos. Filters only work on Internet Explorer 4.0. Se você estiver desenvolvendo seu site para vários navegadores, pode não ser uma boa ideia usar filtros CSS porque existe a possibilidade de que isso não traria nenhuma vantagem.
Neste capítulo, veremos os detalhes de cada filtro CSS. Esses filtros podem não funcionar em seu navegador.
Canal Alfa
O filtro Alpha Channel altera a opacidade do objeto, o que o torna mesclado com o fundo. Os seguintes parâmetros podem ser usados neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | opacity Nível de opacidade. 0 é totalmente transparente, 100 é totalmente opaco. |
| 2 | finishopacity Nível de opacidade na outra extremidade do objeto. |
| 3 | style A forma do gradiente de opacidade. 0 = uniforme 1 = linear 2 = radial 3 = retangular |
| 4 | startX Coordenada X para que o gradiente de opacidade comece. |
| 5 | startY Coordenada Y para que o gradiente de opacidade comece. |
| 6 | finishX Coordenada X do gradiente de opacidade até o fim. |
| 7 | finishY Coordenada Y para o gradiente de opacidade terminar. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>Isso produzirá o seguinte resultado -
Motion Blur
Motion Blur é usado para criar imagens ou texto borrados com a direção e a força. Os seguintes parâmetros podem ser usados neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | add Verdadeiro ou falso. Se verdadeiro, a imagem é adicionada à imagem desfocada; e se for falso, a imagem não é adicionada à imagem desfocada. |
| 2 | direction A direção do desfoque, no sentido horário, arredondada em incrementos de 45 graus. O valor padrão é 270 (esquerda). 0 = superior 45 = Cima direita 90 = Certo 135 = Inferior direito 180 = Inferior 225 = Inferior esquerdo 270 = Esquerda 315 = Superior esquerdo |
| 3 | strength O número de pixels que o desfoque irá estender. O padrão é 5 pixels. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Filtro de Croma
O filtro de croma é usado para tornar qualquer cor específica transparente e geralmente é usado com imagens. Você também pode usá-lo com barras de rolagem. O seguinte parâmetro pode ser usado neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | color A cor que você gostaria que fosse transparente. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>Isso produzirá o seguinte resultado -
Efeito de sombra projetada
Drop Shadow é usado para criar uma sombra de seu objeto no deslocamento e cor X (horizontal) e Y (vertical) especificados.
Os seguintes parâmetros podem ser usados neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | color A cor, no formato #RRGGBB, da sombra. |
| 2 | offX Número de pixels em que a sombra projetada é deslocada do objeto visual, ao longo do eixo x. Os inteiros positivos movem a sombra projetada para a direita, os inteiros negativos movem a sombra projetada para a esquerda. |
| 3 | offY Número de pixels em que a sombra projetada é deslocada do objeto visual, ao longo do eixo y. Inteiros positivos movem a sombra projetada para baixo, e inteiros negativos movem a sombra projetada para cima. |
| 4 | positive Se verdadeiro, todos os pixels opacos do objeto terão uma sombra. Se for falso, todos os pixels transparentes terão uma sombra. O padrão é verdadeiro. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>Isso produzirá o seguinte resultado -
Efeito Flip
O efeito Flip é usado para criar uma imagem espelhada do objeto. Os seguintes parâmetros podem ser usados neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | FlipH Cria uma imagem de espelho horizontal |
| 2 | FlipV Cria uma imagem de espelho vertical |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>Isso produzirá o seguinte resultado -
Efeito de brilho
O efeito de brilho é usado para criar um brilho ao redor do objeto. Se for uma imagem transparente, o brilho será criado ao redor dos pixels opacos dela. Os seguintes parâmetros podem ser usados neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | color A cor desejada para o brilho. |
| 2 | strength A intensidade do brilho (de 1 a 255). |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>Isso produzirá o seguinte resultado -
Efeito da escala de cinza
O efeito da escala de cinza é usado para converter as cores do objeto em 256 tons de cinza. O seguinte parâmetro é usado neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | grayscale Converte as cores do objeto em 256 tons de cinza. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>Isso produzirá o seguinte resultado -
Inverter efeito
O efeito Inverter é usado para mapear as cores do objeto para seus valores opostos no espectro de cores, ou seja, para criar uma imagem negativa. O seguinte parâmetro é usado neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | Invert Mapeia as cores do objeto com seus valores opostos no espectro de cores. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>Isso produzirá o seguinte resultado -
Efeito Máscara
O efeito de máscara é usado para transformar pixels transparentes em uma cor especificada e torna os pixels opacos transparentes. O seguinte parâmetro é usado neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | color A cor que ficarão as áreas transparentes. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Filtro de sombra
O filtro de sombra é usado para criar uma sombra atenuada na direção e cor especificadas. Este é um filtro que fica entre Dropshadow e Glow. Os seguintes parâmetros podem ser usados neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | color A cor que você deseja que a sombra tenha. |
| 2 | direction A direção do desfoque, no sentido horário, arredondada em incrementos de 45 graus. O valor padrão é 270 (esquerda). 0 = superior 45 = Cima direita 90 = Certo 135 = Inferior direito 180 = Inferior 225 = Inferior esquerdo 270 = Esquerda 315 = Superior esquerdo |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Efeito Onda
O efeito de onda é usado para dar ao objeto uma distorção de onda senoidal para torná-lo ondulado. Os seguintes parâmetros podem ser usados neste filtro -
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | add Um valor de 1 adiciona a imagem original à imagem ondulada, 0 não. |
| 2 | freq O número de ondas. |
| 3 | light A força da luz na onda (de 0 a 100). |
| 4 | phase Em que grau a onda senoidal deve começar (de 0 a 100). |
| 5 | strength A intensidade do efeito de onda. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Efeito de raio-x
Efeito de raio-X em tons de cinza e nivela a profundidade da cor. O seguinte parâmetro é usado neste filtro:
| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | xray Escala de cinza e nivela a profundidade da cor. |
Exemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>Isso produzirá o seguinte resultado -