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

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

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

Animate gradient background for your UIs! 💜

Jan Mraz

108,617 subscribers

11,984 просмотров • 1 год назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Jan Mraz

Jan Mraz1 год назад

Ready to become a professional UX/UI designer? Check out my courses on the link on my profile, now available with huge discounts! 🚀

Фото профиля RedDeer.Games

RedDeer.Games4 лет назад

Customise the colours yourself or simply connect the Joy-Cons ! Head to ➡️ for more details about #AAAClock ! #indiedev #indiegame #IndieGameDev #nintendo #OLED #switchOLED

Фото профиля OGviews

OGviews1 год назад

@Ojieditor_UI

Фото профиля Teso's Finest

Teso's Finest1 год назад

@khaalid__UG

Фото профиля Jarar Malik | UX Designer

Jarar Malik | UX Designer1 год назад

Thanks for highlighting that plugin my guy, will definitely be using it in the future!

Фото профиля Subarno Paul

Subarno Paul1 год назад

Thanks for sharing

Фото профиля Nasir Uddin

Nasir Uddin1 год назад

Animated gradients add life to any UI! Love this.

Фото профиля Fahad ibn Sayed

Fahad ibn Sayed1 год назад

Small details, big impact!

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

CSS placeholder shimmer ✨ - overlay a placeholder element – show when :placeholder-shown – use mask for the border – background-clip for the text - animate the gradient position love playin' with these 🧑‍🍳

CSS placeholder shimmer ✨ - overlay a placeholder element – show when :placeholder-shown – use mask for the border – background-clip for the text - animate the gradient position love playin' with these 🧑‍🍳

jhey ʕ•ᴥ•ʔ

46,356 просмотров • 1 год назад

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

258,625 просмотров • 2 лет назад

rainbow button w/ CSS animation-composition + hue interpolation 🌈 you can create a rainbow gradient as easy as: linear-gradient(in lch longer hue, red 0 0) animate the background-position but speed it up on :hover by using animation-composition: add 🤙

rainbow button w/ CSS animation-composition + hue interpolation 🌈 you can create a rainbow gradient as easy as: linear-gradient(in lch longer hue, red 0 0) animate the background-position but speed it up on :hover by using animation-composition: add 🤙

jhey ʕ•ᴥ•ʔ

98,225 просмотров • 1 год назад

Create this gradient background❄️. In under-1min⏰.

Create this gradient background❄️. In under-1min⏰.

ENDLESS

23,198 просмотров • 4 месяцев назад

UI/UX Designers, you can now create unlimited animated gradient videos without paying a single cent. I just found this website called Krumzi, a simple but powerful animated background generator that lets you create smooth, eye-catching gradient videos for free. Perfect for landing pages and hero sections. Can’t believe it’s free; bookmark it for later. 💜

UI/UX Designers, you can now create unlimited animated gradient videos without paying a single cent. I just found this website called Krumzi, a simple but powerful animated background generator that lets you create smooth, eye-catching gradient videos for free. Perfect for landing pages and hero sections. Can’t believe it’s free; bookmark it for later. 💜

Abraham John 🦄🦓

40,240 просмотров • 5 месяцев назад

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,112 просмотров • 2 лет назад

🚀 Just built this cool carousel! - Background gradient by DevL∞p's Nitro Palette - Gradient blur inspired by Brice Zele's React Native Gradient Blur And yes, Expo is the backbone making it all possible Had to try it out. Here it is! 🙌

🚀 Just built this cool carousel! - Background gradient by DevL∞p's Nitro Palette - Gradient blur inspired by Brice Zele's React Native Gradient Blur And yes, Expo is the backbone making it all possible Had to try it out. Here it is! 🙌

Arunabh Verma

13,326 просмотров • 1 год назад

Do this now to be eligible for Gradient allocation. Drop your gradient invite link in the comment. Retweet so your friends can be aware of this update. Start Here:

Do this now to be eligible for Gradient allocation. Drop your gradient invite link in the comment. Retweet so your friends can be aware of this update. Start Here:

Marjid Cryptonite

156,995 просмотров • 1 год назад

*.･ﾟ✧ vtuber background illustration ✧･ﾟ.* 💜 for secret and dear client 😈

.･ﾟ✧ vtuber background illustration ✧･ﾟ. 💜 for secret and dear client 😈

ame

47,106 просмотров • 1 год назад

Stop guessing your gradient colors

Stop guessing your gradient colors

Zander Whitehurst

126,237 просмотров • 4 месяцев назад

AND LAST BUT NOT LEAST…LUMITY!! 💚💜 THANK U ALL SO MUCH FOR YOUR SHIP SUGGESTIONS 😭💝❤️ THEYVE BEEN A BLAST TO ANIMATE 🥺 #TheOwlHouse

AND LAST BUT NOT LEAST…LUMITY!! 💚💜 THANK U ALL SO MUCH FOR YOUR SHIP SUGGESTIONS 😭💝❤️ THEYVE BEEN A BLAST TO ANIMATE 🥺 #TheOwlHouse

💫 SpacePancakes 🥞

453,104 просмотров • 1 год назад

Once you try Framer shaders, flat backgrounds feel illegal 😂 Built this Pet Avatar hero with 3 of them: 1. Holo for Background 2. Liquid gradient for Text 3. Chromatic Aberration for Button

Tran Mau Tri Tam ✪

50,626 просмотров • 2 месяцев назад

Quick tip for my graphic designers, In Ps, drop in your photo. Filter ➔ Camera Raw Filter. (Color) -100 Saturation. (Effects) Clarity +40, Texture +55. Gradient map— choose a color. Click the gradient layer mask. Select, Color Range, and click around. Gradient Mesh.

Quick tip for my graphic designers, In Ps, drop in your photo. Filter ➔ Camera Raw Filter. (Color) -100 Saturation. (Effects) Clarity +40, Texture +55. Gradient map— choose a color. Click the gradient layer mask. Select, Color Range, and click around. Gradient Mesh.

Seso

159,083 просмотров • 2 лет назад

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

646,445 просмотров • 2 лет назад

Calf - Adaptive UIs for Compose Multiplatform apps (

Calf - Adaptive UIs for Compose Multiplatform apps (

Android Dev Notes

23,406 просмотров • 2 лет назад

Perfect gradient for drainage

Perfect gradient for drainage

Science girl

19,838,695 просмотров • 2 лет назад

We've been cooking design system import for . No more Frankenstein UIs. Your Lovable projects can soon stay consistent—forever.

We've been cooking design system import for . No more Frankenstein UIs. Your Lovable projects can soon stay consistent—forever.

damien

21,342 просмотров • 9 месяцев назад