It's similar to something you can find on a lot of websites with a couple extra constraints: ✨ no extra elements, no pseudos ✨ working fine on top of image background
@Mr_Teatime @michael_stuhr @aral CSS & JS got better over the past 10+ years, SVG got left behind. I'm hitting bugs in all browsers with SVG filters & hacking my way around them doesn't help with perf.
Not getting my hopes up. Some bugs have been open for 5+ years. At this point, SVG is so far behind it's going to take a huge effort to fix things. And there's no interest as long as ppl don't use it. And ppl don't use it because it's broken. 🤷♀️
Description SVG filters should allow us to a achieve a lot of effects that otherwise involve content duplication or using external images or JS (canvas, whether 2D or WebGL). That is, if they worke...
Ana Tudor 🐯
in reply to Ana Tudor 🐯 • • •The first one is this text effect that uses absolutely no images whatsoever save for #CSS gradients.
Some #SVG filter magic 🪄 is responsible for the background texture and also for the 3D look of the text and its grainy gradients.
https://codepen.io/thebabydino/pen/gONbppb
#filter #svgFilter #texture #textEffect #textEffects #noise #cssGradient #code #coding #3D #3dText #frontend #web #dev #webDev #webDevelopment
Ana Tudor 🐯
in reply to Ana Tudor 🐯 • • •The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.
Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.
A little #SVG #filter magic 🪄 slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR
#CSS #cssGradient #svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment
Ana Tudor 🐯
in reply to Ana Tudor 🐯 • • •The third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/
It's similar to something you can find on a lot of websites with a couple extra constraints:
✨ no extra elements, no pseudos
✨ working fine on top of image background
#CSS #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment
Aral Balkan
in reply to Ana Tudor 🐯 • • •micha
in reply to Ana Tudor 🐯 • • •It tries 😝 time to render was like ie once
Mr. Teatime
in reply to micha • • •ah, thatcs also what I'm seeing.
And after taking a screenshot, FF seemed to crash ...
@anatudor @aral
Ana Tudor 🐯
in reply to Mr. Teatime • • •@Mr_Teatime @michael_stuhr @aral CSS & JS got better over the past 10+ years, SVG got left behind. I'm hitting bugs in all browsers with SVG filters & hacking my way around them doesn't help with perf.
Opened an interop issue https://github.com/web-platform-tests/interop/issues/756
Not getting my hopes up. Some bugs have been open for 5+ years. At this point, SVG is so far behind it's going to take a huge effort to fix things. And there's no interest as long as ppl don't use it. And ppl don't use it because it's broken. 🤷♀️
SVG filters · Issue #756 · web-platform-tests/interop
GitHubAna Tudor 🐯
Unknown parent • • •The seventh is a fancy effect you may have seen on some websites: making a section slide horizontally on vertical scroll!
Here with pure #CSS 🤯 using scroll-driven animations
https://codepen.io/thebabydino/pen/WNqJXXa
#scroll #scrollAnimation #code #coding #frontend #webDevelopment #web #dev #webDev
Ana Tudor 🐯
Unknown parent • • •The ninth is a realistic image grainy shadow effect:
https://codepen.io/thebabydino/pen/OJYwgpe
Using a single img element for each. No image duplication in the markup or CSS.
The magic 🪄 is all in a pretty simple #SVG #filter.
#svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment
Ana Tudor 🐯
Unknown parent • • •The sixth is a little pure #CSS #3D thing I quickly make in under 10 minutes https://codepen.io/thebabydino/pen/wvbWYyd
I really didn't expect anyone would even notice such a silly simple little thing and then it got hearted over 200 times...
#code #coding #fronten #textEffect #web #dev #webDevelopment #webDev #textEffects
Ana Tudor 🐯
in reply to Ana Tudor 🐯 • • •The eighth is this no text duplication blended layers demo https://codepen.io/thebabydino/pen/abxLyxw
Uses #CSS gradients and some #SVG #filter magic 🪄 to get the effect - can you figure out how before checking it out on @codepen?
#svgFilter #textEffect #textEffects #coding #code #frontend #web #dev #webDev #webDevelopment
Ana Tudor 🐯
Unknown parent • • •The fifth is a pure #CSS text effect.
https://codepen.io/thebabydino/pen/XWQQRWG
No text duplication whatsoever, no pseudos, no images save for CSS gradients. Just a single div and a few heavily commented CSS declarations.
Unfortunately broken in Firefox due to an old bug 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498
#cssGradient #cssPattern #textEffect #textEffects #code #coding #frontend #web #dev #webDev #webDevelopment #blue
1481498 - background-clip with multiple values fails when one value is text
bugzilla.mozilla.orgLarge Heydon Collider
Unknown parent • • •Ana Tudor 🐯
in reply to Ana Tudor 🐯 • • •The tenth is this no text duplication stroke shadow 🌊
https://codepen.io/thebabydino/pen/mdoPoJz
Absolutely no text duplication, not in the markup, not in any pseudo-element content.
The outline shadows are tiled down using an #SVG #filter, which is also responsible for the wave 🌊 distortion. 🪄
#svgFilter #CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment