3 ms·
can someone explain what magic is going on inside ".glass::before" with the background image and svg filter?
by jonahx 13y ago
can someone explain what magic is going on inside ".glass::before" with the background image and svg filter?
- Schlaefer 13y agoYou can use a svg in a url() and in this case it's inlined. If you url-decode it's: <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1920" height="1120"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> <image xlink:href="http://placekitten.com/1920/1120" width="1920" height="1120" filter="url(#blur)"/> </svg>
- callum85 13y agoThere isn't actually as much magic as I first thought. The SVG (which is loaded via data URI) actually loads the same cat image again, and blurs it. (The cat URL is hardcoded into that SVG string in the data URI). So you have to know the image URL in advance, and generate a data URI for an SVG that contains it. Therefore this wouldn't work as a CSS-only technique if you wanted a dynamic image URL - you'd need JavaScript for that. Tip: you can copy the whole data URI into your browser's location bar it will load the SVG. Then you can open devtools and inspect it to see what's going on.