Overlapping card shadows | Sketch Tutorial (2019)

▶︎▶︎ https://www.udemy.com/course/learnsketch3/?couponCode=JAN22YT - I've been noticing all over the place lately that overlapping card designs are creating a bit of a paradox when it comes to the drop shadows being cast. On a hunch, I went back through the Google Material Design guidelines and found that Google themselves present this paradox as a best practice. We are dealing with 3 overlapping surfaces if you include the background. It’s further back than the rear card. We know that because the rear card is casting a shadow onto it. So what about the front-most card? If it’s casting a shadow onto the rear card, we know it has elevation from it. That means the elevation from the front card to the background has to be different than from the front card to the rear card. Overlapping surfaces at two different elevations: get two shadows. Here’s what Google Material has to say about elevation and shadows: “All Material Design surfaces, and components, have elevation values. Surfaces at different elevations do the following: • Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars •Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection •Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces •Elevation can be depicted using shadows or other visual cues, such as surface fills or opacities. When a surface overlaps another surface, either partially or completely, it indicates that the two surfaces occupy different elevations (but not the degree, or amount, of difference between them). Surfaces at higher elevations appear in front of those at lower elevations, meaning they are positioned at different elevations along the z-axis. Surfaces may overlap one another by default, or become overlapped as a result of motion that changes their position in the UI. When surfaces have different opacities or insufficient contrast from one another, it can make it difficult to tell which surface is in front of another. Avoid ambiguous overlap by ensuring surface edges are clearly defined.” So let’s look at how to quickly and easily fix this shadow problem in Sketch using just a few layers and a mask. - Launch Sale! Take my complete Sketch course on Udemy for 75% off: ▶︎▶︎ https://www.udemy.com/course/learnsketch3/?couponCode=JAN22YT -