Efectos CSS

Efectos CSS

Use efectos CSS para añadir efectos visuales a sus elementos o configure cómo mezclarlos con elementos superpuestos. Los efectos CSS se pueden animar y anular en las media rules.

Puede encontrar la configuración de los efectos CSS en el panel Efectos CSS cuando se selecciona un único elemento. Si el panel no está visible en su espacio de trabajo, actívelo desde el menú Ventana.

No se pueden aplicar efectos CSS a las máscaras.

Modo de mezcla

El modo de mezcla determina cómo se mezcla el contenido de un elemento con el fondo en función del matiz, de la saturación, y de los valores de brillo de los colores del elemento y del fondo.

Para aplicar un modo de mezcla:

1. Seleccione el elemento que quiera mezclar con el fondo.
2. En el panel Efectos CSS, use el desplegable Modo de mezcla para elegir un modo.

Pruebe a seleccionar diferentes modos de mezcla para previsualizar su efecto. Si un elemento no se mezcla como esperaba, compruebe que el elemento seleccionado esté delante de los otros elementos con los que lo quiere mezclar.

Lista de modos de mezcla

• Normal (sin efectos): sin mezcla.
• Color: usa el matiz y la saturación del color del elemento y la luminosidad del color de fondo.
• Subexposición de color: invierte el color de fondo, lo divide por el color del elemento, e invierte el resultado.
• Sobrexposición de color: divide el color de fondo por el color inverso del elemento.
• Oscurecer: usa el color más oscuro del elemento o del fondo.
• Diferencia: resta el color más oscuro del color más claro.
• Exclusión: se aplica igual que el modo Diferencia, pero con menos contraste.
• Luz fuerte: aplica el modo Multiplicar si el elemento es más oscuro que el fondo, o el modo Pantalla si el elemento es más claro.
• Matiz: usa el matiz del color del elemento y la saturación y la luminosidad del color de fondo.
• Aclarar: utiliza el color más claro del elemento o del fondo.
• Luminosidad: usa la luminosidad del color del elemento y el matiz y la saturación del color de fondo.
• Multiplicar: multiplica el color del elemento por el color de fondo.
• Superposición: aplica el modo Multiplicar si el elemento es más claro que el fondo, o el modo Pantalla si el elemento es más oscuro.
• Saturación: usa la saturación del color del elemento y el matiz y la luminosidad del color de fondo.
• Pantalla: invierte los colores del elemento y del fondo, los multiplica y luego invierte el resultado.
• Luz suave: se aplica de la misma forma que el modo Luz fuerte, pero con un efecto más suave.

Filtros

Los filtros le permiten añadir efectos visuales a un elemento mediante CSS, como el desenfoque o la sombra paralela.

En los documentos de vídeo y los anuncios de imagen, puede usar la herramienta Fondo para aplicar filtros CSS al área situada detrás de un elemento.

Añadir un filtro

Para añadir un nuevo filtro:

1. Seleccione el elemento al que quiere añadir un filtro.
2. En el panel Efectos CSS, haga clic en Añadir filtros.
3. Seleccione el filtro que desea aplicar. Están disponibles los siguientes filtros:
   • Desenfoque
   • Brillo
   • Contraste
   • Sombra paralela
   • Escala de grises
   • Girar matiz
   • Invertir
   • Opacidad
   • Saturar
   • Sepia
4. Ajuste las opciones de configuración según sea necesario. Abajo encontrará más información al respecto.

Puede añadir varios filtros a un elemento, en cuyo caso puede reordenar los filtros.

Lista de filtros

Desenfoque

Aplica desenfoque al elemento.

Opciones de configuración

• Radio: el radio del desenfoque, de 0 a 100 píxeles.

Brillo

Aumenta o disminuye el brillo del elemento.

Opciones de configuración

• Porcentaje: un 0 % hace que el elemento se muestre en negro, mientras que el 100 % mantiene el elemento sin cambios. El porcentaje máximo es del 1000 %.

Contraste

Ajusta el contraste del elemento.

Opciones de configuración

• Porcentaje: un 0 % hace que el elemento se muestre en gris, mientras que el 100 % mantiene el elemento sin cambios. El porcentaje máximo es del 1000 %.

Sombra paralela

Añade una sombra paralela al elemento.

Opciones de configuración

• Distancia X: distancia horizontal con respecto a la sombra paralela, entre -100 píxeles y 100 píxeles.
• Distancia Y: distancia vertical con respecto a la sombra paralela, entre -100 píxeles y 100 píxeles.
• Radio: el radio de la sombra, de 0 a 100 píxeles.
• Color: el color de la sombra.

Escala de grises

Convierte el elemento a escala de grises.

Opciones de configuración

• Porcentaje: un 0 % mantiene el elemento sin cambios, mientras que el 100 % hace que el elemento esté completamente en escala de grises.

Girar matiz

Ajusta los colores del elemento.

Opciones de configuración

• Ángulo: el número de grados que puede girar la rueda de color, de 0° a 360°.

Invertir

Invierte los colores del elemento.

Opciones de configuración

• Porcentaje: un 0 % mantiene el elemento sin cambios, mientras que el 100 % invierte por completo los colores del elemento.

Opacidad

Cambia la opacidad del elemento.

Opciones de configuración

• Porcentaje: un 0 % hace que el elemento sea totalmente transparente, mientras que el 100 % mantiene el elemento sin cambios.

Saturar

Satura el elemento.

Opciones de configuración

• Porcentaje: un 0 % hace que el elemento no esté saturado, mientras que el 100 % mantiene el elemento sin cambios. El porcentaje máximo es del 1000 %.

Sepia

Convierte el elemento al efecto sepia.

Opciones de configuración

• Porcentaje: un 0 % mantiene el elemento sin cambios, mientras que el 100 % convierte el elemento al efecto sepia por completo.

Reordenar filtros

Si se aplican varios filtros al mismo elemento, estos se aplican en el mismo orden en el que aparecen en el panel Efectos CSS.

Para reordenar filtros:

1. Coloque el cursor sobre el nombre del filtro que quiera reordenar. Aparecerán tres puntos .
2. Use los puntos como controlador para arrastrar y soltar el filtro en la posición que quiera en el panel.

Ocultar un filtro

Puede ocultar un filtro para que su efecto no aparezca en la escena, en las vistas previas ni en los archivos publicados.

Para ocultar un filtro:

1. Coloque el cursor sobre el nombre del filtro.
2. Haga clic en el icono Ocultar .
3. Para volver a mostrar el filtro, haga clic en el icono Mostrar .

No se pueden editar los controles de los filtros ocultos.

Eliminar un filtro

Para eliminar un filtro:

1. Coloque el cursor sobre el nombre del filtro.
2. Haga clic en el icono Eliminar .