CoverT 37: CSS filter

CSS

Mar 19, 2020

code

The filter property can be used to apply a ton of different graphical effects to an element. Filters are commonly used to adjust the rendering of images, backgrounds, etc.

Example

<img class="my-img" src="https://i.picsum.photos/id/10/300/200.jpg" />
<img class="my-img" src="https://i.picsum.photos/id/10/300/200.jpg" />
<img class="my-img" src="https://i.picsum.photos/id/10/300/200.jpg" />
<img class="my-img" src="https://i.picsum.photos/id/10/300/200.jpg" />
<img class="my-img" src="https://i.picsum.photos/id/10/300/200.jpg" />
<img class="my-img" src="https://i.picsum.photos/id/10/300/200.jpg" />

img.my-img {
  margin: 5px;
}

img.my-img:nth-child(2) {
  filter: contrast(200%);
}

img.my-img:nth-child(3) {
  filter: grayscale(80%);
}

img.my-img:nth-child(4) {
  filter: hue-rotate(120deg);
}

img.my-img:nth-child(5) {
  filter: sepia(80%);
}

img.my-img:nth-child(6) {
  filter: blur(2px);
}

Example

Result