Replacing DOM elements with shadows
There are many examples when elements on the page are exclusively visual. For the purpose of
simplifying DOM tree, pseudo elements “before” and “after” are commonly used. However, this limits
the number of elements to two.
When additional visual elements have the same shape, it is possible to use the box-shadow property as
a replacement. While the main use case for this property is the addition of shadows for elements, it
is important to note that the property can be used without blurred edges. The shadow can also be
translated on x and y-axis. Combining this with relative units allows the creation of scalable
objects.
An increasing number of shapes is achieved by adding more sets of values which is comma-separated
from the previous set. It is important to note that even negative values can be used.
Other than manipulating offset (first two) values of the property, it should be noted that the
manipulation of spread (third) value allows manipulation of the scale of the shape. By increasing
the offset value the shape becomes larger, while negative values allow shrinking the shape.
This trick can be especially useful for CSS-only animations with multiple objects.
This trick has some drawbacks, mainly in the number of lines of CSS it which could be required for
some use cases. Although, the use of precompilers (Sass, LESS) can alleviate these problems.
Additionally, this trick has its limited number of shapes which can be used on - it’s mainly
rectangular, rhomboid, and ellipsoid shapes.
There is also property “filter: drop-shadow” which can be used instead of box-shadow. However, there
is a large difference in the way these properties behave because “filter: drop-shadow” is applied to
both the HTML element and previously added shadows, meaning the number of shapes doubles every time
another set of properties is added.