2021 Interactive Glassmorphism On The Web Tutorial Using Webflow

  Рет қаралды 34,987

Timothy Ricks

Timothy Ricks

Күн бұрын

Пікірлер: 84
@brianhutson2100
@brianhutson2100 4 жыл бұрын
Your videos are gold - Thank you so much for being so willing to help people learn this stuff!
@equatorial3127
@equatorial3127 Жыл бұрын
My man, you have mastered the way of explaining enough of what youre doing without overexplaining every little step. Also thanks for taking the time to place time stamps.
@timothyricks
@timothyricks Жыл бұрын
So glad this helps! Thank you!
@equatorial3127
@equatorial3127 Жыл бұрын
@@timothyricks subbed
@jo69123
@jo69123 Жыл бұрын
Timothy you are the Webflow rockstart man, hope you get awards for your tutorials, they are the best I've seen
@kk-gu1zv
@kk-gu1zv 2 жыл бұрын
Absolutely crazy what you can do with webflow! Im mindblown! Thanks for the tutorial very helpful and inspiring
@danielndrssn
@danielndrssn 4 жыл бұрын
Really took it to a next level there. I've been just using blur and that’s it. Will give this a try
@sincemayiv
@sincemayiv 3 жыл бұрын
you're a webflow wizard ! i'm glad i found this channel
@rhinoreign1324
@rhinoreign1324 3 жыл бұрын
BRO! Your videos are AMAZING! Thank you for always digging deeper into the more crazy aspects of Webflow!
@abirahmed1292
@abirahmed1292 2 жыл бұрын
Timothy, you are awesome, your tutorial is very unique
@Nitro_Foundry
@Nitro_Foundry 3 жыл бұрын
YOU ARE THE GOAT! Thank you so much for this tut. There really should just be a good background blur effect built-in, like XD or Figma. But, our man, good ole' T.Ricks got us covered!
@bruidbarrett
@bruidbarrett 2 жыл бұрын
bro you are an absolute legend!
@MikeBurnsUIUX
@MikeBurnsUIUX 4 жыл бұрын
Besides the amazing tutorial. Your backdrop and vid quality is fire. Love it!
@timothyricks
@timothyricks 4 жыл бұрын
Thanks so much, Mike! Love improving the setup whenever possible
@tamilmadurai4569
@tamilmadurai4569 3 жыл бұрын
How do you make the bubble thingy at 0:21 I really want to know bc I've seen other webflow tutorials have it. Please reply ASAP
@delfs413
@delfs413 4 жыл бұрын
OMG you dont know how much this would help me with my current project and future projects too! Thank you, Timothy!
@timothyricks
@timothyricks 4 жыл бұрын
So happy to hear that!!
@brandonbekker6318
@brandonbekker6318 2 жыл бұрын
Your videos are really well done and super helpful. Thank you so much and pls keep'em coming!
@yosoydavide
@yosoydavide 3 жыл бұрын
This was great, I learned a bunch of stuff and understood a lot more thanks to you explain this one thing. Thank you, mate.
@byinfinita
@byinfinita 3 жыл бұрын
This is awesome! Thank you Timothy!
@mattirwin6089
@mattirwin6089 3 жыл бұрын
Amazing!!! Keep these tutorials coming!
@whoisimane
@whoisimane 3 жыл бұрын
you're a lifesaver
@montrelliondakeyz
@montrelliondakeyz 2 жыл бұрын
Bro please do a breakdown of this whole website. This entire thing is 🔥🔥🔥🔥
@tyson_young
@tyson_young 3 жыл бұрын
Awesome stuff Tim, new sub!
@timothyricks
@timothyricks 3 жыл бұрын
Thanks so much!
@joshwalker7668
@joshwalker7668 3 жыл бұрын
Super cool man!
@jonreesedotcom
@jonreesedotcom 3 жыл бұрын
Amazeballs. Thank you Tim! 🎉
@AndresGutierrez-sz2oc
@AndresGutierrez-sz2oc 3 жыл бұрын
Awesome tutorial!!!
@alexandermikolyk7987
@alexandermikolyk7987 2 жыл бұрын
Thank you) how is the WEBFLOW text animation made TRICKS AND WIZARDRY?
@ByTheSlice
@ByTheSlice 3 жыл бұрын
This is great! Thanks
@jeisongarzon6066
@jeisongarzon6066 3 жыл бұрын
Dude awesome video thanks ! I want to ask you something, did you make your personal web site in Webflow ?
@timothyricks
@timothyricks 3 жыл бұрын
Thanks so much! And yes, I did!
@adepurnama1642
@adepurnama1642 3 жыл бұрын
How much details you want for the glassmorphism card? Ricks: yes
@filipdahlgren6386
@filipdahlgren6386 3 жыл бұрын
Thank you! Subscribed with an instant!
@chakhmanmohamed9436
@chakhmanmohamed9436 3 жыл бұрын
Hello Tim. Please can you tell me how to create the nav links bottom border transitions?
@datdrummachine
@datdrummachine 4 жыл бұрын
Amazing! Thanks man!
@Kabarza
@Kabarza 4 жыл бұрын
Great job. I'm also interested how you made that lottie animation behind the card?
@timothyricks
@timothyricks 4 жыл бұрын
Thank you! It’s just a background video. I got it from iStock and just changed the colors. www.istockphoto.com/video/liquid-shape-in-holographic-colors-with-ripples-and-waves-transforming-in-space-gm1208595456-349398437
@hiredgoons9778
@hiredgoons9778 4 жыл бұрын
How did you read my mind? Was trying to figure this out for my website yesterday. Thank you!
@timothyricks
@timothyricks 4 жыл бұрын
Haha! Glad to have helped
@tomasmrazek7198
@tomasmrazek7198 4 жыл бұрын
Hey Timothy, what is the "" button next to the preview one for? Do you have some beta version of webflow? Thanks.. NIce video as always!
@timothyricks
@timothyricks 4 жыл бұрын
Thank you! That's just a Google Chrome extension for Webflow that makes it easier to add custom code to your project. chrome.google.com/webstore/detail/codemode-for-webflow/mbgenamkihplkffggckaplhnancbojbk?hl=en
@tomasmrazek7198
@tomasmrazek7198 4 жыл бұрын
@@timothyricks Thanks very much!
@juliusfreund4634
@juliusfreund4634 3 жыл бұрын
huh. he just blew my mind.
@-aarohi
@-aarohi 5 ай бұрын
a ball behind card is animated thing or video? plz explain, i want to use it for web development.. actually i am going to make this one web page
@FernWerk
@FernWerk 2 жыл бұрын
It doesn't work for me for some reason. Has the UI changed already maybe? I'm try to do glass morphism around a form block.
@dariakyselyova4282
@dariakyselyova4282 4 ай бұрын
Thank you ✨
@TheWickedFnatic
@TheWickedFnatic 3 жыл бұрын
I can't seem to be able to add this effect inside a drop-down menu on mobile devices. My navbar is blurred, then I have a "services" section, then when clicked, it should open a dropdown menu. I can't get that menu to be blurred as the navbar. Is there any way to get this working? A snip of the code: .nav, .dropdown-bg { backdrop-filter: blur(2em); -webkit-backdrop-filter: blur(2em); }
@lalalotteh
@lalalotteh 3 жыл бұрын
Hey Fabry (or Timothy), have you found the solution? I'm running into this aswell. Seems like it doesn't work on two classes at the same time!
@willangusduncan
@willangusduncan 4 жыл бұрын
Great video, out of interest why do you use em for all your measurements? Does it give more flexibility?
@timothyricks
@timothyricks 4 жыл бұрын
Thank you! Yes, it does. It’s a percentage of the body font size so I can easily switch everything from VW to PX in one click for 2k screens, and also adjust the size of everything really easily on mobile. kzbin.info/www/bejne/bKinZIiia7FmhdE
@willangusduncan
@willangusduncan 4 жыл бұрын
@@timothyricks Thanks that's really useful to know!
@kylenoome4482
@kylenoome4482 4 жыл бұрын
Please can you do a tutorial on that cube nav bar been seeing it a lot on on the forums people seem to be asking to but yet to find a decent answer
@bryanmanio_
@bryanmanio_ 4 жыл бұрын
Oh man, this looks amazing. Are you using a CSS blending mode on that video as well? Curious to how you got it almost looking like it's on a transparent background.
@timothyricks
@timothyricks 4 жыл бұрын
Thank you, Bryan! I tried a CSS blending mode but it washed out the video. I ended up exporting the video with a background close to my site background color. It’s never exact depending on which screen you’re viewing it on, so I had to overlap gradients on all corners of the video to fade the video into the actual background color. Then I also set those colorful gradients to a higher z-index than the video to make the video look more like it didn’t have a background.
@bryanmanio_
@bryanmanio_ 4 жыл бұрын
@@timothyricks Creative solution, nice!
@sonimoretti
@sonimoretti 3 жыл бұрын
WOW!!! thank youuuu 💕
@matheuspires5022
@matheuspires5022 3 жыл бұрын
Amazing content! thanks a lot!
@sanskarsingh4938
@sanskarsingh4938 3 жыл бұрын
Now that we have the blur effect available on Webflow, do we still need to use the custom code shown at the start of the video?
@MubarakMarafa
@MubarakMarafa 4 жыл бұрын
GOLD!!
@IkedaDogbo
@IkedaDogbo 4 жыл бұрын
Yes!
@goldsport
@goldsport 3 жыл бұрын
Awesome tutorial! Do you have a cloneable version somewhere? If we subscribe to your Patreon, do we get it?
@timothyricks
@timothyricks 3 жыл бұрын
Thank you! I have the cloneable available for free at webflow.com/website/TRICKS-Glassmorphism?rfsn=4840096.b820eb&
@Akshat_psd
@Akshat_psd 4 жыл бұрын
So cool thanks! 🔥❤️
@carterjarrett4692
@carterjarrett4692 Жыл бұрын
Hi, really enjoy your channel! Is there a reason you’re using code here for this effect as opposed to the no-code options I’ve seen? Early user so I have no clue why this would be preferred. Appreciate the content!
@timothyricks
@timothyricks Жыл бұрын
Thanks so much! This tutorial was made before the native blend mode option was released. The native option should work fine for this.
@cernunnos189
@cernunnos189 3 жыл бұрын
Yo! Awesome content. How did you make that morphing 3d ball that's behind the card?
@praneshpandi9124
@praneshpandi9124 3 жыл бұрын
YES I NEED TO KNOW HOW TO DO THAT TOO!
@praneshpandi9124
@praneshpandi9124 3 жыл бұрын
Timothy Ricks please reply as fast as you can because ive been wanting the morphing bubble thing for AGES.
@invisiblehandofadamsmith
@invisiblehandofadamsmith Жыл бұрын
Yaaa Man 😀😀
@Jona
@Jona 2 жыл бұрын
dude i opened the video and the card was already there, when other KZbinrs haven't even finished their "please like and su…"
@kitalako7455
@kitalako7455 Жыл бұрын
Oh wow
@EriCreatorr
@EriCreatorr 3 жыл бұрын
Yo timothy your videos are amazing! I wanted to make a checkout procedure with an animated progress bar on top in webflow, do you know how to create that? im exporting the code afterwards and connecting it to my backend ;)
@tomhutcheon8403
@tomhutcheon8403 3 жыл бұрын
Brilliant
@simonloge3013
@simonloge3013 4 жыл бұрын
Wow great
@SayuriYaki
@SayuriYaki 3 жыл бұрын
Unfortunately the glassmorphism effect only works on the paid plan :( thx for the awesome tutorial though.
@JesseMoffett
@JesseMoffett 3 жыл бұрын
So bad ass!
@DavidCBriscoe
@DavidCBriscoe 2 жыл бұрын
Super helpful vid and would be interested to DM you Re a web project?
@derartas
@derartas 3 жыл бұрын
niceee
Building an Interactive SVG Map in Webflow
24:21
Timothy Ricks
Рет қаралды 45 М.
Top Five Interactions Designers Struggle to Create in Webflow
35:07
Timothy Ricks
Рет қаралды 104 М.
So Cute 🥰 who is better?
00:15
dednahype
Рет қаралды 19 МЛН
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН
1% vs 100% #beatbox #tiktok
01:10
BeatboxJCOP
Рет қаралды 67 МЛН
Perfect Page Transitions in Webflow (2021)
8:12
Timothy Ricks
Рет қаралды 81 М.
Anchor Your Footer Down in Webflow
1:41
Timothy Ricks
Рет қаралды 2,5 М.
Create Custom Cursors in Webflow
8:01
Caler Edwards
Рет қаралды 76 М.
Adding Interactive Particles to Your Webflow Site
5:55
Timothy Ricks
Рет қаралды 25 М.
New Responsive Technique for Webflow: Introducing wizardry.
13:50
Timothy Ricks
Рет қаралды 66 М.
Full Section Scroll in Webflow using Scrollify.js
4:44
Robin G.
Рет қаралды 7 М.
Magnetic Custom Cursor in Webflow (Sticks to Buttons)
7:58
Timothy Ricks
Рет қаралды 33 М.
Scroll animation for an AirPods using Spline + Files
7:49
Frame & Flow
Рет қаралды 470
Text Stagger Scroll Animations in Webflow
13:15
Timothy Ricks
Рет қаралды 83 М.
2D & 3D effects and transitions in CSS - Webflow tutorial
21:06
So Cute 🥰 who is better?
00:15
dednahype
Рет қаралды 19 МЛН