Elements overlapping background transitions

How to use it

Move an element so that it is overlapping the transition between background colours.

When to use it

If you want to make the element seem more important than the other content contained within the background "block", having that element overlap the background transition gives the impression that it's higher up the visual hierarchy, since it's ignoring rules that other content is following. If you have a vertically short background block, having a form container overlap both the top and bottom transitions can give you some more space to work with, and make the content in the container seem more important, without giving too much space to the other content in that block and leaving you with too much whitespace.

What to watch out for

You might want to apply a shadow to the element, since it's ignoring the background transition and is therefore "floating" above the interface, if you consider the transitions to be borders for content.

Examples

Example