#Tag
A thing I've been working on to add to my shop https://ko-fi.com/anatudor/shop
You may have seen sliced & offset text before, but this also has its selection not only inverting the text, punching a hole through to the backdrop, but the selection is also sliced & offset. This you won't find elsewhere.
A thing I've been working on to add to my shop https://ko-fi.com/anatudor/shop
You may have seen sliced & offset text before, but this also has its selection not only inverting the text, punching a hole through to the backdrop, but the selection is also sliced & offset. This you won't find elsewhere.
2️⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout - check it out on @codepenhttps://codepen.io/thebabydino/full/QWopRMK
An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels. Another very special one.
#SVG #filter #svgFilter#JS #interactive #javascript #code #coding #frontend#CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout
Behind the demo https://mastodon.social/@anatudor/112242678457752295
2️⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout - check it out on @codepenhttps://codepen.io/thebabydino/full/QWopRMK
An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels. Another very special one.
#SVG #filter #svgFilter#JS #interactive #javascript #code #coding #frontend#CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout
Behind the demo https://mastodon.social/@anatudor/112242678457752295
I wrote a new article for Frontend Masters: Step Gradients with a Given Number of Steps!
Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/
Hope you enjoy, a lot of work went into it.
#CSS#SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient
I wrote a new article for Frontend Masters: Step Gradients with a Given Number of Steps!
Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/
Hope you enjoy, a lot of work went into it.
#CSS#SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient
So what else could we do? Use an SVG filter!✨
Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here https://mastodon.social/@anatudor/114703583973454917 ) that makes it stepped.
Works for all gradient types - see this @codepen demo https://codepen.io/thebabydino/pen/raVrZQN 😼
#cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev #svgFilter #cssVariables
So what else could we do? Use an SVG filter!✨
Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here https://mastodon.social/@anatudor/114703583973454917 ) that makes it stepped.
Works for all gradient types - see this @codepen demo https://codepen.io/thebabydino/pen/raVrZQN 😼
#cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev #svgFilter #cssVariables
