Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

use CSS :has() & :user-valid/invalid to power form micro-interactions .group:has(:valid) { --color: var(--valid); } input:user-invalid + .error { display: block; } :user-valid/invalid detects if an input is valid and if it has been interacted with 🔥 no js dirty checkin' 🤙

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

144,248 subscribers

53,347 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

here's the @CodePen link! 🚀 got a request for this in "the other place™" so threw together a new demo now that :user-valid/invalid has good support 🙌

Profilbild von Kyle TechSquidTV
Kyle TechSquidTVvor 1 Jahr

Beautiful 👏

Profilbild von Steven
Stevenvor 1 Jahr

Bro you’re cooking on thanksgiving? Love it

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

not now - i'm waitin' for the cookin' 💀 got the game on, Steam Deck in hand 😇

Profilbild von Marlon Stevenson
Marlon Stevensonvor 1 Jahr

Really sweet animation. Bookmarked.

Profilbild von Marcos Esqueda
Marcos Esquedavor 1 Jahr

How did you do the grid pattern?

Profilbild von Riaad Arif
Riaad Arifvor 1 Jahr

Hats off to you! 🎩

Profilbild von Abolfazl
Abolfazlvor 1 Jahr

That's so beautiful bro🤝

Profilbild von Patil Ketan
Patil Ketanvor 1 Jahr

I love your design I try to make it useing ai but I can’t can you give me any idea ?

Profilbild von Matthias Martin
Matthias Martinvor 1 Jahr

Would be cool to have a CSS only solution for different error messages depending on the input.

Ähnliche Videos

Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇
0:32

Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

283,892 Aufrufe • vor 2 Jahren

Suuuper handy new CSS: :user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with Just landed in Chrome + Safari, been in Firefox for years.
1:19

Suuuper handy new CSS: :user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with Just landed in Chrome + Safari, been in Firefox for years.

Wes Bos

177,362 Aufrufe • vor 2 Jahren

Valid or Invalid? 🤔
1:26

Valid or Invalid? 🤔

The Benin Blogger

42,022 Aufrufe • vor 1 Jahr

She has a message for Men 👀 Valid or invalid?
2:09

She has a message for Men 👀 Valid or invalid?

GIDI

767,915 Aufrufe • vor 1 Jahr

No wrong answers 👀 Valid or Invalid with Alessia Russo ✅❌ #BarclaysWSL Arsenal Women
1:26

No wrong answers 👀 Valid or Invalid with Alessia Russo ✅❌ #BarclaysWSL Arsenal Women

Barclays Women's Super League

20,124 Aufrufe • vor 6 Monaten

CSS Tip! ✨ You can lean into form control state and layered backgrounds to create input status strokes 😎 input:valid { --valid: 1; } input { background: var(--bg) padding-box, ..., var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 / 100% 100% border-box; } The trick is to layer up backgrounds using background-clip to leave a border space 🤏 Applying a transparent border gives you the space for the layered background to transition in 🎞️ Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0. To respect people's animations preferences, we can wrap that transition in a media query 🤙 @​media (prefers-reduced-motion: no-preference) { input { transition: background-position: 0.5s; } } Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too! Hope you find it useful! p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨ CodePen.IO link below! 👇
0:27

CSS Tip! ✨ You can lean into form control state and layered backgrounds to create input status strokes 😎 input:valid { --valid: 1; } input { background: var(--bg) padding-box, ..., var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 / 100% 100% border-box; } The trick is to layer up backgrounds using background-clip to leave a border space 🤏 Applying a transparent border gives you the space for the layered background to transition in 🎞️ Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0. To respect people's animations preferences, we can wrap that transition in a media query 🤙 @​media (prefers-reduced-motion: no-preference) { input { transition: background-position: 0.5s; } } Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too! Hope you find it useful! p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

239,569 Aufrufe • vor 2 Jahren

This gentleman has a valid point & valid question that everyone should be asking all Liberal candidates.
0:27

This gentleman has a valid point & valid question that everyone should be asking all Liberal candidates.

Ryan Gerritsen🇨🇦🇳🇱

53,031 Aufrufe • vor 1 Jahr

This story is nuts if valid
1:52

This story is nuts if valid

NRM84

83,772 Aufrufe • vor 1 Monat

She has valid points!
1:10

She has valid points!

Anticommie

63,297 Aufrufe • vor 5 Monaten

He has valid points..
2:59

He has valid points..

I Meme Therefore I Am 🇺🇸

655,975 Aufrufe • vor 1 Jahr

🚨President Donald J. Trump declares last year's presidential turkey pardons INVALID because Biden used an autopen.😂 Thankfully, he intervened and granted Peach and Blossom a valid pardon to kick off today's ceremony.
1:28

🚨President Donald J. Trump declares last year's presidential turkey pardons INVALID because Biden used an autopen.😂 Thankfully, he intervened and granted Peach and Blossom a valid pardon to kick off today's ceremony.

Daily Wire

32,607 Aufrufe • vor 6 Monaten

He has valid points
0:46

He has valid points

Anticommie

127,224 Aufrufe • vor 5 Monaten

He has a valid point
1:06

He has a valid point

Washingtons ghost

29,714 Aufrufe • vor 5 Monaten

This is women's number 1 fantasy... VALID or NOT VALID?!
0:51

This is women's number 1 fantasy... VALID or NOT VALID?!

whatever

506,650 Aufrufe • vor 1 Jahr

xQc defends VTuber idol concerts “If people enjoy it..go ahead..who I am to say..it’s not anymore invalid or valid than any other concert..every other concert is same, lip sync, faking, whatever..if I were to argue..this is actually more of a performance”
4:08

xQc defends VTuber idol concerts “If people enjoy it..go ahead..who I am to say..it’s not anymore invalid or valid than any other concert..every other concert is same, lip sync, faking, whatever..if I were to argue..this is actually more of a performance”

yeet

1,127,250 Aufrufe • vor 3 Monaten

#Helldivers2 | #Helldivers Valid or not Valid crashout?
0:34

#Helldivers2 | #Helldivers Valid or not Valid crashout?

Helldivers NOW

217,112 Aufrufe • vor 1 Jahr

If the question is about the past - it is always valid!
0:23

If the question is about the past - it is always valid!

Registered Nurse

12,816 Aufrufe • vor 7 Tagen

She has a valid case. 🤔
0:39

She has a valid case. 🤔

A simple man 😎

720,210 Aufrufe • vor 1 Jahr

The man has a valid point.
1:02

The man has a valid point.

Shane

23,925 Aufrufe • vor 11 Monaten

Joey has valid boundaries 😤😤
0:36

Joey has valid boundaries 😤😤

Ash Lagacy

163,319 Aufrufe • vor 4 Monaten