@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

1️⃣1️⃣ 501 ❤️ Slice! https://codepen.io/thebabydino/pen/GRaKbZo

Definitely one of my faves I've made on @codepen in 2024.

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

Also contenteditable. 😼

Oh, and the code is heavily commented.

Demo recording. Shows the text "slice" in all caps, split into three by two slightly angled, not quite parallel lines. The top and bottom parts are a dirty, grainy white and are also offset to the left and right respectively. They also cast shadows on top of the middle one, which is a grainy yellowish green. The dark background behind is also grainy. This text is also editable. On hover/ focus, the middle part turns aqua. The recording then shows me changing the text to "mice", taking advantage of the contenteditable feature.

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

The text "Dusty" in thick cursive. Each letter face has a top to bottom grainy gradient from lighter to darker blue. This has a discrete inner shadow and casts a shadow on top of its white outline. The whole thing is extruded, with the extrusion having a grainy mesh gradient. Top to bottom goes from gold to crimson, while also getting progressively darker as it goes further from letter face. The entire extruded assembly casts a diffuse shadow on top of a textured, top middle lighted, 3D striped bluish background.
ALT
  • Reply
    • @anatudor@mastodon.social avatar anatudor Bot , to random

    Simplest circle sector in 4 CSS declarations!

    1⃣ set width to desired diameter
    2⃣ square element with aspect-ratio
    3⃣ turn square into disc
    4⃣ conic-gradient() magic! 🪄

    The start angle and sector angle can also be animated for fun results.

    Because someone asked https://www.reddit.com/r/css/comments/1fvo5dl/comment/lq9mtjj/

    Demo recording. Shows a circle sector rotating around the circle while it grows and shrinks. CSS: @property --start { syntax: '<angle>'; initial-value: 0deg; inherits: false } @property --angle { syntax: '<angle>'; initial-value: 30deg; inherits: false } .my-elem { /* the 4 basic declarations for circle sector */ width: 20em; /* 1 */ aspect-ratio: 1; /* 2 */ border-radius: 50%; /* 3 */ background: /* 4 */ conic-gradient(from var(--start), lime var(--angle), #0006 0%); /* animation! */ animation: start 2s linear infinite, angle 1s ease-in-out infinite alternate } @keyframes start { to { --start: 1turn } } @keyframes angle { to { --angle: 120deg } }