La esencia de los efectos de filtro CSS.

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

.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;
}





Propiedades del filtroDescripciónParámetros y valoresEjemplos de efectos>tr>
AlfaEstablecer efecto de transparenciaopacidad: nivel de transparencia, 0 a 100, 0 es completamente transparente

estilo: especifica las características de forma del área transparente, 0 es distribución uniforme; 1 es lineal; 2 es radial; 3 es rectangular
finishopacity: establece la transparencia al final del degradado para lograr un efecto de degradado, el valor es de 0 a 100

startX, startY: coordenadas iniciales del efecto de transparencia degradado
finishX, FinishY: coordenadas finales del efecto de transparencia degradado

DesenfocarCrear un efecto de desenfoqueagregar: especifique si la imagen debe cambiarse a un efecto de desenfoque, verdadero y falso

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
intensidad: representa cuántos píxeles de ancho se ven afectados por el desenfoque, el valor predeterminado es 5< /td>

Ejemplo < /div>
DropShadowCrea un contorno de imagen desplazado, es decir, proyecta una sombracolor: el color de la proyección
offx, offy: sombra en el Desplazamiento de dirección x, y

positivo: verdadero crea una sombra para cualquier píxel no transparente, falso crea una sombra para píxeles transparentes

ejemplo de sombra paralela

FlipHInversión horizontalNinguno

Inversión horizontal

< /tr>
FlipVInversión verticalNinguno

Inversión vertical

< /tr>
ResplandorAñade efectos de luz al límite exterior del objetocolor: especifica el color de la luz

fuerza: intensidad luminosa

Ejemplo de BRILLO

GrisReduce el color de la imagen y la convierte en escala de grisesNinguno
InvertirInvierte completamente los valores de color, saturación y brillo para crear un efecto negativoNinguno
LuzProyectar luz sobre un objetonono
MáscaraCrear una máscara transparente para un objetocolor: Especifique el color de la máscara

Ejemplo de MÁSCARA

SombraEstablece un contorno sólido de un objeto, es decir, un efecto de sombracolor: color de proyección
dirección: dirección de proyección < div class="shadows">Ejemplo de SOMBRA

Ejemplo de ONDA
RadiografíasSolo muestra el contorno del objetoNinguno