jhey โ–ฒ๐Ÿป๐ŸŽˆ Profile picture
Jul 18, 2022 โ€ข 6 tweets โ€ข 3 min read โ€ข Read on X
Future CSS Tip! ๐Ÿ”ฎ

Use :has() to power <form> micro-interactions and theme ๐Ÿ˜Ž No JavaScript. Animations powered by <input> state ๐Ÿš€

.group:has(:invalid) {
animation: shake 0.5s;
}

form:has(.email:valid):has(.password:valid) .submit {
--color: green;
}

Demo link below ๐Ÿ‘‡
Here's that @CodePen link! โœจ

๐Ÿ”Ž :has is landing in Chrome 105 and is already in Safari as of version 15.4 ๐Ÿ™Œ

Have you tried CSS :has() yet? What could you use it for?

๐Ÿ‘‰ codepen.io/jh3y/pen/yLKMOโ€ฆ via @CodePen
p.s As pointed out you could also do a much simpler

form:valid [type="submit"] { ... }

But, I've been wanting to find examples where I can show chaining :has() ๐Ÿ”—

If you have any cool scenarios for it, I'd love to hear them!
How do the letters twirl?

Each letter is a span inside the label with an inline custom property used for animation delay โœจ

<label>
<span style="--index: 1">E</span>
...
</label>

Then use :has ๐Ÿš€

.group:has(:valid) span {
animation: twirl 1s calc(var(--index) * 0.1s);
}
Did a little revisit to show how you could show and hide error messages with only CSS too โœจ

CSS :has is real exciting ๐Ÿ˜ Can't wait for this one to land in all the browsers ๐Ÿคž

How can you keep the <label> accessible whilst splitting the letters? ๐Ÿค”

Hide the letters from the "Accessibility Tree" and create a new visually hidden <span> that contains the label text ๐Ÿ˜Ž

We can use CSS to hide it but without using "display: none" so it's picked up! <label for="email"...

โ€ข โ€ข โ€ข

Missing some Tweet in this thread? You can try to force a refresh
ใ€€

Keep Current with jhey โ–ฒ๐Ÿป๐ŸŽˆ

jhey โ–ฒ๐Ÿป๐ŸŽˆ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @jh3yy

Sep 13, 2023
Future CSS Tip! ๐Ÿ

You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript ๐Ÿ‘€ (Sticking to the #AppleEvent theme)

.cta {
animation: activate both, activate reverse;
animation-timeline: --section, view();
animation-range: entry, cover 50%;
}

keyframes activate {
0% { --active: 0; }
100% { --active: 1; }
}

@ container style(--active: 1) {
.cta__bloom {
scale: 0.99;
transition: scale 0.5s var(--back); /* ๐Ÿ‘ˆ linear() */
}
.cta a {
scale: 1;
grid-template-columns: var(--content-size, auto) 36px;
transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic);
}
}

There's a fair bit of code here ๐Ÿคฏ

But, the idea is this...

1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0.
2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay.
3. Make use of linear() easing to get the right effect โšก๏ธ

It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up ๐Ÿ’ฏ These are powerful combinations for sure though! ๐Ÿ’ช

@CodePen link below! ๐Ÿ‘‡
Here's that @CodePen link! ๐Ÿš€

You'll need to be in Chrome 115+ to see everything working as it should ๐Ÿคž

We're combining:
โ€“ Scroll-driven animation
โ€“ linear() easing
โ€“ Container style queries

codepen.io/jh3y/pen/zYyzYโ€ฆ
@CodePen Missed the details around linear() easing functions?

Here's the post I made about them ๐Ÿ˜‰

The @smashingmag article should be landing this week I think ๐Ÿค”

Read 5 tweets
Aug 23, 2023
CSS Tip! โœจ

You can create icon sprite animations using the steps() animation-timing function ๐Ÿค™

You could use this to create little icon button animations, etc. ๐Ÿ˜Ž

But how do you do it? Like this ๐Ÿ‘‡

button img {
object-fit: cover;
object-position: 0 0;
}

The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this:

[aria-pressed=true] img {
animation: play 0.5s steps(20) forwards;
}

@ keyframes play {
to {
object-position: 100% 0;
}
}

We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite ๐ŸŽ‰

Check out the video that breaks things down a little bit

@CodePen link blow! ๐Ÿ‘‡

Here's that @CodePen link! ๐Ÿš€

This was a bunch of fun to make. In fact, the hardest part was making the sprite ๐Ÿ˜‚

codepen.io/jh3y/pen/KKbpeโ€ฆ
Arguably one of the coolest parts about this sprite animation is using a CSS filter to change the color ๐Ÿ˜Ž

This is how the animation looks from the demo and we combine scale and filter to change the color and bump the icon size without editing the SVG itself ๐Ÿค“

@ keyframes sprite-play {
75% {
scale: 1.25;
}
100% {
opacity: 1;
filter:
invert(0.4)
sepia(1)
saturate(20)
hue-rotate(140deg)
brightness(1);
object-position: 100% 0;
}
}

@cassiecodes covers this technique really well in this @css article ๐Ÿ‘‡

Read 4 tweets
Feb 28, 2023
Have you tried out the View Transitions API? โœจ

Been playing have a play with it this evening ๐Ÿ‘€

A bit of JavaScript Web Animations API usage for those rainbow lines but sets me up for another demo idea! ๐Ÿ’ก

Repo && deets ๐Ÿ‘‡
The View Transitions API is gonna be a game-changer for the flexible ways in which you can use it with UI ๐Ÿ’ฏ

For a guide to the API, @jaffathecake has you covered ๐Ÿ‘‡

developer.chrome.com/docs/web-platfโ€ฆ
I've put together a little Astro project for some of the experiments I put together with the API ๐Ÿค“

I'll get around to making some more UI things with it. I keep meaning to write up this card shuffling demo from last year ๐Ÿ˜…

๐Ÿ‘‰ github.com/jh3y/view-tranโ€ฆ

Read 4 tweets
Nov 11, 2022
CSS Tip! ๐Ÿš€

Use custom properties to power parallax effects ๐Ÿ˜Ž

Use JavaScript to pass the pointer position to CSS. Let CSS handle the rest, moving things at different rates ๐Ÿ’ช

card:hover{
rotate: calc(var(--ratio-y) * 50deg);
}

Play with card effects โœจ

Demo link below! ๐Ÿ‘‡
Here's that @CodePen link! โšก๏ธ

It's kinda hard to explain everything going on here in one tweet ๐Ÿ˜…

The magic part is how you can use JS to work out something for you and then let CSS do the rest, you're decoupling them in a way.

Let's go over it ๐Ÿ‘‡

codepen.io/jh3y/pen/wvXvEโ€ฆ
First, the JavaScript ๐Ÿ‘€

It's this. Grab the pointer position, and work out the ratio that the cursor position is in relation to the card size. It's gonna be between 0 and 1 ๐Ÿค™

Next up, CSS ๐Ÿ‘‡ const CARD = document.querySelector('.card')  const UPDATE =
Read 5 tweets
Oct 6, 2022
CSS Tip! โœจ

You could use :has() combined with sibling combinators and other things to build a working 3D CSS Connect 4 ๐Ÿค“

.col:has([row=p-1]:checked) +
...
.col:has([row=p-1]:checked) ~ .result {
--win: 1; --winner: var(--p);
}

Demo link below! ๐Ÿ‘‡
Here's that @CodePen link! ๐Ÿš€

The performance of CSS :has() is pretty incredible. There's another demo I'll share where it does some pretty "extra" stuff and it handles it like a champ ๐Ÿ’ช

codepen.io/jh3y/pen/Jjvapโ€ฆ
The amazing thing about building things like this is that it challenges the way we think about using certain tools. This is one of the points I made in my talk today at @webdevconf ๐Ÿ’œ

pic: @JoshTumath Jhey on stage at WDC presenting his talk. The stage screen s
Read 4 tweets
Oct 5, 2022
Wild to think how close we are to almost being able to build this with CSS alone ๐Ÿคฏ

This is a version I built with JavaScript using GSAP โœจ

It does have perks like infinite smooth scroll ๐Ÿ‘€

But, think I'll try building a CSS version without ๐Ÿค“

Demo link for this one below! ๐Ÿ‘‡
Here's that @CodePen link! ๐Ÿš€

You can spin that mouse wheel to your heart's content on this and it'll keep going ๐Ÿ˜…

codepen.io/jh3y/pen/WNRvqโ€ฆ
Here's the accompanying @css article too! ๐Ÿค“

Learned a whole bunch from the peeps over at @greensock when making this ๐Ÿ™ Really made me think differently about how I approach some animations

css-tricks.com/going-meta-gsaโ€ฆ
Read 5 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(