Sass
Text shadows, image shadows and css filters.
July 14, 2020
1 min

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;

Drop shadow with css box-shadow
Drop shadow with css box-shadow

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.

Drop shadow with css box-shadow
Drop shadow with css box-shadow

But with a little tweak to the css code we can get the job done.

Drop shadow with css box-shadow
Drop shadow with css box-shadow

I’ll tell you how

Text shadow

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;

Image shadow

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.

  1. filter: blur
  2. filter: brightness
  3. filter: grayscale
  4. filter: opacity
filter: blur(2px);
filter: grayscale(0.9);
filter: opacity(0.2);
filter: brightness(1.2);

Drop shadow with css box-shadow
Drop shadow with css box-shadow

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!


Tags

Sassfiltersdrop-shadowtext-shadow

Related Posts

Sass
Creating a pure-CSS progressbar in React.
July 05, 2020
1 min