Pavia Fernandez 69 • San Sebastian PR 1.787.528.0151

Efectos de Filtros y Modos de Mezcla

Crear una impactante impresión visual en los visitantes es algo a lo que todo diseñador web debe aspirar a hacer. Hoy, estoy ansioso por mostrarle un nuevo conjunto de capacidades que te permiten crear una amplia gama de efectos visuales, todos usando los efectos de filtro de CSS y modos de fusión.

Anunciate Ahora 360
Funeraria Rios Caldas
La Casa del Bordado
Tomassini Dental Laboratory
Colon Pratts 360
Comercio Local
Moto Theme
Laboratorio San Sebastian
On Stage

Al utilizar los efectos de filtro y los modos de fusión, puedes convertir tu experiencia como diseñador en un campo de juego sin límites, lo que te permite producir un espectro más amplio de diseños. En lugar de alternar entre Photoshop y Elementor, puedes lograr resultados sorprendentes, todo en una sola plataforma.

Los efectos de filtro de CSS y los modos de mezcla ya estaban disponibles para el widget Llamada a la acción -CTA. Ahora también puede usarlos en superposiciones de fondo y con widgets de imágenes y encabezados.

Estos efectos no solo reducen la necesidad de Photoshop. De hecho, al jugar con diferentes filtros y configuraciones de modos de fusión, puede crear diseños interactivos que de otra manera solo serían posibles usando una compleja codificación de CSS.

Te mostraré un puñado de escenas con estilo para inspirarte a explorar estas configuraciones por tu cuenta.

Filtro de mezcla de luminosidad: para una apariencia y sensación más rica

Usando el modo Luminosity Blend, puedes crear un diseño elegante que se ejecute de manera consistente en todo tu blog, o asignarle un color diferente por categoría de blog.

Mapas en blanco y negro con saturación

Antes, tenías que lidiar con el código API de Google para crear este diseño en color blanco y negro para tus mapas. Ahora, obtenga el mismo resultado con un solo efecto: el filtro de saturación.

Efectos de filtro acentuar tus imágenes

En este ejemplo, creamos un bonito efecto de desplazamiento para el cuadro de imagen utilizando una combinación de Desenfoque, Brillo, Contraste y Filtros de saturación. Esto llama la atención sobre la imagen cuando los visitantes se ciernen sobre los miembros del equipo.

Efecto de Gradación de Colores

Modo de mezcla de color + degradados = amor

Después de agregar colores de degradado como superposición a la imagen de fondo, puede combinar fácilmente el degradado con el fondo utilizando el modo de fusión de colores. Esto produce una paleta de colores consistente para los activos visuales de todo el sitio web.

Efectos de doble exposición sin Photoshop

Este diseño presenta dos imágenes superpuestas. La imagen del atleta es un fondo fijo, y el horizonte de Nueva York se establece en la parte superior como una superposición de fondo, utilizando el modo de mezcla de pantalla. Reproducir los colores oscuros como transparentes produce un efecto de doble exposición. Completa con un Titular, aplica el modo Multiply Blend – y el resultado es un diseño espectacular.

R & B

Compilaciones coloridas usando configuraciones simples

La combinación de imágenes y texto de forma creativa te permite obtener resultados realmente interesantes. El efecto es sofisticado, pero el proceso es simple. Aquí, un fondo fijo en blanco y negro, con un degradado de color en la parte superior se establece en el modo de fusión superpuesta. El encabezado de R & B, usando el modo de mezcla de saturación, crea un efecto indirecto, revelando el texto completo solo en desplazamiento.

Videos

Crear efectos impresionantes al usar videos

Las imágenes no son las únicas imágenes que puedes mezclar. En este ejemplo, diseñamos una experiencia genial que se puede usar para exhibir su logotipo, creando una galería de símbolos transparente utilizando el modo de mezcla de pantalla.

Conclusión

Solo hemos visto algunas de las amplias posibilidades que ofrecen los modos de fusión CSS y los efectos de filtro. Te invito a jugar con las diversas configuraciones.
Lleva un tiempo familiarizarse con todos los modos, filtros y la forma en que interactúan, pero una vez que los domines, se convertirán en una parte integral de tu caja de herramientas. Nuevamente, no olvides probar estos efectos también en estados «encima o hover»io para crear interacciones aún más imaginativas. Experimenta y corre salvaje, te sorprenderás con lo que termina una y otra vez.

Si te gustó este Tutorial suscríbete y recibirás en tu correo una notificación cada vez que publiquemos uno nuevo.

Deja un comentario