Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,819 subscribers

257,886 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & TechnologieKunst
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von David Hill
David Hillvor 1 Jahr

Clever sausage 🙌🏻

Profilbild von Kian Bazza
Kian Bazzavor 1 Jahr

Very cool, haven’t had the chance to work with 3D transforms. But I will find an excuse to do so

Profilbild von Patrick ✦
Patrick ✦vor 1 Jahr

at this point i'm going to have to make my own jhey(dot)edu website

Profilbild von ahmet
ahmetvor 1 Jahr

hey what software do you use to record your screen?

Profilbild von Chris Lane Jones
Chris Lane Jonesvor 1 Jahr

This is out of this world, for real!

Profilbild von Igor bedesqui
Igor bedesquivor 1 Jahr

I love the idea of just using "layer", codifying the layering model and letting the ui style itself, and now I got even another reason to pursue it??? come on jheyyy

Profilbild von artTILT
artTILTvor 1 Jahr

These are great. Nice work!

Profilbild von sohey.eth (on farcaster)
sohey.eth (on farcaster)vor 1 Jahr

Ooft 😮‍💨

Profilbild von Tom Menezes
Tom Menezesvor 1 Jahr

It’s unfortunate that we never actually go back to the bookmarks because this is actually sick

Profilbild von typesafeui 😶‍🌫️
typesafeui 😶‍🌫️vor 1 Jahr

🍳

Ähnliche Videos

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition
0:26

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

jhey ʕ•ᴥ•ʔ

354,982 Aufrufe • vor 7 Monaten

subtle css border pulse effect w/ :active + offset opacity transition 🧑‍🍳 button::after { border: 1px solid #000; opacity: 0; transition: opacity 0.6s 0.1s var(--ease); } button:active::after { opacity: 1; transition-duration: 0s; }
0:20

subtle css border pulse effect w/ :active + offset opacity transition 🧑‍🍳 button::after { border: 1px solid #000; opacity: 0; transition: opacity 0.6s 0.1s var(--ease); } button:active::after { opacity: 1; transition-duration: 0s; }

jhey ʕ•ᴥ•ʔ

44,884 Aufrufe • vor 5 Monaten

Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @​keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan
0:36

Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @​keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan

jhey ʕ•ᴥ•ʔ

222,266 Aufrufe • vor 2 Jahren

dynamic toggle with CSS :has() 🎁 .control:not(:has(:first-of-type:checked)) .indicator { translate: 100% 0; } leverage [type=radio]:checked with :has() to set the visuals 🤙
0:26

dynamic toggle with CSS :has() 🎁 .control:not(:has(:first-of-type:checked)) .indicator { translate: 100% 0; } leverage [type=radio]:checked with :has() to set the visuals 🤙

jhey ʕ•ᴥ•ʔ

194,194 Aufrufe • vor 1 Jahr

image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙
0:25

image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙

jhey ʕ•ᴥ•ʔ

108,894 Aufrufe • vor 1 Jahr

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇
0:25

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

305,162 Aufrufe • vor 6 Monaten

CSS logo marquee 1. bake the offset into your @​keyframes 2. set animation-delay based on duration + item count @​keyframes show { 0%, 73% { translate: -10px 30px; } 76%, 97% { translate: 0 0; } 100% { translate: 10px -30px; } } no need for JavaScript 🤙
0:34

CSS logo marquee 1. bake the offset into your @​keyframes 2. set animation-delay based on duration + item count @​keyframes show { 0%, 73% { translate: -10px 30px; } 76%, 97% { translate: 0 0; } 100% { translate: 10px -30px; } } no need for JavaScript 🤙

jhey ʕ•ᴥ•ʔ

74,729 Aufrufe • vor 1 Jahr

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇
0:39

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,131 Aufrufe • vor 2 Jahren

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙
0:32

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

jhey ʕ•ᴥ•ʔ

27,183 Aufrufe • vor 1 Jahr

Directional aware CSS button :hover w/ lh, text-shadow, and linear() button:has(span:nth-of-type(2):hover) { --y: -1lh; } button span:first-of-type { translate: 0 var(--y); transition: translate .875s var(--spring); text-shadow: 0 1lh currentColor, 0 -1lh currentColor; }
0:27

Directional aware CSS button :hover w/ lh, text-shadow, and linear() button:has(span:nth-of-type(2):hover) { --y: -1lh; } button span:first-of-type { translate: 0 var(--y); transition: translate .875s var(--spring); text-shadow: 0 1lh currentColor, 0 -1lh currentColor; }

jhey ʕ•ᴥ•ʔ

40,229 Aufrufe • vor 1 Jahr

CSS text reveal on scroll 📜 <span style="--start: 210; --end: 280;">details</span> span { animation: reveal; animation-timeline: --section; animation-range: contain calc(var(--start) * 1px) contain calc(var(--end) * 1px); } @​keyframes reveal { 0% { opacity: 0.2; }}
0:37

CSS text reveal on scroll 📜 <span style="--start: 210; --end: 280;">details</span> span { animation: reveal; animation-timeline: --section; animation-range: contain calc(var(--start) * 1px) contain calc(var(--end) * 1px); } @​keyframes reveal { 0% { opacity: 0.2; }}

jhey ʕ•ᴥ•ʔ

164,348 Aufrufe • vor 2 Jahren

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @​keyframes fx { 0% { filter: blur(20px); opacity: 0; }}
0:25

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @​keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

jhey ʕ•ᴥ•ʔ

121,664 Aufrufe • vor 1 Jahr

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇
0:39

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,591 Aufrufe • vor 1 Jahr

DOM magnifier with CSS && SVG 🔍 .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#​magnifier); } Could use it in a [popover] 🤙
0:27

DOM magnifier with CSS && SVG 🔍 .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#​magnifier); } Could use it in a [popover] 🤙

jhey ʕ•ᴥ•ʔ

104,047 Aufrufe • vor 2 Jahren

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥
0:46

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

jhey ʕ•ᴥ•ʔ

114,209 Aufrufe • vor 2 Jahren

img { animation: reveal; animation-timeline: view(); 👈 animation-range: entry 0% entry 150%; 👈 } @​keyframes reveal { 0% { opacity: 0; filter: brightness(2); scale: 0.9; } }
0:32

img { animation: reveal; animation-timeline: view(); 👈 animation-range: entry 0% entry 150%; 👈 } @​keyframes reveal { 0% { opacity: 0; filter: brightness(2); scale: 0.9; } }

jhey ʕ•ᴥ•ʔ

118,119 Aufrufe • vor 2 Jahren

ได้เวลาทำHow toลงสีแบบทับเส้นคับ ส่วนตัวมีสเต็ปตามนี้เลยค่ะ แล้วก็เอาlayerเส้นร่างไว้บนสุดแล้วปรับopacity น้อยๆค่ะ✨
1:04

ได้เวลาทำHow toลงสีแบบทับเส้นคับ ส่วนตัวมีสเต็ปตามนี้เลยค่ะ แล้วก็เอาlayerเส้นร่างไว้บนสุดแล้วปรับopacity น้อยๆค่ะ✨

ɴᴜᴜɴɢᴜɴɢ456

29,032 Aufrufe • vor 3 Jahren

How to create 3D-like clothing with just 3 layers! The texture is clipped to the green mask (mask is 0% opacity) and the line on the edge is clipped to the texture, and glued to the green mask. #Live2D
0:44

How to create 3D-like clothing with just 3 layers! The texture is clipped to the green mask (mask is 0% opacity) and the line on the edge is clipped to the texture, and glued to the green mask. #Live2D

cillia ☆

221,913 Aufrufe • vor 2 Jahren

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨
0:28

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

jhey ʕ•ᴥ•ʔ

154,954 Aufrufe • vor 1 Jahr

One of many new features of the upcoming Ucupaint 2.0 is a dedicated layer opacity slider directly inside the layer list!✨ #b3d #ucupaint
0:40

One of many new features of the upcoming Ucupaint 2.0 is a dedicated layer opacity slider directly inside the layer list!✨ #b3d #ucupaint

Ucupaint 🔶

68,390 Aufrufe • vor 1 Jahr