Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

quantity picker w/ [type=number] 👨‍🍳 quantity-picker:has(input:invalid):not(:focus-within) { animation: shake; background: hsl(0 100% 50% / 0.14); } aim to guide, not distract, using form control validation css 🤙 (cooler detail is how the num track works though 👀)

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,508 subscribers

46,790 görüntüleme • 8 ay önce •via X (Twitter)

SanatEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }
0:18

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }

jhey ʕ•ᴥ•ʔ

82,458 görüntüleme • 2 yıl önce

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳
0:19

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

jhey ʕ•ᴥ•ʔ

158,295 görüntüleme • 10 ay önce

Created "Solar Eclipse Animation" using HTML and CSS 😍 How is it Guys?
0:12

Created "Solar Eclipse Animation" using HTML and CSS 😍 How is it Guys?

Ali Sufian

77,940 görüntüleme • 3 yıl önce

Made this Responsive Login & Registration Form using HTML and CSS How is it guys?
0:12

Made this Responsive Login & Registration Form using HTML and CSS How is it guys?

Raja Junaid 🚀

129,888 görüntüleme • 3 yıl önce

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }
0:11

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jhey ʕ•ᴥ•ʔ

325,698 görüntüleme • 7 ay önce

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙
0:17

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

jhey ʕ•ᴥ•ʔ

120,951 görüntüleme • 1 yıl önce

Being able to type in the quantity of token I want to buy on is very cool 🧪 Many other DEXes don't have this. But they should!
0:19

Being able to type in the quantity of token I want to buy on is very cool 🧪 Many other DEXes don't have this. But they should!

Rebel Defi

15,040 görüntüleme • 1 yıl önce

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩
0:17

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩

CSS by T. Afif

13,762 görüntüleme • 2 yıl önce

Tip: *only* using CSS you can apply styles to a number input conditionally depending on whether its value is within our out of range 🤯
0:12

Tip: *only* using CSS you can apply styles to a number input conditionally depending on whether its value is within our out of range 🤯

Minko Gechev

108,684 görüntüleme • 3 yıl önce

Tailwind Tweak #6 Learn how to do custom form validation with Tailwind CSS, no JavaScript required. 🪄 Code: Don't forget to follow for daily tweaks!🫶🏻
0:12

Tailwind Tweak #6 Learn how to do custom form validation with Tailwind CSS, no JavaScript required. 🪄 Code: Don't forget to follow for daily tweaks!🫶🏻

Namya @ Supafast

57,321 görüntüleme • 3 yıl önce

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

78,350 görüntüleme • 1 yıl önce

Not the Celine security using a torchlight to distract from the flashes 😭 the amount of cameras flashing is actually crazy
0:16

Not the Celine security using a torchlight to distract from the flashes 😭 the amount of cameras flashing is actually crazy

𝑮 ⁷

73,013 görüntüleme • 2 ay önce

how to distract the enemy spidey (works every time)
0:16

how to distract the enemy spidey (works every time)

DAKO

259,400 görüntüleme • 1 ay önce

BOO 👻 AF1 ‘HALLOWEEN’ 📦 OF1 BOX: Classic Remix 🔬TYPE: Archive #️⃣ QUANTITY: 31 💰PRICE: $19.82
0:10

BOO 👻 AF1 ‘HALLOWEEN’ 📦 OF1 BOX: Classic Remix 🔬TYPE: Archive #️⃣ QUANTITY: 31 💰PRICE: $19.82

.SWOOSH

165,457 görüntüleme • 3 yıl önce

progressive css-only pagination indicators w/ anchor positioning 👨‍🍳 nav::before { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the nav pseudoelements, ::before for intent, ::after for current 🤙
0:16

progressive css-only pagination indicators w/ anchor positioning 👨‍🍳 nav::before { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the nav pseudoelements, ::before for intent, ::after for current 🤙

jhey ʕ•ᴥ•ʔ

192,774 görüntüleme • 10 ay önce