Shadows Stack

Add a Shadows Stack to your page to create a fancy shadow to your Stack or even a shadow animation by hover or click event. Furthermore you can define a horizontal and vertical movement to your Stack in order to create a fancy 3D animated look

Screenshots

Examples

  • Hover event
  • Shadow animation movement and color change
  • Click event
  • Horizontal movement
  • Rounded corners only on top

Settings

  • BG Color: Background-Color of the Stack
  • Shadow Color
  • Shadow Width
  • Shadow Offset X: Horizontal offset
  • Shadow Offset Y: Vertical offset
  • Animated Shadow: Activate to animate the shadow by the following event
  • Animated Shadow - Event: 'Hover' or 'Click'
  • Animated Shadow - Shadow Color
  • Animated Shadow - Shadow Offset X
  • Animated Shadow - Shadow Offset Y
  • Animated Shadow - Move X: The Stacks' box is moved by the amount of pixel in horizontal direction...
  • Animated Shadow - Move Y: … and/or in vertical direction
  • Animated Shadow - Animation time: Duration for the effect
  • Round Top Corners
  • Round Bottom Corners
  • Corner Radius
  • Border
  • Border - Color
  • Border - Width

Infos and Requirements

Rapidweaver
Rapidweaver 5/6/7
Stacks 2 only
Stacks 2 / 3
Responsive
Compatible to
responsive themes

Browser Compatibility

  • Safari
  • Chrome
  • Opera
  • Internet Explorer ( limited support for animation, shadow and rounded corners at IE7+8 )
  • Firefox

Notes

You should set the Stacks' padding to a value as least as high as you have used for shadow width and any offset