#tinySVGtip Better gooey effect with no matrix filter!

Each particle can get its own CSS blur filter with a value that may be any unit (SVG doesn't support this).

The assembly containing them gets an SVG filter as below.

Heavily commented on @codepen: https://codepen.io/thebabydino/pen/NWVdKaG

#CSS #SVG #filter #cssFilter #svgFilter #goo #gooey #blob #blobby #blur #alpha #code #coding #frontend #webDev #web #dev #webDevelopment

We have a few years to prepare. We can’t have another #y2k situation.

#programming #coding

7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK

A simple #SVG filter trick.

We create the gradient text.

The filter creates a blurred copy of it and places it underneath.

We then animate the gradient stops... magic! 🪄✨

#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment

6⃣ 688 ❤️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) https://codepen.io/thebabydino/pen/NWxBzRv

A variation on the pure CSS halftone technique https://mastodon.social/@anatudor/112401133442879091

#halftone #pattern #gradient #cssGradient #blendMode #blending #fliter #cssFilter #code #coding #frontend #web #webDev #dev #webDevelopment

5⃣ 723 ❤️ No SVG, no image fluid slider with input[type=range] https://codepen.io/thebabydino/pen/qByGqOm

JS used only for
a) feature support detection
b) updating slider value in a --val

Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler

#css #slider #code #coding #frontend #control #web #webDev #dev #webDevelopment

4⃣ 736 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd

The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/

Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.

#3D #transform #css3D #code #coding #looping #animation #cssAnimation #frontend #web #webDev #dev #webDevelopment

3⃣ 747 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRRRZE

Behind demo https://css-tricks.com/recreating-the-twitter-heart-animation/

Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!

#css #svg #code #coding #frontend #web #webDev #webDevelopment #dev

2⃣ 841 ❤️ neon hex https://codepen.io/thebabydino/pen/zGmdep

Most people know my CSS stuff, but this was my most hearted Pen for some three quarters of a decade... and it's a #canvas one! The JS feels dated nowadays, but oh, well... still my favourite out of this top 3.

#js #javascript #code #coding #frontend #web #dev #webDev #webDevelopment

I turn 12 on @codepen in less than a month, so here are my most hearted demos ever:

1️⃣ 955 ❤️ Pure CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv

My only demo to ever pass 850 ❤️ - a bit mixed about it, it was just an exercise in getting a certain result - please don't use it in the wild!

#css #pureCSS #gravity #button #code #coding #frontend #web #dev #webDevelopment #webDev

8⃣ 496 ❤️ Pure #CSS 3D toggle with only input[type=checkbox] + label https://codepen.io/thebabydino/pen/ajpqYW

(awfully hacky, but cool-looking result... which nowadays I'd probably try to get with an SVG filter 🤔)

#3d #toggle #checkbox #css3D #code #coding #frontend #web #webDev #webDevelopment #dev

Double bubble! 🫧

On scroll text bubble up effect with 1 div, no text duplication, no JS - just a little bit of #CSS trickery and a simple #SVG #filter! 🪄

Live on @codepen
https://codepen.io/thebabydino/pen/NWmBmrZ

#CodePenChallenge #svgFilter #CodePen #text #textEffect #code #coding #frontend #webDev #webDevelopment #web #dev #scrollAnimation

#tinySVGtip How do you create an *inset* shadow on an `img` element?

You might think inset `box-shadow`, but it doesn't work! Really, there are tons of articles & questions on StackOveflow on this very topic.

SVG filters to the rescue for an elegant solution!

✨ offset & blur image
✨ subtract it out of original image alpha ⇒ get black inner shadow
✨ paint it 🍊
✨ place it on top of img

#SVG #filter #inset #shadow #image #svgFilter #code #coding #frontend #webDev #webDevelopment

Here's a starting point for a fediverse StackExchange: Make sure it's interoperable with Lemmy.

Now, you may not get the full feature set on Lemmy, but you should be able to interact with it from Lemmy as if it's a group on there.

#StackExchange #Fediverse #Coding

Mike Conley is a Firefox developer and creator of the long-running video series "The Joy of Coding". You can follow the videos at:

➡️ @mconley@diode.zone

If the videos haven't federated to your server yet, you can browse them all at https://diode.zone/a/mconley/videos

You can also follow Conley's general account at @mconley@mozilla.social

#FeaturedPeerTube #Programming #Coding #Dev #SoftwareDevelopment #Developers #Firefox #Mozilla #PeerTube #PeerTubers

Mike Conley

Diode Zone is a friendly place for original content with a focus on creativity and electronics!

^{Diode Zone}