← Back to context

Comment by ipunchghosts

2 days ago

I know very little of css and to me it seems like a configuration file for rendering text, similar to changing default fonts ornsizes for matplotlib plots using plt.rcParams. How does this do inage blurring then?

If you read the article, it explains exactly how the technique works.

One of the many ways CSS allows you to customize formatting is to change the background style of elements. In addition to just using a solid color or image, you can specify a procedural gradient. And by superimposing several such gradients, you can make a very blurry approximation of an image.

CSS also includes a basic expression language which allows evaluating simple arithmetic expressions. So you can encode all the blurred image's parameters as a packed integer in a single compact CSS property per image, and use rules to define the gradients in terms of that integer.

Note that CSS is not used to compute the blurred image representation itself -- you have to do that separately. (Even if you could do it in pure CSS, the whole point is to show a blurred preview image before the image itself is downloaded to the browser, so doing it in CSS would defeat the purpose.)

> [It] seems like a configuration file for rendering text...

A more accurate mental model might be, "a declarative language for styling HTML elements," where "styling" is very broad. You can make user interfaces that show and hide elements, have animations, etc. triggered by clicking buttons without a single line of JavaScript. It's a lot more powerful than the configuration parameters to plotting functions, in my book it's a programming language rather than a configuration language.