Effects

Effects can be used to highlight individual elements.

Shadows visualize a spatial impression. They mark elements from their environment. They can also be used to display interactivity.

Overlays emphasize the contents above it and further hide not relevant information.

The browser focus shows the element what is currently focused.

Usage#

  • Mainly the effects are used for picture-text compositions. But it can also be used as a highlight element.

Shadows#

Default#

  • This shadow should be used for all elements that are displayed with a better recognition in contrast to the website background.
AttributesPreview
color: basic-black
rgba: 0, 0, 0, 0.15
settings: 0px 1px 2px 0px		shadow: default

Overlays#

  • This overlay covers the website in the background and highlights important content.
  • The overlay extends across the entire page.
  • The content box placed over the overlay can have a free ratio.
AttributesPreview
color: basic-black
opacity: 72%		overlay

Browser focus#

  • The browser focus shows the element what is currently focused.
  • Use the given focus for a consistent experience.
AttributesPreview
Global setup
outline: total 3px (outside)
color composition:
1. brand-primary-base: 2px
2. basic-white: 1px		browser focus default
Exception!
outline: total 3px (outside)
The error state has the
color composition:
1. danger-base: 2px
2. basic-white: 1px		browser focus error
Example
browser focus example

Change log#

5.2.1 Fundamental & 5.2.1 Web - 2021-10-01#

Fixed#

  • Doc: "Effect" | Fixed explanation of the browser focus setup

5.0.0 Fundamental & 5.0.0 Web - 2021-03-22#

Changed#

  • "Effect" | Browser focus: Update description

Added#

  • "Effect" | Browser focus: Example on dark background

Removed#

  • "Shadow" | Removed shadow symbol from SCHWARZ CAKE UI Fundamental