Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 profil fotoğrafı
Kyle TechSquidTV1 yıl önce

Beautiful 👏

Steven profil fotoğrafı
Steven1 yıl önce

Bro you’re cooking on thanksgiving? Love it

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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

Marlon Stevenson profil fotoğrafı
Marlon Stevenson1 yıl önce

Really sweet animation. Bookmarked.

Marcos Esqueda profil fotoğrafı
Marcos Esqueda1 yıl önce

How did you do the grid pattern?

Riaad Arif profil fotoğrafı
Riaad Arif1 yıl önce

Hats off to you! 🎩

Abolfazl profil fotoğrafı
Abolfazl1 yıl önce

That's so beautiful bro🤝

Patil Ketan profil fotoğrafı
Patil Ketan1 yıl önce

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

Matthias Martin profil fotoğrafı
Matthias Martin1 yıl önce

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

Benzer Videolar

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

Valid or Invalid? 🤔
1:26

Valid or Invalid? 🤔

The Benin Blogger

42,022 görüntüleme • 1 yıl önce

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

She has a message for Men 👀 Valid or invalid?

GIDI

767,915 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

This story is nuts if valid
1:52

This story is nuts if valid

NRM84

83,772 görüntüleme • 1 ay önce

She has valid points!
1:10

She has valid points!

Anticommie

63,297 görüntüleme • 5 ay önce

He has valid points..
2:59

He has valid points..

I Meme Therefore I Am 🇺🇸

655,975 görüntüleme • 1 yıl önce

🚨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 görüntüleme • 6 ay önce

He has valid points
0:46

He has valid points

Anticommie

127,224 görüntüleme • 5 ay önce

He has a valid point
1:06

He has a valid point

Washingtons ghost

29,714 görüntüleme • 5 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 3 ay önce

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

#Helldivers2 | #Helldivers Valid or not Valid crashout?

Helldivers NOW

217,112 görüntüleme • 1 yıl önce

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 görüntüleme • 8 gün önce

Joey has valid boundaries 😤😤
0:36

Joey has valid boundaries 😤😤

Ash Lagacy

163,319 görüntüleme • 4 ay önce

She has a valid case. 🤔
0:39

She has a valid case. 🤔

A simple man 😎

720,210 görüntüleme • 1 yıl önce

The man has a valid point.
1:02

The man has a valid point.

Shane

23,925 görüntüleme • 11 ay önce