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.

Apple Watch recreated with pure CSS + JS The original was made with WebGL in 2015. DOM + CSS in 2025 Insane work by 池田泰延

Ali Grids

14,125 subscribers

51,999 Aufrufe • vor 2 Monaten •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

🚀 Introducing Panda CSS The modern CSS-in-JS styling engine! Say goodbye to runtime CSS-in-JS 🎨💪✨ 🔸Works with Server Components 🔸Recipes, Variants, and Patterns 🔸Design Tokens Support Works in Next.js, Vue, Qwik, Solid, Astro, and more.

🚀 Introducing Panda CSS The modern CSS-in-JS styling engine! Say goodbye to runtime CSS-in-JS 🎨💪✨ 🔸Works with Server Components 🔸Recipes, Variants, and Patterns 🔸Design Tokens Support Works in Next.js, Vue, Qwik, Solid, Astro, and more.

Sage ⚡️

414,093 Aufrufe • vor 3 Jahren

the team cooked an insane demo on SMFS dot ai just put in the files (made with css and claude!)

the team cooked an insane demo on SMFS dot ai just put in the files (made with css and claude!)

Dhravya Shah

108,154 Aufrufe • vor 3 Monaten

Recreate Github's homepage smooth scroll animation in pure CSS with animation-timeline:

Recreate Github's homepage smooth scroll animation in pure CSS with animation-timeline:

Builder.io

12,078 Aufrufe • vor 1 Jahr

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

jhey ʕ•ᴥ•ʔ

160,641 Aufrufe • vor 3 Jahren

I forgot to mention that every easing can also be used in pure CSS, no JS required, including the spring curves!

I forgot to mention that every easing can also be used in pure CSS, no JS required, including the spring curves!

Julian Garnier

44,253 Aufrufe • vor 10 Monaten

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,591 Aufrufe • vor 1 Jahr

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

AdirCode

66,809 Aufrufe • vor 3 Jahren

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

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

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! ⤷

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! ⤷

Adam Argyle

70,422 Aufrufe • vor 1 Jahr

Prompt: Create a rocket launch animation starting with engine ignition and heavy smoke, followed by a slow liftoff that accelerates, using HTML/CSS/JS in a single HTML file.

Prompt: Create a rocket launch animation starting with engine ignition and heavy smoke, followed by a slow liftoff that accelerates, using HTML/CSS/JS in a single HTML file.

Diego | AI 🚀 - e/acc

212,111 Aufrufe • vor 8 Monaten

Pigment CSS is here! Our new zero-runtime CSS-in-JS library that’s compatible with React Server Components and brings significant performance improvements over other styling engines 🏎️💨 Ready to jump into it? Follow our quick guide:

Pigment CSS is here! Our new zero-runtime CSS-in-JS library that’s compatible with React Server Components and brings significant performance improvements over other styling engines 🏎️💨 Ready to jump into it? Follow our quick guide:

MUI org

30,043 Aufrufe • vor 1 Jahr

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

286,001 Aufrufe • vor 1 Jahr

Claude 3.7 Sonnet is insane... just one prompt, and you get these animated cards in HTML, JS, and CSS. You can try it for free in VSCode using the CodeGPT extension. Sharing the prompt in this thread 👇

Claude 3.7 Sonnet is insane... just one prompt, and you get these animated cards in HTML, JS, and CSS. You can try it for free in VSCode using the CodeGPT extension. Sharing the prompt in this thread 👇

Daniel San

117,724 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

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

🚀 Introducing the new AI Assistance in #ChromeDevTools! Pair program with #GoogleGemini to fix your CSS woes in a flash. Try it out now in Chrome Canary! Even better [1/2] 🧵 #CSS #webdevelopment #AI

🚀 Introducing the new AI Assistance in #ChromeDevTools! Pair program with #GoogleGemini to fix your CSS woes in a flash. Try it out now in Chrome Canary! Even better [1/2] 🧵 #CSS #webdevelopment #AI

Jecelyn Yeen 🐟

13,261 Aufrufe • vor 1 Jahr

I'm in the super early stages of building a full blown tower defense game in js. I'm going use three.js eventually but for now I'm working on the engine logic with a simpler css grid based renderer.

I'm in the super early stages of building a full blown tower defense game in js. I'm going use three.js eventually but for now I'm working on the engine logic with a simpler css grid based renderer.

Steve Gardner

21,652 Aufrufe • vor 2 Jahren

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

46,582 Aufrufe • vor 4 Monaten

Made some edits on the Fractal Glass maker today! 🔨 Ditched the laggy vanilla css solution and replaced it with a webgl shader. Much smoother editing experience and also added 2 new parameters as well (distortion and blur) for more unique compositions.

Made some edits on the Fractal Glass maker today! 🔨 Ditched the laggy vanilla css solution and replaced it with a webgl shader. Much smoother editing experience and also added 2 new parameters as well (distortion and blur) for more unique compositions.

Jim Raptis

56,021 Aufrufe • vor 1 Jahr