Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Can't believe 3D CSS is having a renaissance 🥲 (Was pretty much my intro to CSS along with animation)

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,462 subscribers

38,123 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

7 Kommentare

Profilbild von Luan Gjokaj
Luan Gjokajvor 2 Jahren

no way this is pure css

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

Aside from the configurator of course 😅 From the archives 🫠

Profilbild von Andrew Bone
Andrew Bonevor 2 Jahren

Next do it as an infinite scrolling animation 😅

Profilbild von Atif Riaz
Atif Riazvor 2 Jahren

This is so good 👍

Profilbild von neil shankar
neil shankarvor 2 Jahren

why use datgui over tweakpane?

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

These are super old demos 😁 Like 5 years ago. Was reminiscing on old Three.js and GSAP stuff and stumbled on this one 🤙

Profilbild von SM Irving
SM Irvingvor 2 Jahren

CSS rules. People really have no idea how much you can do with it.

Ähnliche Videos

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳
1:14

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 Aufrufe • vor 9 Monaten

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

Animation for a Halloween Ghost with CSS and JS 🎃👻
0:24

Animation for a Halloween Ghost with CSS and JS 🎃👻

Viki ✨

337,302 Aufrufe • vor 2 Jahren

I wanted to visualize color spaces so badly that the first version of Hueplot worked simply on divs. I used CSS as a 3D engine, and no canvas or SVG was used Still can't believe it worked, what a dumb idea 😅
0:21

I wanted to visualize color spaces so badly that the first version of Hueplot worked simply on divs. I used CSS as a 3D engine, and no canvas or SVG was used Still can't believe it worked, what a dumb idea 😅

Alexey Ardov

40,819 Aufrufe • vor 9 Monaten

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳
0:27

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

jhey ʕ•ᴥ•ʔ

110,070 Aufrufe • vor 11 Monaten

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇
0:27

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

128,963 Aufrufe • vor 9 Monaten

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS
2:35

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,384 Aufrufe • vor 1 Jahr

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0:34

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

184,850 Aufrufe • vor 10 Monaten

Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇
0:34

Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

129,255 Aufrufe • vor 3 Jahren

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @​keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀
0:38

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @​keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

jhey ʕ•ᴥ•ʔ

239,989 Aufrufe • vor 2 Jahren

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙
0:26

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

jhey ʕ•ᴥ•ʔ

57,993 Aufrufe • vor 1 Jahr

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS
0:23

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

CSS by T. Afif

29,170 Aufrufe • vor 3 Jahren

Having a fun Saturday morning playing with Tailwind CSS v4 Beta 😊 Here are a few cool new things you can do: 🪄 CSS only modals 🎨 Starting style variants 🪟 Perspective transforms
0:33

Having a fun Saturday morning playing with Tailwind CSS v4 Beta 😊 Here are a few cool new things you can do: 🪄 CSS only modals 🎨 Starting style variants 🪟 Perspective transforms

Tony Lea

52,132 Aufrufe • vor 1 Jahr

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! 👇
0:37

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

Sorry, guys from other stacks!!! 🥲 Everything is server-side rendered, high-performing, and written in a few lines of code. It's not a new component. It's just a table, some buttons, and some inputs placed with some CSS utility classes. ✨CSS Zero Datatable✨
0:54

Sorry, guys from other stacks!!! 🥲 Everything is server-side rendered, high-performing, and written in a few lines of code. It's not a new component. It's just a table, some buttons, and some inputs placed with some CSS utility classes. ✨CSS Zero Datatable✨

Lázaro Nixon

10,408 Aufrufe • vor 1 Jahr

Pretty fun seeing how you can combine different CSS tricks with scroll 😁 The basic combination of overflow: hidden and steps() animation timing makes this happen ⭐️
0:23

Pretty fun seeing how you can combine different CSS tricks with scroll 😁 The basic combination of overflow: hidden and steps() animation timing makes this happen ⭐️

jhey ʕ•ᴥ•ʔ

136,499 Aufrufe • vor 2 Jahren

Here is a patch to test CSS grid in React native.
0:25

Here is a patch to test CSS grid in React native.

nishan (o^▽^o)

68,494 Aufrufe • vor 9 Monaten