Stroke as dark bottom edge

How to use it

Add a stroke to the bottom edge of an element that is darker than the colour of the element, assuming a top-down light source.

When to use it

This technique will make the element look like it's popping out of the page. It's often used for navigation bars at the top of the page, to add some depth and separate the navigation from the content without being too obvious/visually heavy.

What to watch out for

If the stroke is not the same colour as the element background, but darker, it probably won't look like a darker lower edge, and you'll just be adding a line divider.

Examples

Example