LiftedCorners Stack

Lifted Corners Stack

shows a block of text (or an image) with ‘lifted’ corners

Use this stack to draw extra attention to some text or an image in a subtle way.

Demo
Here you are. The effect is particularly nice with white a really light background. Take a look at the demo page for all variations.

Usage

Just drag a text or image stack in the drop zone of the stack and select where you want the ‘curl(s)’ to appear. By default, the content has a thin border and a subtle gradient giving it some ‘shading’ on the side that is ‘lifted’. You can overrule both, but the background gradient will only be visible when the content contains text and when you don’t overrule the background color.

Need help using it on a non-stacks page? Here’s a tutorial.

Background
This stack is inspired on a snippet by Chris Violette.

Limitations
  • The lifted corners will not be shown in Internet Explorer worse than version 9 (fig. 1). Visitors using Internet Explorer 8 (fig. 2) will see a normal block of text or image.
  • In Opera bottom shadow, left side and top and bottom shadow, left side are shown incorrect (fig. 3).

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 2 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
Lifted Corners Stack (IE9)
fig. 1: Internet Explorer 9: correct

Lifted Corners Stack (IE8)
fig. 2: Internet Explorer 8: no shadow

Lifted Corners Stack (Opera)
fig. 3: Opera: ‘bottom shadow, left side’ and ‘top and bottom shadow, left side’ are shown incorrect.
Lifted Corners HUD
© 2012-2017 Marathia Web Design | Contact