Discussion
Loading...

Post

  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Ivan Enderlin 馃
@hywan@floss.social  路  activity timestamp 3 months ago

Minimal CSS-only blurry image placeholders, https://leanrada.com/notes/css-only-lqip/.

Pretty clever!
The author represents Low Quality Image Placeholders (LQIP) by integers (20 bits long) then use CSS Math operators to do bitwise operations and extract some values to generate this blurry effect (based on 6 circles, 1 solid background image, and blend everything together with a blur filter). I love it. 100% CSS, no JS required. Of course, there is a first step consisting at generating this integer.

#lqip#css

The two Low Quality Image Placeholders for the previous original images.
The two Low Quality Image Placeholders for the previous original images.
The two Low Quality Image Placeholders for the previous original images.
An example of two, non-blurred, images.
An example of two, non-blurred, images.
An example of two, non-blurred, images.
  • Copy link
  • Flag this post
  • Block
Log in

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About 路 Code of conduct 路 Privacy 路 Users 路 Instances
Bonfire social 路 1.0.0-rc.3.13 no JS en
Automatic federation enabled
  • Explore
  • About
  • Members
  • Code of Conduct
Home
Login