Filtros CSS: efectos de texto e imagen
Puede usar filtros CSS para agregar efectos especiales a texto, imágenes y otros aspectos de una página web sin usar imágenes u otros gráficos. Filters only work on Internet Explorer 4.0. Si está desarrollando su sitio para varios navegadores, puede que no sea una buena idea utilizar filtros CSS porque existe la posibilidad de que no le dé ninguna ventaja.
En este capítulo, veremos los detalles de cada filtro CSS. Es posible que estos filtros no funcionen en su navegador.
Canal alfa
El filtro de canal alfa altera la opacidad del objeto, lo que hace que se mezcle con el fondo. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | opacity Nivel de opacidad. 0 es completamente transparente, 100 es completamente opaco. |
| 2 | finishopacity Nivel de opacidad en el otro extremo del objeto. |
| 3 | style La forma del degradado de opacidad. 0 = uniforme 1 = lineal 2 = radial 3 = rectangular |
| 4 | startX Coordenada X para que comience el degradado de opacidad. |
| 5 | startY Coordenada Y para que comience el degradado de opacidad. |
| 6 | finishX Coordenada X para finalizar el degradado de opacidad. |
| 7 | finishY Coordenada Y para que termine el degradado de opacidad. |
Ejemplo
<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>Producirá el siguiente resultado:
Desenfoque de movimiento
Motion Blur se utiliza para crear imágenes o texto borrosos con la dirección y la fuerza. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | add Verdadero o falso. Si es verdadero, la imagen se agrega a la imagen borrosa; y si es falso, la imagen no se agrega a la imagen borrosa. |
| 2 | direction La dirección del desenfoque, en sentido horario, redondeada a incrementos de 45 grados. El valor predeterminado es 270 (izquierda). 0 = Arriba 45 = arriba a la derecha 90 = Derecha 135 = Abajo a la derecha 180 = Abajo 225 = Abajo a la izquierda 270 = Izquierda 315 = Arriba a la izquierda |
| 3 | strength El número de píxeles que se extenderá el desenfoque. El valor predeterminado es 5 píxeles. |
Ejemplo
<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>Producirá el siguiente resultado:
Filtro de croma
El filtro de croma se utiliza para hacer transparente cualquier color en particular y, por lo general, se utiliza con imágenes. También puede usarlo con barras de desplazamiento. El siguiente parámetro se puede utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color que te gustaría que fuera transparente. |
Ejemplo
<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>Producirá el siguiente resultado:
Efecto de sombra paralela
Sombra paralela se utiliza para crear una sombra de su objeto en el color y la compensación X (horizontal) e Y (vertical) especificados.
Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color, en formato #RRGGBB, de la sombra. |
| 2 | offX Número de píxeles que la sombra paralela está desplazada del objeto visual, a lo largo del eje x. Los enteros positivos mueven la sombra paralela hacia la derecha, los enteros negativos mueven la sombra paralela hacia la izquierda. |
| 3 | offY Número de píxeles que la sombra paralela está desplazada del objeto visual, a lo largo del eje y. Los enteros positivos mueven la sombra paralela hacia abajo, los enteros negativos mueven la sombra paralela hacia arriba. |
| 4 | positive Si es verdadero, todos los píxeles opacos del objeto tienen una sombra. Si es falso, todos los píxeles transparentes tienen una sombra. El defecto es cierto. |
Ejemplo
<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>Producirá el siguiente resultado:
Efecto Flip
El efecto de volteo se utiliza para crear una imagen reflejada del objeto. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | FlipH Crea una imagen de espejo horizontal |
| 2 | FlipV Crea una imagen de espejo vertical |
Ejemplo
<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>Producirá el siguiente resultado:
Efecto de brillo
El efecto de resplandor se utiliza para crear un resplandor alrededor del objeto. Si es una imagen transparente, entonces se crea un brillo alrededor de los píxeles opacos de la misma. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color que quieres que tenga el brillo. |
| 2 | strength La intensidad del brillo (de 1 a 255). |
Ejemplo
<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>Producirá el siguiente resultado:
Efecto de escala de grises
El efecto de escala de grises se utiliza para convertir los colores del objeto a 256 tonos de gris. El siguiente parámetro se utiliza en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | grayscale Convierte los colores del objeto en 256 tonos de gris. |
Ejemplo
<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>Producirá el siguiente resultado:
Efecto invertido
El efecto de inversión se utiliza para asignar los colores del objeto a sus valores opuestos en el espectro de colores, es decir, para crear una imagen negativa. El siguiente parámetro se utiliza en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | Invert Asigna los colores del objeto a su valor opuesto en el espectro de colores. |
Ejemplo
<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>Producirá el siguiente resultado:
Efecto máscara
El efecto de máscara se utiliza para convertir los píxeles transparentes en un color específico y hace que los píxeles opacos sean transparentes. El siguiente parámetro se utiliza en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color en el que se volverán las áreas transparentes. |
Ejemplo
<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>Producirá el siguiente resultado:
Filtro de sombra
El filtro de sombras se utiliza para crear una sombra atenuada en la dirección y el color especificados. Este es un filtro que se encuentra entre Dropshadow y Glow. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color que quieres que tenga la sombra. |
| 2 | direction La dirección del desenfoque, en sentido horario, redondeada a incrementos de 45 grados. El valor predeterminado es 270 (izquierda). 0 = Arriba 45 = arriba a la derecha 90 = Derecha 135 = Abajo a la derecha 180 = Abajo 225 = Abajo a la izquierda 270 = Izquierda 315 = Arriba a la izquierda |
Ejemplo
<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>Producirá el siguiente resultado:
Efecto de onda
El efecto de onda se utiliza para darle al objeto una distorsión de onda sinusoidal para que parezca ondulado. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | add Un valor de 1 agrega la imagen original a la imagen ondulada, 0 no lo hace. |
| 2 | freq El número de ondas. |
| 3 | light La fuerza de la luz en la onda (de 0 a 100). |
| 4 | phase En qué grado debe comenzar la onda sinusoidal (de 0 a 100). |
| 5 | strength La intensidad del efecto de onda. |
Ejemplo
<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>Producirá el siguiente resultado:
Efecto de rayos X
El efecto de rayos X escala de grises y aplana la profundidad del color. En este filtro se utiliza el siguiente parámetro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | xray Escala de grises y aplana la profundidad del color. |
Ejemplo
<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>Producirá el siguiente resultado: