Luke Marks

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Trick ✨

You can create this glitch hover effect by animating pseudoelement content 🎬

button:hover span:after {
animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}

It's a funky little track that allows you to animate text flipping with CSS 🤙

Leaning into custom properties, you can make each flip animation random with inline styles 🎨

<button>
<span
style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
>C</span>
<span
style="--i: 1; --c1: 'ç'; --c2: '&'; --c3: 'π';"
>l</span>
<!-- Other characters -->
<span class="sr-only">Click Me</span>
</button>

You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌

That's all there is to it!

As always, any requests or suggestions, hit me up! 🙏

@CodePen link below! 👇

[Kevin Naughton Jr. @KevinNaughtonJr]

software engineers adding dependencies to their projects

[no context memes @nocontextmemes]

Why’s is always “wyd” and not…. 😭

[Everything Out Of Context @EverythingOOC]

A Happy New Year🎆

[The Muppets @TheMuppets]

There's never a bad time to give some cheeses to those meeces. 🧀

[Out Of Context Snooker @OOCSnooker]

Sorry but this is an absolute joke, how on earth is that going in

[Phil Lord @philiplord]

Very pleased with the orchestra’s attire tonight

[Tailwind CSS @tailwindcss]

@gregwilker How do you change an element's background color on hover with inline styles?

[kevin l. lee @Klee_FilmReview]

Yeah MCU can be hype but... you just had to be there in 2006 to experience this moment.

[Garrett Scott 🕳 @thegarrettscott]

For every 10 likes this gets, I will ask ChatGPT to make this goose a little sillier.

[Programmer Humor @PR0GRAMMERHUM0R]

uAreNotAlone https://t.co/oMJtHE5uNk

[Culture Crave 🍿 @CultureCrave]

Dave Filoni has been promoted to Chief Creative Officer of Lucasfilm

He will work directly with Kathleen Kennedy to oversee all Star Wars projects going forward

(via @VanityFair)

[throwbacks @solelynostalgia]

Zack &amp; cody reserved a table at an italian restaurant 15 years ago and today’s FINALLY the day of their reservation

[Phil Lord @philiplord]

Excited for people to experience the movie this way- @DANIELPEMBERTON ‘s groundbreaking score is one of the best of the year and @MetroBoomin ‘s songs are hit records that brim with emotional depth and musicality. Gonna look and sound incredible in that hall

[Hard Drive @HardDriveMag]

Tom Lets Out Weary Sigh After Walking Into Kitchen and Noticing Cheese Grater Isn’t Part of the Matte Painting https://t.co/221MHp4jIe

[˗ˏˋmewtru´ˎ˗ @trunarla]

Can YOU solve this common frontend developer interview question??? 🧐

[Out of Context Human Race @NoContextHumans]

https://t.co/abn2VhA00A