Sombra de Caja

Una vez que seleccionas un estilo de sombra, puedes personalizar las siguientes opciones:

• Posición Horizontal de la Sombra de Caja – Define la posición horizontal de la sombra proyectada.

• Posición Vertical de la Sombra de Caja – Define la posición vertical de la sombra proyectada.

• Fuerza del Desenfoque de la Sombra de Caja – Define la intensidad del desenfoque de la sombra. Mientras mayor sea el valor, más grande será el desenfoque, y la sombra será más ancha y clara.

• Fuerza de Expansión de la Sombra de Caja – Define la fuerza de expansión del desenfoque. Aumentar esta fuerza incrementará la densidad de la sombra, resultando en una sombra más intensa.

• Color de la Sombra – Define el color de la sombra.

• Posición de la Sombra de Caja – Define si la sombra está dentro o fuera del módulo.

Filtros

• Tono (Hue) – Define el ángulo del tono del color.

• Saturación – Define la intensidad de la saturación del color.

• Brillo – Define cuán brillantes deben ser los colores.

• Contraste – Define cuán distintos deben ser las áreas claras y oscuras.

• Invertir (Invert) – Invierte el tono, la saturación y el brillo por el valor especificado.

• Sepia – Aplica un tono más cálido, con apariencia amarilla/marrón.

• Opacidad – Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque (Blur) – Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de Fusión (Blend Mode) indica cómo el módulo se mezcla con las capas debajo de él. Por defecto, estará seleccionado “normal”.

Transformar

• Escalar (Scale)

• Trasladar (Translate)

• Rotar (Rotate)

• Sesgar (Skew)

• Puntos de Origen (Origin points)

Navega entre las opciones con tabulador. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la esquina inferior derecha.

Animación

• Duración de la Animación – Define el tiempo que tarda la animación en completar un ciclo.

• Retraso de la Animación – Define cuánto tiempo esperar desde que se aplica la animación hasta que comienza a ejecutarse. La animación puede empezar más tarde, inmediatamente desde el inicio, o inmediatamente desde un punto intermedio.

• Opacidad Inicial de la Animación – Define el valor de opacidad con el que inicia la animación.

• Curva de Velocidad de la Animación – Define el método de suavizado (easing) de la animación. Aplicar easing crea un efecto más fluido que una curva lineal.

• Repetición de la Animación – Por defecto, la animación solo se ejecuta una vez. Si quieres que se repita continuamente, elige la opción Loop (bucle).
  

Pestaña Avanzada

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e IDs CSS personalizados al módulo, lo que facilita la personalización avanzada usando hojas de estilo o código CSS externo.

CSS ID y Clases

CSS Personalizado

• CSS de Forma Libre – Escribe CSS libremente usando el selector selector para apuntar a este módulo. Por ejemplo:
  selector h1 {color: red;}

• Elementos del Módulo – También puedes aplicar CSS personalizado a partes específicas del módulo pegando el código en esta sección. Al hacer clic en esta pestaña, verás secciones individuales donde añadir propiedades CSS personalizadas.