We just need to apply our intuition when it comes to designing shadows. Compare the different shadows around you.īecause we have so much experience existing in environments with shadows, we don't really have to memorize a bunch of new rules. If you're not able to move your hands, you can use reference objects in the room instead. Notice how the shadow changes: it moves further away from your hand (larger offset), it becomes fuzzier (larger blur radius), and it starts to fade away (lower opacity). If you're in a well-lit room, press your hand against your desk (or any nearby surface) and slowly lift up. There are probably complex mathematical reasons for why these things happen, but we can leverage our intuition as humans that exist in a lit world. In practice, it can be easier to skip this step.) (I'm also increasing the size of the card, for even more realism. Two other things happen as the card rises higher: The vertical offset is always 2x the horizontal one. The first two numbers-horizontal and vertical offset-scale together in tandem. We'll need to tweak all 4 variables in tandem to create a cohesive experience.Įxperiment with this demo, and notice how the values change: How can we create the illusion that an element is lifting up towards the user? Everything will cast a shadow at the same angle.Īs a matter of practicality, I choose to have all shadows share the same angle, because trying to calculate unique angles for each element sounds like way too much hassle for me. But if the light source is far away, like the sun, those differences are negligible. This is true if the light source is nearby, like people huddled around a campfire. Wouldn't each element need to have its own ratio, since each element will have a unique position relative to the light source? You may be wondering why I suggest using the same ratio for every element. This will make it seem like every element is lit from the same light source. Here's the first trick for cohesive shadows: every shadow on the page should share the same ratio. In the image above, for example, the resulting shadow has a 4px vertical offset and a 2px horizontal offset. Instead, we shift the shadow around by specifying a horizontal offset and a vertical offset. If CSS had a real lighting system, we would specify a position for one or more lights. It's common for that light source to be above and slightly to the left: In general, we should decide on a single light source for all elements on the page. The direction of the shadows depends on the position of the light: In the natural world, shadows are cast from a light source. Otherwise, it just looks like a bunch of blurry borders: If our goal is to create the illusion of depth, we need each and every shadow to match. Here's the problem: by creating each shadow in isolation like this, you'll wind up with a mess of incongruous shadows. When I wanted an element to have a shadow, I'd add the box-shadow property and tinker with the numbers until I liked the look of the result. Link to this headingCreating a consistent environmentįor a long time, I didn't really use shadows correctly 😬. In order to achieve these goals, though, we need to take a holistic view of the shadows in our application.
Either I want to increase the prominence of a specific element, or I want to make my application feel more tactile and life-like. When I use shadows, I do it with one of these purposes in mind. We can use elevation as a tool to direct attention. Our attention tends to be drawn to the elements closest to us, and so by elevating the dialog box, we make it more likely that the user focuses on it first. By using different shadows on the header and dialog box, we create the impression that the dialog box is closer to us than the header is. There's also a tactical benefit here as well. I want the applications I build to feel tactile and genuine, as if the browser is a window into a different world. Drag the "Reveal" slider to see what I mean: If we use shadows strategically, we can create the illusion of depth, as if different elements on the page are floating above the background at different levels. Shadows imply elevation, and bigger shadows imply more elevation.
But first, I wanna take a step back and talk about why shadows exist in CSS, and how we can use them to maximum effect. We'll get to the fun CSS trickery soon, I promise. Link to this headingWhy even use shadows?
0 kommentar(er)
