mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

373K
active users

11! of my demos throughout the first @codepen trending pages!

#SVG#CSS#filter

The first one is this text effect that uses absolutely no images whatsoever save for gradients.

Some filter magic 🪄 is responsible for the background texture and also for the 3D look of the text and its grainy gradients.

codepen.io/thebabydino/pen/gON

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 magic 🪄 slices and offsets it codepen.io/thebabydino/pen/Rwm

The third is something I quickly made to answer a question I saw on reddit reddit.com/r/css/comments/1fwm

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

Slice! is the fourth, one of my faves and also by far my most popular demo I've made this year
codepen.io/thebabydino/pen/GRa

No JS, no text duplication whatsoever, no images save for CSS gradients. SVG filters take care of both the texture and the slice + offset effect.🪄

Also contenteditable.😼

Oh, and the code is heavily commented.

#SVG#filter#CSS

The fifth is a pure text effect.

codepen.io/thebabydino/pen/XWQ

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 🪲 bugzilla.mozilla.org/show_bug.

The sixth is a little pure thing I quickly make in under 10 minutes codepen.io/thebabydino/pen/wvb

I really didn't expect anyone would even notice such a silly simple little thing and then it got hearted over 200 times...

The seventh is a fancy effect you may have seen on some websites: making a section slide horizontally on vertical scroll!

Here with pure 🤯 using scroll-driven animations

codepen.io/thebabydino/pen/WNq

The eighth is this no text duplication blended layers demo codepen.io/thebabydino/pen/abx

Uses gradients and some magic 🪄 to get the effect - can you figure out how before checking it out on @codepen?

@codepen The ninth is a realistic image grainy shadow effect:

codepen.io/thebabydino/pen/OJY

Using a single img element for each. No image duplication in the markup or CSS.

The magic 🪄 is all in a pretty simple .

The tenth is this no text duplication stroke shadow 🌊
codepen.io/thebabydino/pen/mdo

Absolutely no text duplication, not in the markup, not in any pseudo-element content.

The outline shadows are tiled down using an , which is also responsible for the wave 🌊 distortion. 🪄

@anatudor In case I don’t say it enough, love your work :)

@anatudor your version of trivial is actually black magic to me. Can’t even comprehend any of these.