Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Ivan Enderlin 馃
Ivan Enderlin 馃
@hywan@floss.social  路  activity timestamp 6 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

2 media
An example of two, non-blurred, images.
An example of two, non-blurred, images.
An example of two, non-blurred, images.
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.
  • Copy link
  • Flag this post
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About 路 Code of conduct 路 Privacy 路 Users 路 Instances
Bonfire social 路 1.0.1-beta.35 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct