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));
}

Use cases for the element() function are rare, but nonetheless it is available to us (granted, browser support isn't ideal yet).

CSS:

.element {
  background: element(#other-element);
}

The image() function is practically the same as the url() function and it's considered to be more flexible and ideal to declare background images rather than using the commonly known url() function. However, the image() CSS function is at risk from being dropped from the spec due to lack of browser support.

CSS:

.element {
  background-image: image(../images/sprite.png);
}

When this function is applied to an element, the element itself and its children are affected. This function supports a numeric value ranging from 0 (zero) to 1 which is the default value. A value of 0 is completely transparent, as in 0% opaque, and 1 is 100% opaque, no transparency whatsoever. Decimal numbers are allowed but negative values are not.

CSS:

.element {
  filter: opacity(.2);
}

This value gives three-dimensional perspective to the element. The element in question will react in a three-dimensional plane.

This function works similarly to the perspective property, and the difference is that the perspective() function is used to give perspective to a single element. Hence, it's applied to the element itself. The perspective property is good for giving perspective to several elements at once, hence it is applied to the parent element instead.

For example, if we apply the perspective() function to every element on a list, each element will have its own vanishing point. But if we apply the perspective property to the parent container of that list, all elements will share the same vanishing point.

The perspective() function on its own doesn't do much, so in order to see it in action we must combine it with any of the other transform functions like rotate(), rotateX(), or rotateY().

It accepts a numeric value with a length unit. Negative values are not allowed. The value defines the distance of the Z axes from the user.

The higher the value, the less intense the perspective. This is because the element is farther away from us. However, the lower the value, the more pronounced the perspective looks. This is because the element is closer to us.

CSS:

.element {
  transform: perspective(300px) rotateY(45deg);
}

This function only works with the clip property, and as I mentioned, this property is now deprecated. Also, this CSS function does not work with the more modern clip-path CSS property, so the recommendation is to use the inset() CSS function instead.

Refer to the inset() CSS function in Chapter 6, CSS Properties – Part 3.