Image Illustration Filter using css


0

I love that sorta effect where an image nearly looks like it’s an oil painting or an illustration made with a dense, fluid ink fountain pen. I got the perception when Scott Vandehey shared his “halftone filter” effect on the Cloud Four blog.

I’d say it looks a lot like newspaper print:

The trick? We have an image chock-full of CSS filter household effects and an fundamental repeating radial gradient set to a terrific small background-size to get a dot-like effect that’s improved with mix-blend-mode.

The whole concept of Scott’s post is to explain the power of CSS Mix Modes. So, I carry the filter effects he had on the image:

img {
  /* ... */
  filter:
    grayscale(1) 
    brightness(80%) 
    contrast(150%) 
    blur(2px);
  mix-blend-mode: $blend-mode;
}

…and made a few refine, namely:

  • increasing the blur()a tittle (4px)
  • bump the contrast() by an unholy amount (3000%)
  • using screen blend mode

Here’s how that shakes out in CSS:

.painted {
  background: repeating-radial-gradient(
    circle at center,
    hsl(0 0% 15%),
    hsl(16.1 5% 55.5%);
  );
  background-size: 5px;
}

.painted img {
  filter: blur(4px) contrast(3000%) grayscale(1);
  mix-blend-mode: screen;
  width: 100%;
}

You might need to fix that generous contrast() value rely on the image — something large plenty to wash things out.


Like it? Share with your friends!

0
Developer

0 Comments