Mastodawn

Saw the header here https://mastodon.social/@sturobson@front-end.social/114279126167674533 and had to make a version that works without JS, works with image backgrounds behind the header, works for any level of page zoom and is fully flexible when it comes to following the text wrapping on resize.

Play with it on @codepen https://codepen.io/thebabydino/pen/MYWxeew

#CSS #SVG #filter #svgFilter #concave #web #dev #webDev #webDevelopment #code #coding #frontend

No JS fully flexible image following text wrap shape

Because I saw [this article](https://leanrada.com/notes/css-only-lqip/) and the header caught my attention and I checked to see how it was done. Unfort...

Show thread

Ana Tudor 🐯

By the way, the code is heavily commented https://codepen.io/thebabydino/pen/MYWxeew

So you can see how it works without JS, without wrapping individual elements into spans, just letting it wrap naturally. And without covers that wouldn't allow for an image backdrop behind the text.

#CSS #SVG #filter #svgFilter #blendMode #blending #code #coding #frontend #web #dev #webDevelopment #webDev

No JS fully flexible image following text wrap shape

Because I saw [this article](https://leanrada.com/notes/css-only-lqip/) and the header caught my attention and I checked to see how it was done. Unfort...