Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

LukyVJ's profile picture

Luky - A$AP Luky

3,373 subscribers

103,364 Aufrufe • vor 3 Jahren •via X (Twitter)

BildungWissenschaft & Technologie#css#FrontEndDev
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Luky - A$AP Luky
Luky - A$AP Lukyvor 3 Jahren

There's some differences from the original design of @aleksliving but I think I got the overall idea! Thanks for the inspiring tweet buddy 🤝

Profilbild von Felix De Montis 🍀
Felix De Montis 🍀vor 3 Jahren

@CodePen This looks crazy, love it

Profilbild von Luky - A$AP Luky
Luky - A$AP Lukyvor 3 Jahren

@CodePen Thanks Felix 🫶

Profilbild von Maslow
Maslowvor 3 Jahren

@CodePen Damn you good bro. Next level CSS skills 🙏

Profilbild von Luky - A$AP Luky
Luky - A$AP Lukyvor 3 Jahren

@CodePen Haha thanks man, appreciate it, if you dissect the code there’s nothing too complicated, really 😊

Profilbild von tech bloke 
tech bloke vor 3 Jahren

@CodePen @TheVunderkind

Profilbild von Aleks
Aleksvor 3 Jahren

Dude this is awesome! You’re nuts 😍

Profilbild von Luky - A$AP Luky
Luky - A$AP Lukyvor 3 Jahren

Ah! Thanks man, couldn’t get closer to what you designed, really glad you like the result 🙌

Profilbild von マックス👽✨
マックス👽✨vor 3 Jahren

@CodePen I love this!

Profilbild von Luky - A$AP Luky
Luky - A$AP Lukyvor 3 Jahren

@CodePen Thanks man! 🙌

Ähnliche Videos

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

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇
0:20

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Viki ✨

401,492 Aufrufe • vor 2 Jahren

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥
0:27

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

jhey ʕ•ᴥ•ʔ

258,794 Aufrufe • vor 2 Jahren

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇
0:29

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇

Viki ✨

908,892 Aufrufe • vor 2 Jahren

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI
1:00

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Chrome for Developers

219,689 Aufrufe • vor 3 Monaten

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

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

Ali Grids

51,999 Aufrufe • vor 25 Tagen

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,034 Aufrufe • vor 2 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! 👇
0:24

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

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?
0:21

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,689 Aufrufe • vor 3 Jahren

What I coded today as a software engineer! HTML/CSS/JS edition ✨
1:23

What I coded today as a software engineer! HTML/CSS/JS edition ✨

˗ˏˋmewtru´ˎ˗

212,770 Aufrufe • vor 2 Jahren

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇
0:33

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Viki ✨

385,899 Aufrufe • vor 2 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

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

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

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:
1:23

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:

Wes Bos

188,168 Aufrufe • vor 3 Jahren

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap
0:40

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,845 Aufrufe • vor 1 Jahr

Man I love this cool effect with CSS Conic gradients!
3:13

Man I love this cool effect with CSS Conic gradients!

Wes Bos

163,476 Aufrufe • vor 1 Jahr

it's all about easing curves ⏱️ translation powered via CSS custom properties
0:20

it's all about easing curves ⏱️ translation powered via CSS custom properties

jhey ʕ•ᴥ•ʔ

64,278 Aufrufe • vor 1 Jahr

Ark UI is now available in Svelte 5 🔥 ✅ 45+ accessible, unstyled UI components ✅ Works smoothly with Svelte primitives ($effect, _$state, $derived) ✅ Style every component in your way (Panda CSS, Tailwind, CSS Modules) 👉🏽 Check it out here
0:28

Ark UI is now available in Svelte 5 🔥 ✅ 45+ accessible, unstyled UI components ✅ Works smoothly with Svelte primitives ($effect, _$state, $derived) ✅ Style every component in your way (Panda CSS, Tailwind, CSS Modules) 👉🏽 Check it out here

Sage ⚡️

13,189 Aufrufe • vor 1 Jahr

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅
0:46

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

100,075 Aufrufe • vor 1 Jahr