Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

CSS Tip! 🤙 You could use CSS :has() to power a context-aware custom cursor experience 👆 :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

146,093 subscribers

261,705 Aufrufe • vor 3 Jahren •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

4 Kommentare

Profilbild von jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔvor 3 Jahren

Here's that @CodePen link! 🚀 You'll need to be in a browser that supports CSS :has() ⚠️ Messing around with ideas for the play button challenge. The cursor is shared between the videos which is neat 😎

Profilbild von Heru Hermawan

Heru Hermawanvor 3 Jahren

@CodePen Great tip. Thanks, jhey!

Profilbild von blank_

blank_vor 3 Jahren

@CodePen How u invent this kind of stuff man

Profilbild von ColdHolder

ColdHoldervor 3 Jahren

@CodePen @SaveToNotion #thread

Ähnliche Videos

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

201,063 Aufrufe • vor 3 Jahren

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

55,548 Aufrufe • vor 3 Jahren

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

489,839 Aufrufe • vor 2 Jahren

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,331 Aufrufe • vor 2 Jahren

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 Aufrufe • vor 2 Jahren

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,809 Aufrufe • vor 2 Jahren

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

146,987 Aufrufe • vor 3 Jahren

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

839,023 Aufrufe • vor 6 Monaten

CSS Tip! 🔮 Use scroll-linked animations to create list animations ✨ li { view-timeline: --i inline; } .card { scale: 0.8; animation-timeline: --i; animation: s; animation-delay:cover 40%; animation-end-delay:cover 60%; } keyframes s { 50% { scale:1; }} CodePen.IO link below!👇

CSS Tip! 🔮 Use scroll-linked animations to create list animations ✨ li { view-timeline: --i inline; } .card { scale: 0.8; animation-timeline: --i; animation: s; animation-delay:cover 40%; animation-end-delay:cover 60%; } keyframes s { 50% { scale:1; }} CodePen.IO link below!👇

jhey ʕ•ᴥ•ʔ

110,212 Aufrufe • vor 3 Jahren

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

215,359 Aufrufe • vor 3 Jahren

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

374,616 Aufrufe • vor 3 Jahren

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) */ --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) / --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

375,402 Aufrufe • vor 2 Jahren

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

532,835 Aufrufe • vor 2 Jahren

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

433,664 Aufrufe • vor 2 Jahren

Pro tip for Cursor Use .cursorrules in your project to get the most optimised code generations with Cursor There's a lot here

Pro tip for Cursor Use .cursorrules in your project to get the most optimised code generations with Cursor There's a lot here

Melvin Vivas

101,039 Aufrufe • vor 1 Jahr

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

jhey ʕ•ᴥ•ʔ

164,666 Aufrufe • vor 1 Jahr

This is the best way to build UI with AI. Use Cursor + V0. With a custom prompt (below), you can easily trigger V0 to create beautiful interfaces for you directly from Cursor Composer. Watch this insane building hack.

This is the best way to build UI with AI. Use Cursor + V0. With a custom prompt (below), you can easily trigger V0 to create beautiful interfaces for you directly from Cursor Composer. Watch this insane building hack.

Mckay Wrigley

692,687 Aufrufe • vor 1 Jahr

This Cursor Extension is awesome Accurate tweaking of UI was always a struggle, But stagewise allows you to bring full context to Cursor, just point and command: 1. Directly choose specific elements in browser 2. Send to Cursor with full context And it's open source

This Cursor Extension is awesome Accurate tweaking of UI was always a struggle, But stagewise allows you to bring full context to Cursor, just point and command: 1. Directly choose specific elements in browser 2. Send to Cursor with full context And it's open source

Jason Zhou

93,273 Aufrufe • vor 1 Jahr

neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀

neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀

jhey ʕ•ᴥ•ʔ

77,988 Aufrufe • vor 1 Jahr

I did it again. I built "Cursor for Research" 🔥 > deep research > context-aware > citations > fast (+ free)

I did it again. I built "Cursor for Research" 🔥 > deep research > context-aware > citations > fast (+ free)

Ray

35,596 Aufrufe • vor 1 Jahr