// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \page quick-design-effects.html
    \previouspage quick-2d-effects.html
    \nextpage quick-logic-helpers.html

    \title Design Effects

    \QDS provides a set of effects in the \uicontrol Properties view that you can apply
    to the components.

    \image studio-effects.webp "Design Effects in the Properties view"

    \note This feature is a \e Beta release.

    The available set of Design Effects applies to the \QDS components:
    \list
        \li \l {Applying Layer Blur to a Component} {Layer Blur}
        \li \l {Applying Background Blur to a Component} {Background Blur}
        \li \l {Applying Drop Shadow to a Component} {Drop Shadow}
        \li \l {Applying Inner Shadow to a Component} {Inner Shadow}
    \endlist

    \section1 Applying Layer Blur to a component

        Use \uicontrol {Layer Blur} to make a component blurry. To apply \uicontrol {Layer Blur}
        to a component:
        \list 1
            \li Select the component in the \uicontrol 2D or \uicontrol Navigator view.
            \li Go to the \uicontrol {Properties} view > \uicontrol Effects
                and select \uicontrol {Add Effects}.
            \li Go to \uicontrol {Layer Blur} and enter the level of blurring you need
                in \uicontrol {Blur}.

            \image studio-effects-layer-blur.webp "Layer Blur Effects in Properties view"
        \endlist
        \note The level of \uicontrol {Layer Blur} is adjustable between zero and one hundred. \br
            To remove the applied \uicontrol {Layer Blur}, select the component,
            then go to \uicontrol {Properties} view > \uicontrol {Layer Blur}
            > \uicontrol {Remove Effects}. This also removes all the other effects
            applied to the component.

    \section1 Applying Background Blur to a component

        Apply \uicontrol {Background Blur} to a component when you want to blur a selected
        component behind it. Consider the following:
        \list
            \li Make the component partially transparent. With solid color,
                the background component is not visible.
            \li Use a solid color on the background component. On
                a transparent background component the \uicontrol {Background Blur} does not
                function properly.
            \note Currently, the \uicontrol {Background Blur} functions on top of only one selected
                background component. All the other components ignore the blurring.
        \endlist

        After fulfilling the above conditions, apply the
        \uicontrol {Background Blur} to a component:

        \list 1
            \li Select the component in the \uicontrol 2D or \uicontrol Navigator view.
            \li Go to the \uicontrol {Properties} view > \uicontrol Effects
                and select \uicontrol {Add Effects}.
            \li Go to \uicontrol {Background Blur} and enter the level of blurring you need
                in \uicontrol {Blur}.
            \li In the \uicontrol Background dropdown menu, select another
                components as the background component.
            \li Drag the component on top of the background component. The area from the
                component covering the component selected as \uicontrol Background gets
                blurred. However, any other component behind the component doesn't blur.
        \endlist

        \image studio-effects-background-blur.webp "Applying Background Blur"

    \section1 Applying Drop Shadow to a component

        Shadows can either fall outside or inside the component.
        The shadow that falls outside is a drop shadow. To apply
        a \uicontrol {Drop Shadow} to a component:

        \list 1
            \li Select the component in the \uicontrol 2D or \uicontrol Navigator view.
            \li Go to the \uicontrol {Properties} view > \uicontrol Effects
                and select \uicontrol {Add Effects}.
        \endlist

       This adds the default drop shadow to the component. To adjust this shadow:

        \list 1
            \li Select the component and go to the \uicontrol Properties view > \uicontrol Effects.
                Then, select \imageparticleplay next to the shadow type
                selector dropdown menu.
            \li Adjust \uicontrol Blur, \uicontrol Offset, \uicontrol Spread, and \uicontrol Color
                to shape the shadow.
        \endlist

        \image studio-effects-drop-shadow.webp "Drop Shadow Effects in Properties view"

        \note To stack multiple shadows, select \uicontrol {Add Shadow Effect} from the
            \uicontrol Properties view. After adding multiple shadows, you can adjust them
            separately from their expandable menu.

        The \uicontrol {Show behind} feature in \uicontrol {Drop Shadow} only works when
        the component is transparent. To use it:

        \list 1
            \li Select the component with a drop shadow.
            \li Go to the \uicontrol Properties view > \uicontrol Effects.
                Then, select \imageparticleplay next to the shadow type
                selector dropdown menu.
            \li Select \uicontrol {Show Behind}.

            \image studio-effects-show-shadow-behind.webp "Show drop shadow behind the component"
        \endlist

    \section1 Applying Inner Shadow to a component

        \uicontrol {Inner shadow} works inside a component. To apply \uicontrol {Inner Shadow}:

        \list 1
            \li Select the component in the \uicontrol 2D or \uicontrol Navigator view.
            \li Go to the \uicontrol {Properties} view > \uicontrol Effects
                and select \uicontrol {Add Effects}.
            \li From the dropdown menu, select \uicontrol {Inner Shadow}.
            \li Adjust \uicontrol Blur, \uicontrol Offset, \uicontrol Spread, and \uicontrol Color
                to shape the shadow.

            \image studio-effects-inner-shadow.webp "Inner shadow of the component"
        \endlist


*/
