In this section, we will examine the rules that define how shadow effects should look.
Shadow effects are pseudo-3D effects used by jQuery UI and PrimeFaces to great effect when overlays are used. An overlay is a component that is laid out above the rest of the page. They also cover up content in the background. To exaggerate the three-dimensional effect, a shadow effect is used.
An example of an overlay with a shadow effect can be seen in the following screenshot:
The dialog box in the middle is displayed as an overlay. The background is actually covered by a so-called curtain and it has a shadow that makes it stand out above the background even more.
The last two rules in our theme, .ui-widget-overlay
and .ui-widget-shadow
, define the curtain that covers the background content and the shadow attached to the dialog box.
The overlay rule looks like this:
.ui-widget-overlay { background: #aaaaaa url("#{resource['primefaces-moodyblue2:images/ui-bg_flat_0_aaaaaa_40x100...