Because this is a fallback, it makes sense to use one or two variations, even for slightly different drop-shadow() filters.Īnother consideration to keep in mind is that every non-transparent area will cast a shadow indiscriminately, including text (when your background is transparent), as you have already seen in Figure 4.7. We could use data URIs (which would also save the extra HTTP request), but they would still contribute to a large filesize. The parameters are fixed inside the file, and it’s not practical to have multiple files if we want a slightly different shadow. Unfortunately, if the SVG filter is a separate file, it’s not as customizable as a nice, human-friendly function that’s right in your CSS code, and if it’s inline, it clutters the code. Therefore, if we apply a positive vertical offset, we will start seeing a shadow on the bottom of our element, but not on any of the other sides, which is the effect we were trying to achieve:įilter : url(drop-shadow.svg#drop-shadow) įilter : drop -shadow (2px 2px 10px rgba (0 ,0 ,0. Unless we move it with offsets (the first two lengths), we will not see any of it. It logically follows that if we apply a negative spread radius whose absolute value is equal to the blur radius, then the shadow has the exact same dimensions as the element it’s applied on. For example, a spread radius of -5px will reduce the width and height of the shadow by 10px ( 5px on each side). The spread radius increases or (if negative) decreases the size of the shadow by the amount you specify. The solution lies in the lesser known fourth length parameter, specified after the blur radius, which is called the spread radius. In practice, it will look smaller because the color transition on the edges is not linear, like a gradient would be. To be precise, we will see a 1px shadow on the top ( 4px - 3px), 2px on the left ( 4px - 2px), 6px on the right ( 4px + 2px), and 7px on the bottom ( 4px + 3px). Also, even if this wasn’t a problem, we wanted a shadow on only one side, not two, remember? However, then this results in a way too conspicuous shadow, which doesn’t look nice ( Figure 4.2). We could change the offsets to hide any shadow from the top and left, by increasing them to at least 4px. The use of 4px blur radius means that the dimensions of our shadow are approximately 4px larger than our element’s dimensions, so part of the shadow will show through from every side of the element. This is different than text-shadow, which is not clipped underneath the text. For example, if we set a semi-transparent background on the element, we will not see a shadow underneath. However, for some use cases, it’s important to realize that no shadow will be painted underneath the element. This is a little different from the way most authors visualize shadows (a blurred rectangle underneath the element). The blurred rectangle is then clipped where it intersects with our original element, so that it appears to be “behind” it. This essentially means that the color transition on the edges of the shadow between the shadow color and complete transparency will be approximately as long as double the blur radius ( 8px, in our example).Ĥ. It’s blurred by 4px with a Gaussian blur algorithm (or similar). It’s moved 2px to the right and 3px to the bottom.ģ. A rgba(0,0,0.5) rectangle is drawn with the same dimensions and position as our element.Ģ. Unless otherwise noted, referring to an element’s dimensions here means the dimensions of its border box, not its CSS width and height.ġ. The following series of steps is a good (albeit not completely technically accurate) way to visualize how this shadow is drawn ( Figure 4.1): FIGURE 4.1 Example mental model of a box-shadow being painted
0 Comments
Leave a Reply. |