Agregue filtros SVG con CSS

Sep 11, 2025
Cómo
Add SVG filters with CSS
[dieciséis]

SVG ha existido desde principios de la década de 2000, y sin embargo, todavía hay formas interesantes que los diseñadores encuentran que lo usen. En este tutorial, el enfoque estará en los filtros que se aplican a través de SVG, pero en lugar de aplicarlos a una imagen SVG, le mostraremos cómo se pueden aplicar a cualquier contenido de página regular.

La forma en que se aplica el filtro a la SVG en realidad a través de CSS, diciéndole qué identificación tiene el filtro. Usando esa misma idea, el filtro se puede aplicar al texto regular, por ejemplo. La buena parte de esto es que puede agregar un gran aspecto gráfico a su texto, lo que solo hubiera sido posible aplicando una serie de filtros de Photoshop y ahorrando como una imagen. Con el filtro SVG, el texto permanece accesible y se puede seleccionar, ya que aún es solo un elemento de texto regular en su página.

El código aquí creará un mapa de desplazamiento al texto que también contiene un mapa alfa para que aparezca acuoso y se ajuste al tema de la página. Luego, se creará otro filtro que hace que un menú aparezca como blobs de agua, que se pegan ligeramente, pero se separan de la mancha mientras se mueven más lejos. Nuevamente, esto se mantiene con el tema de esta página en particular y muestra dos formas creativas para aplicar filtros SVG a otro contenido.

¿Interesado en aprender más sobre SVG? Eche un vistazo a nuestro artículo sobre Todo lo que necesitas saber sobre SVG en la web. . Alternativamente, agregue algunos intereses a sus sitios con uno de estos enfríos Ejemplos de animación CSS .

01. Comienza

Primero, debe descargar los archivos del proyecto utilizando el enlace directamente arriba. Una vez que haya hecho eso, arrastre el comienzo Carpeta del proyecto en su Código IDE y abra el index.html página. Verá que hay algún contenido de páginas ya escrito. La sección de encabezado debe ser creada, y esto contendrá el título que se verá afectado por un filtro SVG. Añadir el código aquí, justo dentro del cuerpo etiqueta. 

 & lt; div clase = "bg" & gt;
& lt; div clase = "medio" & gt;
& lt; H2 class = "titular" & gt; bajo el agua
Aventure Park & ​​Lt; / H2 & GT;
& lt; div clase = "intro_block" & gt;

02. Cierra el encabezado.

Ahora el encabezado está terminado, con todo el texto para ello en su lugar. Si ve su página en el navegador en este momento, verá una imagen de agua con algún texto en él. El titular, que aún no está sin ajustar, se va a estilizar y tener el filtro SVG aplicado a él. 

 & lt; H3 class = "subtítulo" & gt; experimenta el océano
& lt; br & gt; como nunca antes y lt; / h3 & gt;
& lt; p class = "intro" & gt; bajo el agua
Aventure Park es una experiencia.
Unlinkeke cualquier cosa que hayas tenido
tenía. Viajar a las profundidades de
el océano y caminar entre los
¡LIFE DE SEA! & LT; / P & GT;
& lt; / DIV & GT;
& lt; / DIV & GT;
& lt; / DIV & GT;

03. Crea un filtro SVG

El código SVG se puede agregar en cualquier lugar de la página, pero como no se verá, puede ser una buena idea colocarlo en la parte inferior, antes de la etiqueta del cuerpo de cierre. El filtro SVG crea un ruido de turbulencia. AVISO El filtro tiene una identificación: esto es lo que permite que el CSS se aplique esto a otro elemento en la página. 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & gt;
& lt; ID de filtro = "DesplazamientoFilter" & GT;
& lt; feturbulencia tipo = "turbulencia"
BaseFrecuencia = "0.004" numoctaves =
Resultado "2" = "Turbulencia" / & GT;
& lt; / filter & gt;
& lt; / svg & gt;

04. Ocultar la SVG

Pasar a la Página.csss El archivo ahora, y sobre todo el código CSS para el resto de la página será donde irá nuestro nuevo CSS. Aquí, el SVG está configurado para no mostrar en la página en absoluto. La etiqueta de encabezado se establece para tener el tipo de letra derecho aplicado a él. 

 svg {
Pantalla: Ninguno;
}
H2 {
Tamaño de fuente: 5.5VW;
Fuente-familia: 'Creta Round', Serif;
}

05. Añadir al título

los altura de la línea Se establece en cero porque, más tarde, se animará el titular, por lo que tener un control sobre su escala en la página es importante. También se le da algún acolchado para que se sienta con la cantidad correcta de espacio a su alrededor y el color se cambie. 

 .headline {
Altura de la línea: 0;
Pantalla: bloque en línea;
relleno: 70px;
Color: #CCFFFFF;

06. Terminar el titular

Add SVG filters with CSS: Finish the headline

[dieciséis] El SVG se utilizará para desplazar el texto del título.

Al finalizar la clase de titulares, la siguiente línea aplica la desplazamiento ID en la SVG al texto. los traducir3d Asegura que el texto se convierta en hardware acelerado. La escala se cambia ligeramente para garantizar que cuando se aplique el desplazamiento, se vea bien. 

 Filtro: URL (#displacementfilter);
Transformar: traducir3d (0, 0, 0);
Transformar: Scaley (1.8) ROTATEY (-2DEG);
}

07. Hazlo desplazarlo.

Add SVG filters with CSS: Make it displace

[dieciséis] Y ahora el texto es desplazado.

Si prueba el filtro en esta etapa, la turbulencia reemplaza completamente el texto. Eso es fácil de arreglar. Vuelva al código de filtro en la página index.html. Esto toma la turbulencia y la fuente gráfica, que es el texto, y lo aplica como un filtro de desplazamiento. Intente cambiar la frecuencia base y el número de octavas en la turbulencia. 

 & lt; fedisplacementmap in2 = "turbulencia" en = "
Sourcegraphic "Scale =" 30 "XChannelelselector =" R "
ychannelselector = "g" resultado = "DISP" / & GT;

08. Suavizar los bordes.

Add SVG filters with CSS: Soften the edges

[dieciséis] Usa un borrón gaussiano para suavizar el texto.

Los bordes se ven un poco ásperos para un efecto acuoso. Que se puede curar con un borrón gaussiano. Añadir el código después del mapa de desplazamiento. Cuando refleja la página, definitivamente ha borrado el texto, pero el desplazamiento se ha ido. Nuevamente, estos son elementos que se pueden fijar en la forma de crear el efecto. 

 & lt; fegaussianblur in = "sovengographic"
stddeviation = "15" Result = "BLR" / & GT;

09. Compuesto los dos

Add SVG filters with CSS: Compositing the two

[dieciséis] Combina el desenfoque y el desplazamiento por un efecto más agradable.

Agregue la línea compuesta aquí debajo del borroso gaussiano anterior. Verá que esto combina el desenfoque y el desplazamiento juntos, y también crea un efecto translúcido acuoso al texto. Se ha ido de alguna manera de suavizar los bordes, pero no es suficiente. Sería bueno si el borrón original pudiera agregarse a esto. 

 & lt; fecomposite in = "BLR" IN2 = "DISP" Operator = "in" result = "comp" / & gt;

10. Fusionar el desenfoque

Add SVG filters with CSS: Merging the blur

[dieciséis] Con una operación de combinación se verá aún mejor

Una operación de combinación permite que el resultado final del compuesto se fusione con el efecto de desenfoque. Esto ahora parece que se ajusta a la imagen de fondo y parece encajar con las líneas de luz que vienen a través del agua. La mejor parte del texto es que aún es seleccionable y parte de la página, a diferencia de si creó esto en Photoshop. 

 & lt; Femerge Result = "Final" & GT;
& lt; femergenode in = "BLR" / & gt;
& lt; femergenode in = "comp" / & gt;
& lt; / femerge & gt;

11. Crea una animación.

Volver a la Página.csss Archivo y agregue en los fotogramas clave como se muestra aquí. Esto simplemente ampliará el tamaño de fuente de un ancho vertical cero a un ancho vertical de 5.5. Al inicio, se aplicará esto al título, de modo que el texto se escala y en su lugar en la pantalla. A medida que se mueve el texto, el desplazamiento también cambiará sobre la longitud, dando una ondulación acuosa. 

 @KeyFrames Scaler {
desde {
Tamaño de fuente: 0VW;
}
a {
Tamaño de fuente: 5.5VW;
}
}

12. CAMBIAR EL ESTILO H2

Add SVG filters with CSS: Change the h2 style

[dieciséis] Reemplace el H2 para traer algo de animación.

los H2 El estilo se agregó previamente en el Paso 4. Reemplace ese código con este nuevo código, lo que agrega la animación CSS durante cuatro segundos al encabezado. La animación se detiene y se mantiene en el último fotograma clave. Guarde esto y pruebelo en el navegador para ver el texto ondulado en su lugar. 

 H2 {
Altura de la línea: 0;
Tamaño de fuente: 0VW;
Nombre de la animación: Scaler;
Duración de la animación: 4S;
Modo de relleno de animación: Delantero;
Fuente-familia: 'Creta Round', Serif;
}

13. Añadir navegación

Ahora vamos a crear una animación de inspiración de blob de agua adecuada usando otro filtro SVG. Agregue el siguiente contenido de navegación a la parte superior del código corporal, antes del encabezado que se inició en el primer paso del tutorial. Esto creará lo básico de un menú de hamburguesa en un círculo. 

 & lt; nav clase = "menú" & gt;
& lt; type = "Checkbox" href = "#" clase =
"MENÚ-ABRIR" NOMBRE = "MENU-ABRIR" ID = "MENU-
abierto "/ & gt;
& lt; etiqueta clase = "menú-abierta-botón"
para = "menu-abre" & gt;
& lt; span class = "hamburguesa
hamburguesa-1 "& gt; & lt; / span & gt;
& lt; span class = "hamburguesa
Hamburger-2 "& gt; & lt; / span & gt;
& lt; span class = "hamburguesa
hamburguesa-3 "& gt; & lt; / span & gt;
& lt; / label & gt;

14. Terminar la navegación.

Ahora se pueden agregar los elementos de navegación restantes. Esto también utiliza la biblioteca de iconos de código abierto de fuente increíble, que se ha agregado a la sección principal para enlazar desde el CDN de esta biblioteca. Cada elemento circular del menú tendrá un icono dentro de él. 

 & lt; a href = "#" clase = "MENU-item" & gt; & lt; i clase = "fa
fa-car "& gt; & lt; / i & gt; / a & gt; / a & gt;
& lt; a href = "#" clase = "MENU-item" & gt; & lt; yo
Clase = "Fa Fa-Ship" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; a href = "#" clase = "MENU-item" & gt; & lt; yo
Clase = "FA FA-MAP" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; a href = "#" clase = "MENU-item" & gt; & lt; yo
Clase = "Fa Fa-Maltercase" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; / nav & gt;

15. Añadir el nuevo filtro.

Otro filtro se va a agregar para este efecto. En la SVG, agregue este código después de la etiqueta de filtro de cierre del código agregado anteriormente. Aquí los efectos se construyen de forma muy similar a anteriormente. Esto permitirá que el menú se parezca a Blobs pegajosos de líquido que se mueve. 

 & lt; Filter ID = "Shadowed-Blob" & GT;
& lt; fegaussianblur en = "Sourcegraphic"
Resultados = "Blur" stddeviation = "20" / & gt;
& lt; fecolormatrix in = "blur" mode =
Valores "MATRIX" = "1 0 0 0 0 0 1 0 0 0
0 0 0 1 0 0 0 0 0 0 18 -7 "
resultado = "blob" / & gt;
& lt; fegaussianblur en = "blob"
stddeviation = "3" Result = "Shadow" / & GT;
& lt; fecolormatrix in = "shadow" mode =
Valores "MATRIX" = "0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 -0.2 "
Resultado = "Sombra" / & GT;

16. Termina el filtro.

Aquí se agrega el resto del filtro, que completa el efecto que se colocará en cada círculo de los elementos del menú. Esto hará que los elementos tengan el efecto Blob líquido agregado. Guarde esta página y luego cambie al archivo 'design.css'. 

 & LT; Feoffset en = "Sombra" DX = "0" DY = "2"
resultado = "sombra" / & gt;
& lt; fecomposite in2 = "shadow" en = "blob"
resultado = "blob" / & gt;
& lt; fecomposite in2 = "blob"
en = "Sourcegraphic" result = "Mezcle" / & GT;
& lt; / filter & gt;

17. Aplicar el filtro.

El código CSS ahora se puede agregar a los diferentes design.css , solo para mantener todos los CSS de navegación juntos en el mismo lugar. Se ha agregado algún código, pero aquí el filtro se aplica al menú, que será un menú fijo para que esté presente en la pantalla en todo momento. 

 .Menu {
Filtro: URL ("# sombreado-blob");
Posición: fijo;
PADDING-TOP: 20px;
relleno izquierdo: 80px;
Ancho: 650px;
Altura: 150px;
Tamaño de la caja: Border-Box;
Tamaño de fuente: 20px;
Texto-alineado: izquierda;
}

18. Haz el trabajo del menú.

El menú está configurado para convertir invisible cuando el menú está abierto. El elemento flotante de cada uno de los elementos del menú se crea de manera que haya un cambio cuando el usuario se cierne sobre esto. Cada niño del menú recibe una transición de 0.4 segundos cuando los elementos del menú están regresando a su posición original. 

 .Menú-abre {
Pantalla: Ninguno;
}
.Menú-artículo: Hover {
Fondo: # 47959F;
Color: # B2F0F8;
}
.Menú-artículo: NTH-hijo (3), .Menú-artículo: NTH-
Niño (4), .Menu-Artículo: Nth-Child (5), .menu-
Artículo: NTH-hijo (6) {
Transición-Duración: 400ms;
}

19. Añadir una hamburguesa

Add SVG filters with CSS: Burger icon to the top

[dieciséis] Cambie el índice Z del ícono de la hamburguesa para llevarlo a la parte superior

El icono de la hamburguesa se eleva por encima de los otros elementos cambiando su índice z . El menú crece cuando el usuario se cierne sobre esto, y al hacer clic en el menú ahora obtendrá la hamburguesa para animar desde tres líneas de una hamburguesa a una 'X', indicando la opción para eliminar el menú. 

 .Menú-Botón abierto {
Índice Z: 2;
Función de tiempo de transición: cúbica
Bezier (0.175, 0.885, 0.32, 1.275);
Transición-Duración: 400ms;
Transformar: escala (1.1, 1.1) traducir3d
(0, 0, 0);
cursor: puntero;
}
.Menú-Botón abierto: Hover {
Transformada: escala (1.2, 1.2) traducir3d
(0, 0, 0);
}

20. Mueve los elementos.

El primer elemento del menú es en realidad el tercer hijo del menú, ya que hay una casilla de verificación y la hamburguesa antes de ella. Agregar esto permite que el primer elemento de menú se mueva en posición una vez que el usuario haga clic en el menú. Cada elemento del menú se mudará con un tiempo un poco más largo. 

 .Menú-Open: Checked + .Menu-Button-Button {
Función de tiempo de transición: lineal;
Transición-Duración: 400ms;
Transformación: escala (0.8, 0.8) traducir3d
(0, 0, 0);
}
.Menú-Open: Checked ~ .Menu-item {
Función de tiempo de transición: cúbica
Bezier (0.165, 0.84, 0.44, 1);
}
.Menú-Open: Checked ~ .menu-item: nth-niño (3) {
Duración de la transición: 390ms;
Transformar: traducir3d (110px, 0, 0);
}

21. Dirigir el movimiento restante.

Add SVG filters with CSS: Remaining movement

[dieciséis] Mueva los elementos del menú a diferentes velocidades para un look más líquido

Los elementos del menú restante se mueven con diferentes velocidades. Esto permite que los elementos se adhieran juntos en las primeras etapas de la animación, lo que le dará al aspecto del líquido BLOBBY, utilizando el filtro SVG. Guarde los documentos y vea los resultados terminados en su navegador. 

 .Menú-Open: Checked ~ .Menu-Artículo: Nth-Child (4) {
Duración de la transición: 490ms;
Transformar: traducir3d (220px, 0, 0);
}
.Menú-Open: Checked ~ .menu-item: nth-niño (5) {
Duración de la transición: 590 ms;
Transformar: traducir3d (330px, 0, 0);
}
.Menú-Open: Checked ~ .Menu-item: Nth-Child (6) {
Duración de la transición: 690ms;
Transformar: traducir3d (440px, 0, 0);
}

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com 

[dieciséis] ¡Generar, la galardonada conferencia para diseñadores web, regresa a NYC el 24 al 25 de abril! Para reservar boletos visita www.generateconf.com

Este artículo fue publicado originalmente en Creative Web Design Magazine Diseñador web . Comprar emito 283 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

  • Animar svg con javascript
  • La guía completa de svg
  • Animaciones SVG de supercarga con GSAP

Cómo - Artículos más populares

Cómo simplificar la creación de la forma de mezcla en maya

Cómo Sep 11, 2025

[dieciséis] (Crédito de la imagen: Antony Ward) En mayas, las formas de mezcla, o los objetivos de morph, ya que también se..

Cómo probar sitios de reaccionar y aplicaciones

Cómo Sep 11, 2025

[dieciséis] (Crédito de la imagen: Futuro) Si desea saber cómo probar reaccionar, está en el lugar correcto. ¿De verdad s..

Cómo flipar una capa en Photoshop: una guía completa

Cómo Sep 11, 2025

[dieciséis] ¿Viendo doble? Esta imagen se ha volteado y mezclado con el original. (Crédito de la imagen: Futuro) E..

Crea paisajes impresionantes en Houdini

Cómo Sep 11, 2025

[dieciséis] Al utilizar un enfoque procesal basado en nodos, el software 3D Houdini de SIDEFX proporciona a los artistas digitales un ..

Crea un grabado digital un boceto

Cómo Sep 11, 2025

[dieciséis] En este tutorial, tomamos el grabado mecánico Etch Etch un boceto como inspiración e intento de implementar estas caract..

Llegue a enfrentarse con la técnica de pintura en húmedo

Cómo Sep 11, 2025

[dieciséis] Mojado en húmedo es un técnica de pintura Eso a menudo puede causar frustración. Este método es donde se ag..

5 maneras de crear experiencias de VR más inmersivas

Cómo Sep 11, 2025

[dieciséis] La realidad virtual no es exactamente nueva, pero solo ha sido en los últimos años, la tecnología ha alcanzado un punto..

Cómo obtener su modelo de ZBrush en Maya

Cómo Sep 11, 2025

[dieciséis] Para esto Tutorial maya Te voy a mostrar cómo recibí este modelo de enlace gruñón de Zbrush a Maya para la ..

Categorías