Загрузка видео...

Не удалось загрузить видео

На главную

😎👋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 просмотров • 3 лет назад •via X (Twitter)

ОбразованиеНаука и технологии#css#FrontEndDev
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Luky - A$AP Luky
Luky - A$AP Luky3 лет назад

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

Фото профиля Felix De Montis 🍀
Felix De Montis 🍀3 лет назад

@CodePen This looks crazy, love it

Фото профиля Luky - A$AP Luky
Luky - A$AP Luky3 лет назад

@CodePen Thanks Felix 🫶

Фото профиля Maslow
Maslow3 лет назад

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

Фото профиля Luky - A$AP Luky
Luky - A$AP Luky3 лет назад

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

Фото профиля tech bloke 
tech bloke 3 лет назад

@CodePen @TheVunderkind

Фото профиля Aleks
Aleks3 лет назад

Dude this is awesome! You’re nuts 😍

Фото профиля Luky - A$AP Luky
Luky - A$AP Luky3 лет назад

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

Фото профиля マックス👽✨
マックス👽✨3 лет назад

@CodePen I love this!

Фото профиля Luky - A$AP Luky
Luky - A$AP Luky3 лет назад

@CodePen Thanks man! 🙌

Похожие видео

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 просмотров • 3 лет назад

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 просмотров • 2 лет назад

"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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 3 месяцев назад

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 просмотров • 23 дней назад

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 просмотров • 3 лет назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 ✅
0:22

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 ʕ•ᴥ•ʔ

285,140 просмотров • 1 год назад