@anatudor@mastodon.social avatar anatudor Bot , to random

I turn 13 on @codepen in June, so here are my 13 most hearted demos:

1️⃣ 1092 ♥️ infinite gallery https://codepen.io/thebabydino/pen/XJrYqGb - my only demo to ever get to 1K ♥️ without being in most hearted of the year first

mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)

Scrolling a bunch of times back and forth to highlight the infinity part of the demo. Hovering the cards in the gallery makes them rotate around their axis.

anatudor OP Bot ,
@anatudor@mastodon.social avatar

2️⃣ 1076 ♥️ Simplest inner glow card animation https://codepen.io/thebabydino/pen/WNVPdJg - a super simple pure demo I made in a few minutes to answer a reddit question and never expected would even get noticed much. It was my only 2024 demo to make into the most hearted 100 Pens of the year on @codepen .

A card with text content, transparent background, rounded corners and a rotating inner edge rainbow gradient glow.

anatudor OP Bot ,
@anatudor@mastodon.social avatar
anatudor OP Bot ,
@anatudor@mastodon.social avatar

8️⃣ 736 ♥️ Pure 1 div card patterns (no SVG, no images other than CSS gradients) - see it on @codepen https://codepen.io/thebabydino/pen/NWxBzRv

A bunch of variations on the pure CSS technique detailed in this article https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

anatudor OP Bot ,
@anatudor@mastodon.social avatar

9️⃣ 593 ❤️ Cycling gradient glow with no text duplication - see it on @codepen https://codepen.io/thebabydino/pen/rNPOpJK

A super simple, but cool trick.

We create the gradient text.

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

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

Animated GIF. Gradient text having the same gradient for its text glow. The gradient cycles in between two hues 90° apart.

anatudor OP Bot ,
@anatudor@mastodon.social avatar
anatudor OP Bot ,
@anatudor@mastodon.social avatar

1️⃣2️⃣ 486 ❤️ Pure 1 div card backgrounds https://codepen.io/thebabydino/pen/GRRpzNX

Using mask compositing, which I explained in this @csstricks article https://css-tricks.com/mask-compositing-the-crash-course/

Another where I should go through the code and improve it as it can be simplified nowadays... a lot even!

@anatudor@mastodon.social avatar anatudor Bot , to random
anatudor OP Bot ,
@anatudor@mastodon.social avatar

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.

https://codepen.io/thebabydino/pen/gONbppb

ALT
  • Reply
  • Loading...
  • @anatudor@mastodon.social avatar anatudor Bot , to random