Add Depth to a CSS Illustration with Box Shadow

Jhey Tompkins: [0:00] We could remove the background-color from our egg and call it there, but we aren't quite done. If we reduce the opacity of our egg and raise the opacity of our image, we can see that our spectacles cast a shadow onto the eggshell.

[0:17] That's something we can achieve by applying a box-shadow to each spectacle lens. Let's start by adding a basic box-shadow. A box-shadow consists of a horizontal offset, a vertical offset, a blur, a spread, and the color.

[0:34] Styling with a bright color allows us to easily see the shadow we're creating. We don't need the spread, but we will use the blur. We can define the size of our blur using our responsive unit.

[0:48] If we look closely, we can faintly see the red shadow around the lens, and we can see that we need to apply a vertical offset, so it matches up with the shadow on our image.

[1:00] Let's try a vertical offset that is 20 times our responsive unit. That looks quite close. We could also try 30 and maybe we settle on a happy medium of 25.

[1:17] Looking at our shadow, it needs to move horizontally across, but we also have another issue. Any shadow that goes past the outline of our eggshell, we do not want to show.

[1:27] We can't use a clip-path on the lens, because that will remove the lens as well as the shadow. What we can do is duplicate the lens elements and use the duplicates purely for the shadow.

[1:39] Duplicate our lens elements and add a new class specs-lens-shadow, which allows us to style those duplicate lenses that have been created for the sole purpose of creating the shadow.

[1:51] With these duplicate elements, we'll be able to clip the excess that we don't need without affecting our spectacle lenses. Let's create the specs-lens-shadow style, and we can move our box-shadow declaration into that style.

[2:05] Now, we can apply a slight negative horizontal offset to pull our shadow across a little bit, so let's try calc(-10) * var(--unit), and that looks good for our bottom shadow.

[2:20] Now, we need to create this inner shadow on the lens. For this box-shadow also accepts an optional inset value, which tells our shadow to display inset within our element.

[2:30] We can layer up as many comma-separated box-shadows as we wish. Let's create a second box-shadow, but for this one, let's not have any horizontal offset. Let's keep the same vertical offset. Let's keep the same blur. Let's use a blue color. Let's define it as inset. There, we can see our shadow.

[2:49] At this point, we want to clip away the parts of the shadow we don't want to be seen. For this, we can use a polygon clip-path. Looking at our image, we could start at around 50 percent , move along to 100 percent . Then we would need to move down to around 100, 120 percent. That's because if we clip to 100 percent, we will actually clip away the shadow.

[3:11] We need to go past 100 percent so we can still see the shadow. If we say this is 100, 120, then we would move along to, say, 20 percent, 120 percent. Then it would cut back up. Let's try that. 50 percent , 100 percent , 100 percent, 120 percent, and 20 percent, 120 percent. That's not too far off.

[3:36] Let's jump into dev tools and adjust the styles. Shifting that last 20 percent down to around 15 percent or 14 percent works. It's not quite right. We can see a slight gap here. An additional point taking us to around this area and then here is likely what we need. Let's try adding another point. Let's try 18 percent, 100 percent.

[3:56] That's pretty close, but now we have a slight overhang. Let's adjust that 14 percent. Let's try 16 percent. That looks pretty good. Let's copy that value and apply it in our CSS. At this point, we can define a shadow color. Something with a reduced alpha would be ideal. We can replace the red and blue that we defined previously.

[4:22] We can soften the color of those spectacles. Remove the image from our HTML. There we have it, a pure CSS egghead. In review, we're able to add more depth to our illustration by using box-shadow with duplicated elements that we then use a clip-path on to clip away the excess. We use the duplicate element because we don't want to clip away the original lenses.

[4:47] The duplicate's sole purpose is to render the shadow cast onto the eggshell.