6. Creating depth (p. 150)
Emulate a light source is not that complicated, there is only one fundamental rule to understand, light comes from above.
Emulate a light source
Light comes from above
- appears raised: top edge is lighter & bottom edge is darker
- appears inset: top is darker & bottom lighter
Simulating light in a user interface
- raised elements = box-shadow: inset 0 1px 0 hsl(224, 84%, 74%); + box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
- inset elements = box-shadow: 0 2px 0 hsla(0, 05, 100%, .15); + box-shadow: inset 0 2px hsla(0, 0%, 0%, 0.1);
Works for any elements like text inputs & checkboxes.
Don't get carried away
Don't try to make things look photo-realistic.
Use shadows to convey elevation
- smaller shadow (button) = box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
- medium shadow (dropdown) = box-shadow: 0 4px 6px hsla(0, 0%, 0%, .1);
- larger shadow (modal dialogs) = bos-shadow: 0 15px 35px hsla(0, 0%, 0%, .2);
Establish an elevation system
Five options is plenty:
- box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
- box-shadow: 0 4px 6px hsla(0, 0%, 0%, .2);
- box-shadow: 0 5px 15px hsla(0, 0%, 0%, .2);
- box-shadow: 0 10px 24px hsla(0, 0%, 0%, .2);
- box-shadow: 0 15px 35px hsla(0, 0%, 0%, .2);
Combining shadows with interaction
- normal = box-shadow: 0 4px 6px hsla(0, 0%, 0%, .2);
- on click = box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
Shadows can have two parts
- first shadow is larger & softer (direct light source)
- second shadow is tighter and darker (shadow underneath an object)
- the 2 shadows = box-shadow: 0 4px 6px rgba(0, 0, 0, .7), 0 5px 15px rgba(0, 0, 0, .1);
Acounting for elevation
The five options:
- box-shadow: 0 1px 3px hsla(0, 0%, 0%, .12), 0 1px 2px hsla(0, 0%, 0%, .24);
- box-shadow: 0 3px 6px hsla(0, 0%, 0%, .15), 0 2px 4px hsla(0, 0%, 0%, .12);
- box-shadow: 0 10px 20px hsla(0, 0%, 0%, .15), 0 3px 6px hsla(0, 0%, 0%, .10);
- box-shadow: 0 15px 25px hsla(0, 0%, 0%, .15), 0 5px 10px hsla(0, 0%, 0%, .05);
- box-shadow: 0 20px 40px hsla(0, 0%, 0%, .2);
Even flat designs can have depth
Creating depth with color
- element lighter than background color = feel like it's raised off the page (closer element)
- element darker than background color = feel inset (further away element)
Using solid shadows
Short, vertically offset shadows with no blur radius (card or button):
- box-shadow: 0 3px 0 hsl(220, 7%, 83%);
Overlap elements to create layers
Offset a card so it crosses the transition between two different backgrounds:
- margin-bottom: -60px;
Make an element taller than its parent:
- margin: -60px 0 -60px 0;
Overlapping controls on a carousel:
- left arrow = margin-left: -24px;
- right arrow = margin-right: -24px;
Overlapping images
The trick is to give the images an "invisible border":
- border: 4px solid #FFFFFF;