Less used properties in CSS: filters

In CSS there is a lot of properties who have been using less than others, and this is because of two major reasons “I think”, the first is we were not in complicated situations that require using filters, second we didn’t know them primaly.. So I will try from time to time to make a small blog posts about those type of css properties.

What is?

Filters give us the opportunities to make operations on css elements.
We used normally to do things like opacity, brightness, backgrounds and more using photo editors.
When we start using css filters we will be able to do that with css.

Syntax

.mydiv {
  filter: <value>;
}

In this css property we can use various value:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()
  • url()

Notice that we use (), because all value require a parameter

Example

img {
  // add opacity over img
  filter: opacity(0.6);
}

That means the image will be 60% transparent, because of the opacity()

Example 2

div {
  width: 300px;
  height: 300px;
  border: 2px solid #000;
  filter: drop-shadow(60px 60px 10px blue);
}

That’s will give us a shadow on any css elements, I will use it on DIV

The Two Examples in Action

See HERE

Note:

We have also the right to apply multiple filters at once. Something like this:

img {
  filter: opacity(0.6) blur(4px);
}

For more resources:

Leave a Reply

Your email address will not be published. Required fields are marked *