Pavia Fernandez 69 • San Sebastian PR 1.787.528.0151

Efectos de Filtros y Modos de Mezcla

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN
Efecto de Gradación de Colores

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.

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.

Lionel Valentin Caderon

Lionel Valentin Caderon

Leave a Replay

About Me

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Recent Posts

Follow Us

Weekly Tutorial

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit