The following CSS functions have no specific category, so we grouped them here in a miscellaneous section.
Let's see what we have.
The
drop-shadow()
CSS function works with the filter
property adds a shadow under the element, and it looks like this:
drop-shadow(5px 5px 3px rgba(0, 0, 0, .5));
The drop-shadow()
function works almost exactly the same way as the box-shadow
property with two differences: the drop-shadow()
function doesn't support the spread-radius
or the inset
values.
Please refer to the box-shadow
property for a detailed description of all the values. Additionally, some browsers actually provide hardware acceleration when using this function, which eventually improves performance. You know how it goes; anything we can do to improve performance is always a +1.
CSS:
.element { filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, .5)); }