We have heard of the
box-shadow property in css which is used to add drop shadows to our html elements. The following figure shows a div without a drop-shadow (A) and a div with a drop-shadow (B). The drop-shadow property applied is
box-shadow: 2px 2px 8px grey;
Also you might have noticed that the
drop-shadow fails when applied to texts and images. We don't always get the expected results in those cases.
But with a little tweak to the css code we can get the job done.
I’ll tell you how.
Whenever we need a shadow on a text element, using the
text-shadow property instead of the
box-shadow will fix the box issue and will result to a pleasing shadow effect.
text-shadow: 2px 2px 8px grey;
Box shadow treats each image as a box and applies a shadow defining its box edges. If your image isn't a box or rectangular shaped, then box-shadow fails. The solution is pretty simple.
filter: drop-shadow(2px 2px 8px grey);
Applying filter: drop-shadow will use the original image and detect it's correct image boundary without considering it as a box. So it works like a charm
Other filter types
As we came through the filter property in the previous section, You might be curious about the other types of filters that we can use in css. There are many. But the following are the most popular ones.
- filter: blur
- filter: brightness
- filter: grayscale
- filter: opacity
filter: blur(2px); filter: grayscale(0.9); filter: opacity(0.2); filter: brightness(1.2);
In the above figure, leftmost is the original image and the 2nd, 3rd, 4th and 5th images represent the above filter properties respectively.
I recommend you to play around with those nice properties as well. Happy styling!