Then we would need to move down to around 100, 120 percent. ![]() Looking at our image, we could start at around 50 percent, move along to 100 percent. For this, we can use a polygon clip-path. At this point, we want to clip away the parts of the shadow we don't want to be seen. Let's create a second box-shadow, but for this one, let's not have any horizontal offset. We can layer up as many comma-separated box-shadows as we wish. For this box-shadow also accepts an optional inset value, which tells our shadow to display inset within our element. Now, we need to create this inner shadow on the lens. 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. Let's create the specs-lens-shadow style, and we can move our box-shadow declaration into that style. With these duplicate elements, we'll be able to clip the excess that we don't need without affecting our spectacle lenses. 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. What we can do is duplicate the lens elements and use the duplicates purely for the shadow. We can't use a clip-path on the lens, because that will remove the lens as well as the shadow. Any shadow that goes past the outline of our eggshell, we do not want to show. Looking at our shadow, it needs to move horizontally across, but we also have another issue. We could also try 30 and maybe we settle on a happy medium of 25. Let's try a vertical offset that is 20 times our responsive unit. 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. ![]() We can define the size of our blur using our responsive unit. We don't need the spread, but we will use the blur. Styling with a bright color allows us to easily see the shadow we're creating. A box-shadow consists of a horizontal offset, a vertical offset, a blur, a spread, and the color. Let's start by adding a basic box-shadow. That's something we can achieve by applying a box-shadow to each spectacle lens. 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. But it is clearly visible when exported.Jhey Tompkins: We could remove the background-color from our egg and call it there, but we aren't quite done. It's kind of weird, but when I zoom in, the color disappears, and when I zoom out, it reappears. Therefore, a little bit of the color leaks through. I think there is a small size difference between the first cutout (difference) and the actual shape. You probably couldn't have noticed it since you used black as the color of your box before the drop shadow. This is almost working for me, except for a small problem. ![]() The new shape is used to clip the blurred shadow rectangle. The shadow object is below a large rectangle with the shape of the original rounded corner rectangle cut out of it (with difference). Manual clipping is the best way to get this effect, IMO. What is the best way to get this cut out?
0 Comments
Leave a Reply. |