Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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,011 subscribers

46,557 Aufrufe • vor 5 Monaten •via X (Twitter)

KunstBildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Clean coal , The focus is on high quality, not quantity. #MabMining
0:15

Clean coal , The focus is on high quality, not quantity. #MabMining

Matsapa-A-Botshelo(MAB)

10,625 Aufrufe • vor 2 Jahren

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,376 Aufrufe • vor 2 Jahren

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 ʕ•ᴥ•ʔ

139,739 Aufrufe • vor 7 Monaten

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 ʕ•ᴥ•ʔ

301,270 Aufrufe • vor 4 Monaten

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,663 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

How to get fixed background - CSS
0:11

How to get fixed background - CSS

Ali Reza

11,389 Aufrufe • vor 1 Jahr

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,314 Aufrufe • vor 3 Jahren

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 ʕ•ᴥ•ʔ

77,042 Aufrufe • vor 1 Jahr

No Air Defence is fool proof. Quantity matters.
0:08

No Air Defence is fool proof. Quantity matters.

Defence Matrix

54,328 Aufrufe • vor 11 Monaten

This is how prasadam is distributed to devotees in Chidambaram Nataraja Temple managed by Dikshitars. Why is HRCE "selling " prasadam in the 1st place that too such small quantity ?
0:17

This is how prasadam is distributed to devotees in Chidambaram Nataraja Temple managed by Dikshitars. Why is HRCE "selling " prasadam in the 1st place that too such small quantity ?

krithika sivaswamy

210,712 Aufrufe • vor 14 Tagen

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,016 Aufrufe • vor 7 Monaten

Quality over quantity
0:17

Sensitive content

Quality over quantity

STREET FIGHT HARD 🥊🔞

205,869 Aufrufe • vor 3 Monaten

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,534 Aufrufe • vor 1 Jahr

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,769 Aufrufe • vor 8 Monaten

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`
0:15

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`

Adam Argyle

34,575 Aufrufe • vor 1 Jahr

Quality > quantity 🤭
0:01

Quality > quantity 🤭

Nonobanks ❤️

45,291 Aufrufe • vor 1 Jahr

The aim is not to sweat 💦😅
0:12

The aim is not to sweat 💦😅

BM@Bongi

55,217 Aufrufe • vor 17 Tagen