正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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' 🤙

jhey ʕ•ᴥ•ʔ

144,248 subscribers

53,347 次观看 • 1 年前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

10 条评论

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈1 年前

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 🙌

Kyle TechSquidTV 的头像

Kyle TechSquidTV1 年前

Beautiful 👏

Steven 的头像

Steven1 年前

Bro you’re cooking on thanksgiving? Love it

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈1 年前

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

Marlon Stevenson 的头像

Marlon Stevenson1 年前

Really sweet animation. Bookmarked.

Marcos Esqueda 的头像

Marcos Esqueda1 年前

How did you do the grid pattern?

Riaad Arif 的头像

Riaad Arif1 年前

Hats off to you! 🎩

Abolfazl 的头像

Abolfazl1 年前

That's so beautiful bro🤝

Patil Ketan 的头像

Patil Ketan1 年前

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

Matthias Martin 的头像

Matthias Martin1 年前

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

相关视频

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! 👇

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 次观看 • 2 年前

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.

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,357 次观看 • 2 年前

Valid or Invalid? 🤔

Valid or Invalid? 🤔

The Benin Blogger

42,022 次观看 • 1 年前

She has a message for Men 👀 Valid or invalid?

She has a message for Men 👀 Valid or invalid?

GIDI

767,646 次观看 • 1 年前

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

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

Barclays Women's Super League

20,124 次观看 • 6 个月前

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! 👇

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 次观看 • 2 年前

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

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

Ryan Gerritsen🇨🇦🇳🇱

53,031 次观看 • 1 年前

This story is nuts if valid

This story is nuts if valid

NRM84

83,772 次观看 • 1 个月前

🚨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.

🚨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 次观看 • 6 个月前

She has valid points!

She has valid points!

Anticommie

63,297 次观看 • 5 个月前

He has valid points..

He has valid points..

I Meme Therefore I Am 🇺🇸

655,975 次观看 • 1 年前

He has valid points

He has valid points

Anticommie

127,224 次观看 • 5 个月前

He has a valid point

He has a valid point

Washingtons ghost

29,714 次观看 • 5 个月前

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

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

whatever

506,650 次观看 • 1 年前

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”

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 次观看 • 3 个月前

#Helldivers2 | #Helldivers Valid or not Valid crashout?

#Helldivers2 | #Helldivers Valid or not Valid crashout?

Helldivers NOW

217,112 次观看 • 1 年前

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

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

Registered Nurse

12,816 次观看 • 3 天前

Joey has valid boundaries 😤😤

Joey has valid boundaries 😤😤

Ash Lagacy

163,319 次观看 • 4 个月前

She has a valid case. 🤔

She has a valid case. 🤔

A simple man 😎

720,210 次观看 • 1 年前

The man has a valid point.

The man has a valid point.

Shane

23,925 次观看 • 11 个月前