Los filtros añaden otra herramienta potente a tu kit de diseño, permitiéndote aplicar efectos gráficos como desenfoque, enfoque, cambios de color y mucho más a tus diseños.
Y aunque estés acostumbrado a aplicar filtros como estos a imágenes, puedes usar filtros CSS en cualquier elemento: botones, texto, vídeos... ¡lo que quieras!
Puedes encontrar todas tus nuevas opciones de Filtro en la sección Efectos de la pestaña Estilo:
Cada tipo de filtro también te ofrece valores que puedes usar para ajustar tus efectos, como el radio para el filtro de Desenfoque.
Aquí tienes los 8 filtros CSS totalmente nuevos que puedes aplicar en el Designer:
1. Desenfoque
Aplica un desenfoque gaussiano a un elemento. Aumenta el valor del radio para que los elementos se vean aún más borrosos.
2. Rotación de tono
Añade una rotación de tono al elemento seleccionado, ajustando sus colores según el valor del ángulo: 0 grados deja el elemento intacto, 180 te lleva al lado opuesto del círculo y 360 te devuelve al punto de partida. El valor máximo es 1440 grados, es decir, 4 vueltas completas al círculo.
3. Saturación
Satura el elemento seleccionado según el grado definido por el valor de cantidad que elijas. La cantidad varía de 0 a 100+, lo que permite obtener resultados súper saturados.
4. Brillo
Te permite hacer que un elemento sea más o menos brillante. Un valor del 0% vuelve el elemento completamente negro, mientras que el 100% lo deja sin cambios. También puedes superar el 100% para obtener resultados aún más brillantes.
5. Contraste
Ajusta el nivel de contraste de un elemento, donde 0% equivale a gris total, 100% deja el elemento intacto y cualquier valor superior al 100% crea efectos de alto contraste.
6. Escala de grises
La forma más sencilla de convertir una foto en color en una obra maestra en blanco y negro.
7. Sepia
¿Quieres darle un toque vintage a tu sitio? Entonces el filtro Sepia es para ti. Los valores van del 0% al 100%, así que puedes controlar qué tan vintage quieres que se vean tus imágenes.
8. Invertir
Invierte los valores de color en una imagen seleccionada; el 0% deja la imagen intacta y el 100% crea valores completamente invertidos.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
3 aplicaciones creativas de los filtros CSS
Como puedes combinar filtros CSS, aplicarlos a estados hover y añadirlos a cualquier elemento, existen todo tipo de formas creativas de poner los filtros CSS a trabajar en tus sitios web.
Aquí tienes solo 3 ideas que se nos ocurrieron:
1. Añadir y reordenar múltiples efectos
Prueba a añadir un par de filtros CSS diferentes a un elemento y luego arrástralos y suéltalos para crear distintos efectos visuales.
¿No te convence el resultado? Haz clic en el icono del ojo para ocultar un efecto y, si te gusta el resultado, haz clic en el icono de la papelera para eliminarlo.
2. Aplicar efectos diferentes en varios estados
Por ejemplo, puedes hacer fácilmente que las miniaturas de los blogs se vuelvan en blanco y negro al pasar el ratón, invertir los colores de los enlaces al hacer clic y mucho más.
3. Filtra cualquier cosa
¿Sientes que a ese vídeo de stock le falta "chispa"? ¡Espera a ver lo que sucede cuando rotas su tono, inviertes sus colores o lo pasas a escala de grises!
¿Qué harás tú con los filtros CSS?
¡Estamos deseando ver lo que creas con esta nueva función! Comparte lo que has hecho con los filtros en los comentarios de abajo o tuitea a @webflowapp con el hashtag #MadeInWebflow.
Nota del editor: Cuando publicamos este artículo por primera vez, afirmamos erróneamente que los filtros CSS podían usarse con interacciones. Actualmente, la única interacción compatible es el estado hover de botones y otros enlaces. Estamos estudiando añadir soporte para interacciones, pero aún no tenemos una fecha definida. ¡Os mantendremos informados!
