正在加载视频...

视频加载失败

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

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 👀)

jhey ʕ•ᴥ•ʔ

146,508 subscribers

46,790 次观看 • 8 个月前 •via X (Twitter)

艺术教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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; }

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

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

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

jhey ʕ•ᴥ•ʔ

158,295 次观看 • 10 个月前

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

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

Ali Sufian

77,940 次观看 • 3 年前

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

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

Raja Junaid 🚀

129,888 次观看 • 3 年前

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%); }

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

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 🤙

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

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!

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

🎮 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🤩

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

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

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

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!🫶🏻

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

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);

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

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

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

𝑮 ⁷

73,013 次观看 • 2 个月前

how to distract the enemy spidey (works every time)

how to distract the enemy spidey (works every time)

DAKO

259,400 次观看 • 1 个月前

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

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

.SWOOSH

165,457 次观看 • 3 年前

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 🤙

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