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

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

На главную

🚀 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! 🙌

iamarunabh's profile picture

Arunabh Verma

2,698 subscribers

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

Наука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Arunabh Verma
Arunabh Verma1 год назад

@BriceZele @expo Be sure to check out Nitro Palette 👇

Фото профиля drinksune
drinksune2 лет назад

Absolutely in love with the review from @xzeldawaifux 😍 She’s rocking it in our ambassador program and earning up to 20% commission on every sale! 💰🎉 Wanna join the fun? Sign up for FREE at 🌟 Drop your unique promo code in the comments 📢💫

Фото профиля Arunabh Verma
Arunabh Verma1 год назад

@BriceZele @expo And this cool repo as well 😎

Фото профиля Expo
Expo1 год назад

@endlessFrontend @BriceZele It’s beautiful 🥹

Фото профиля Arunabh Verma
Arunabh Verma1 год назад

@endlessFrontend @BriceZele Thanks a lot! 😊

Фото профиля Towhid Kashem
Towhid Kashem1 год назад

@endlessFrontend @BriceZele @expo I usually use expo linear gradient package with react-native-easing-gradient package to blend images towards the bottom. Going to try the gradient blur method you posted and see how that compares!

Фото профиля Arunabh Verma
Arunabh Verma1 год назад

@endlessFrontend @BriceZele @expo Sure! Do checkout, I just found out about it while I was working and it turns out awesome! 🚀

Фото профиля Jacob C
Jacob C1 год назад

@endlessFrontend @BriceZele @expo Very cool! Looks amazing!

Фото профиля Arunabh Verma
Arunabh Verma1 год назад

@endlessFrontend @BriceZele @expo Glad you think so! ❤️

Фото профиля Sajjad Seyfollah
Sajjad Seyfollah1 год назад

@endlessFrontend @BriceZele @expo Does it work on Android?

Фото профиля Arunabh Verma
Arunabh Verma1 год назад

@endlessFrontend @BriceZele @expo Yes Sajjad!

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

Built this Fuse inspired carousel today 👀 Saw it yesterday and instantly fell for that blur transition between cards 😍 Had to try it out myself 🤞 Shoutout Expo SDK 53 + Software Mansion Reanimated for making it smooth af 💪 Check the vid 👇
0:23

Built this Fuse inspired carousel today 👀 Saw it yesterday and instantly fell for that blur transition between cards 😍 Had to try it out myself 🤞 Shoutout Expo SDK 53 + Software Mansion Reanimated for making it smooth af 💪 Check the vid 👇

Arunabh Verma

41,271 просмотров • 1 год назад

How to blur gradient wallpapers Photoshop tutorial
0:28

How to blur gradient wallpapers Photoshop tutorial

Gravvo

14,071 просмотров • 8 месяцев назад

You want to add blur gradients to your website? I've made an easy-to-use, customizable component for @Framer that you can place over any element to apply a blur gradient to it. Retweet and comment "BLUR" and I'll send it.
0:27

You want to add blur gradients to your website? I've made an easy-to-use, customizable component for @Framer that you can place over any element to apply a blur gradient to it. Retweet and comment "BLUR" and I'll send it.

Framer University

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

GRADIENT Alot of people ask for it so here it is.
0:30

GRADIENT Alot of people ask for it so here it is.

Haku

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

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇
0:37

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

Working on improving the pathing module and implementing some tooling for it. The new gradient fill tool lets you easily generate gradient maps.
0:15

Working on improving the pathing module and implementing some tooling for it. The new gradient fill tool lets you easily generate gradient maps.

poiyomi

12,308 просмотров • 11 месяцев назад

The most intuitive improvement of the early construction version of Samsung One UI 8.5 is the ubiquitous floating button, translucent matte, and gradient blur. Watch the video.
0:27

The most intuitive improvement of the early construction version of Samsung One UI 8.5 is the ubiquitous floating button, translucent matte, and gradient blur. Watch the video.

Ice Universe

106,005 просмотров • 8 месяцев назад

sKiLL ISsUe - but surely there's a better way to do this when getting shot? Tunnel vision but no blur? A gradient of blur increasing towards the edge of the screen? Battlestate Games
1:03

sKiLL ISsUe - but surely there's a better way to do this when getting shot? Tunnel vision but no blur? A gradient of blur increasing towards the edge of the screen? Battlestate Games

ThatFriendlyGuy

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

its your sign to try gradient maps omg you can see the second it saved my life
0:29

its your sign to try gradient maps omg you can see the second it saved my life

nezzu

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

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->
0:33

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

18,141 просмотров • 11 месяцев назад

and for all you dithered gradient lovers, drew this in figma and then dithered it like whoa
0:22

and for all you dithered gradient lovers, drew this in figma and then dithered it like whoa

˗ˏˋ rogie ˎˊ˗

85,065 просмотров • 1 год назад

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 🤙
0:20

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 год назад

The process of making a gradient heart cake is super healing
1:03

The process of making a gradient heart cake is super healing

Scroll Random

7,897,667 просмотров • 10 месяцев назад

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

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

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

ENDLESS

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

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

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 лет назад

How to create this amazing gradient effect in illustrator By shiba_design1
1:03

How to create this amazing gradient effect in illustrator By shiba_design1

Rough Draft ©

119,276 просмотров • 3 месяцев назад

Animate gradient background for your UIs! 💜
0:24

Animate gradient background for your UIs! 💜

Jan Mraz

11,984 просмотров • 1 год назад