Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimBilim & TeknolojiSanat
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

David Hill profil fotoğrafı
David Hill1 yıl önce

Clever sausage 🙌🏻

Kian Bazza profil fotoğrafı
Kian Bazza1 yıl önce

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

Patrick ✦ profil fotoğrafı
Patrick ✦1 yıl önce

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

ahmet profil fotoğrafı
ahmet1 yıl önce

hey what software do you use to record your screen?

Chris Lane Jones profil fotoğrafı
Chris Lane Jones1 yıl önce

This is out of this world, for real!

Igor bedesqui profil fotoğrafı
Igor bedesqui1 yıl önce

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

artTILT profil fotoğrafı
artTILT1 yıl önce

These are great. Nice work!

sohey.eth (on farcaster) profil fotoğrafı
sohey.eth (on farcaster)1 yıl önce

Ooft 😮‍💨

Tom Menezes profil fotoğrafı
Tom Menezes1 yıl önce

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

typesafeui 😶‍🌫️ profil fotoğrafı
typesafeui 😶‍🌫️1 yıl önce

🍳

Benzer Videolar

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 görüntüleme • 7 ay önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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

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

ɴᴜᴜɴɢᴜɴɢ456

29,032 görüntüleme • 3 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce