Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

🚀 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 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Arunabh Verma profil fotoğrafı
Arunabh Verma1 yıl önce

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

drinksune profil fotoğrafı
drinksune2 yıl önce

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 profil fotoğrafı
Arunabh Verma1 yıl önce

@BriceZele @expo And this cool repo as well 😎

Expo profil fotoğrafı
Expo1 yıl önce

@endlessFrontend @BriceZele It’s beautiful 🥹

Arunabh Verma profil fotoğrafı
Arunabh Verma1 yıl önce

@endlessFrontend @BriceZele Thanks a lot! 😊

Towhid Kashem profil fotoğrafı
Towhid Kashem1 yıl önce

@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 profil fotoğrafı
Arunabh Verma1 yıl önce

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

Jacob C profil fotoğrafı
Jacob C1 yıl önce

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

Arunabh Verma profil fotoğrafı
Arunabh Verma1 yıl önce

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

Sajjad Seyfollah profil fotoğrafı
Sajjad Seyfollah1 yıl önce

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

Arunabh Verma profil fotoğrafı
Arunabh Verma1 yıl önce

@endlessFrontend @BriceZele @expo Yes Sajjad!

Benzer Videolar

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 görüntüleme • 1 yıl önce

How to blur gradient wallpapers Photoshop tutorial
0:28

How to blur gradient wallpapers Photoshop tutorial

Gravvo

14,071 görüntüleme • 8 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 11 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 11 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 3 yıl önce

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

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

ENDLESS

23,198 görüntüleme • 4 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 3 ay önce

Animate gradient background for your UIs! 💜
0:24

Animate gradient background for your UIs! 💜

Jan Mraz

11,984 görüntüleme • 1 yıl önce