El código de muestra html y el código CSS incluido se muestran a continuación. La imagen utilizada es fd.jpg. Copie el código y asigne un nombre a la imagen fd.jpg para ver el efecto completo
<!DOCTYPE HTML PUBLIC "- //W3C. //DTD HTML 4.01 Transicional//ES">
<html>
<cabeza>
<title>Efecto de filtro CSS.html</title>
<meta http-equiv="palabras clave" contenido="palabra clave1, palabra clave2, palabra clave3">
<meta http-equiv="descripción" contenido="esta es mi página">
<meta http-equiv="tipo de contenido" contenido="texto/html; conjunto de caracteres=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<tipo de estilo="texto/css">
.alfas
{
filtro:alfa(opacidad=0,finishopacity=100,estilo=1,startx=0,starty=85,finishx=150,finishy=85);
}
.difuminados
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
width:350px;/*Este atributo es esencial, de lo contrario el efecto no será visible*/
filtro: desenfoque (agregar = verdadero, dirección = 90, fuerza = 25);
}
.cromas
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color: rojo;
ancho: 350 px;
filtro:croma(color=rojo);
}
.sombras paralelas
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro: sombra paralela (color = rojo, offx = 15, offy = 10, positivo = 1);
}
.fliphs
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro: voltear;
}
.flipvs
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro:flipv;
}
.brilla
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro:brillo(color=azul,fuerza=15);
}
.grises
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro: gris;
}
.invierte
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro: invertir;
}
.mascarillas
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro:máscara(color=verde);
}
.oscuridad
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro:sombra(color=rojo,dirección=225);
}
.ondas
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro: onda (agregar = verdadero, frecuencia = 3, intensidad de la luz = 100, fase = 45, intensidad = 20);
}
.rayos x
{
familia de fuentes: lucida escrita a mano en cursiva;
tamaño de fuente: 72px;
estilo de fuente: negrita;
color:#336600;
ancho: 350 px;
filtro: radiografía;
}
</estilo>
</cabeza>
<cuerpo>
<ancho de tabla=1000 borde=1>
<tr><td width=100>Propiedades del filtro</td><td width=100>Descripción</td><td width=400>Parámetros y valores</td><td width=400>Ejemplos de efectos</td >>tr>
<tr><td><span class=alpha>Alfa</span></td><td>Establecer efecto de transparencia</td><td>opacidad: nivel de transparencia, 0 a 100, 0 es completamente transparente<br>
estilo: especifica las características de forma del área transparente, 0 es distribución uniforme; 1 es lineal; 2 es radial; 3 es rectangular<br>finishopacity: establece la transparencia al final del degradado para lograr un efecto de degradado, el valor es de 0 a 100<br>
startX, startY: coordenadas iniciales del efecto de transparencia degradado<br>finishX, FinishY: coordenadas finales del efecto de transparencia degradado</td><td><p><img src="fd.jpg" class="alphas"/ </p></td></tr>
<tr><td>Desenfocar</td><td>Crear un efecto de desenfoque</td><td>agregar: especifique si la imagen debe cambiarse a un efecto de desenfoque, verdadero y falso<br>
dirección: establece la dirección del desenfoque, 0 grados significa verticalmente hacia arriba, cada 45 grados es una unidad, el valor predeterminado es 270 grados a la izquierda<br>intensidad: representa cuántos píxeles de ancho se ven afectados por el desenfoque, el valor predeterminado es 5< /td>
<td><div class="blrs">¡BUENA SUERTE!</div></td></tr>
<tr><td>Chroma</td><td>Establezca el color especificado en transparente</td><td>color: Especifique color transparente</td><td>chroma<div class="chromas">Ejemplo < /div></td></tr>
<tr><td>DropShadow</td><td>Crea un contorno de imagen desplazado, es decir, proyecta una sombra</td><td>color: el color de la proyección<br>offx, offy: sombra en el Desplazamiento de dirección x, y<br>
positivo: verdadero crea una sombra para cualquier píxel no transparente, falso crea una sombra para píxeles transparentes</td><td><div class="dropshadows">ejemplo de sombra paralela</div></td></tr>
<tr><td>FlipH</td><td>Inversión horizontal</td><td>Ninguno</td><td><div class="fliphs">Inversión horizontal</div></td >< /tr>
<tr><td>FlipV</td><td>Inversión vertical</td><td>Ninguno</td><td><div class="flipvs">Inversión vertical</div></td >< /tr>
<tr><td>Resplandor</td><td>Añade efectos de luz al límite exterior del objeto</td><td>color: especifica el color de la luz<br>
fuerza: intensidad luminosa</td><td><div class="glows">Ejemplo de BRILLO</div></td></tr>
<tr><td>Gris</td><td>Reduce el color de la imagen y la convierte en escala de grises</td><td>Ninguno</td><td><img src="fd.jpg" clase ="grises"/></td></tr>
<tr><td>Invertir</td><td>Invierte completamente los valores de color, saturación y brillo para crear un efecto negativo</td><td>Ninguno</td><td><img src="fd jpg" class="invierte"/></td></tr>
<tr><td>Luz</td><td>Proyectar luz sobre un objeto</td><td>no</td><td>no</td></tr>
<tr><td>Máscara</td><td>Crear una máscara transparente para un objeto</td><td>color: Especifique el color de la máscara</td><td><div class="masks" >Ejemplo de MÁSCARA</div></td></tr>
<tr><td>Sombra</td><td>Establece un contorno sólido de un objeto, es decir, un efecto de sombra</td><td>color: color de proyección<br>dirección: dirección de proyección</td> <td>< div class="shadows">Ejemplo de SOMBRA</div></td></tr>
<tr><td>Ola</td><td>Utilice ondas sinusoidales para alterar la imagen en las direcciones de los ejes X e Y</td><td>agregar: verdadero significa alterar la imagen en ondas, falso no. interrumpiéndolo<br >
freq: La frecuencia de generación de ondas (cuántas ondas se generan)<br>lightstrength: Mejora el efecto de las ondas generadas (el valor es de 0 a 100)<br>
fase: establece el desplazamiento al comienzo de la onda sinusoidal, generalmente 0, hasta 100<br>fuerza: establece la amplitud de la onda sinusoidal</td><td><div class="waves">Ejemplo de ONDA</ div> </td></tr>
<tr><td>Radiografías</td><td>Solo muestra el contorno del objeto</td><td>Ninguno</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</tabla>
</cuerpo>
</html>