2D & 3D effects and transitions in CSS - Webflow tutorial
HTML-код
- Опубликовано: 6 июн 2024
- On the modern web, 2D and 3D effects can be used seamlessly across multiple design disciplines: web development, interface design, prototyping, and shamelessly drinking a room temperature Red Bull just hours away from a deadline you came up with all on your own. It's okay. Everything's going to be okay.
Because in this lesson, we're going to start with the absolute basics and work our way through everything needed to start building mind-altering and show-stopping effects that add clarity, precision, and nuance to your work. Do effects solve everything and bring peace and meaning to your existence? It's about time we jump in and find out for sure.
We'll cover:
00:00 - Introduction
00:21 - Opacity
00:30 - Cursors
01:28 - Shadows
04:11 - Transitions
07:14 - Filters
09:25 - 2D & 3D transforms
12:17 - Children perspective
15:08 - Self perspective
16:51 - Vlad cameo
16:58 - Rotational parallax & backface visibility
19:00 - Transform origin
20:04 - Recap & conclusion
Learn more: university.webflow.com/lesson...
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
I'm finding it hard to express how informative and hilarious these tutorials are. High-Fives to everyone!
They should have another product and that's video marketing courses
***Calls netflix*** Give these guys a goddamn special of their own RNNN!!!
This rivals the recent kevin hart netflix special
For reaaaal they have one now with headspace for sleeping!!! They should make one with Webflow for Web Dev/ Design!!!
@@SadjaOfficial one with headspace?
The humor in these videos is ... is just ... I cannot contain my laughter. Bravo! Kudos to EVERYONE!
Glad to see the "usual-guy-with-a-dramatic-tone" back :D
They play off each other great.
Have you tried webflow? How is it?
Without a doubt the best training videos I've watched. So clear and concise, whilst staying interesting and with some great humour. Everyone involved in these has absolutely nailed it!
Thinks I watch when I feel low:
- Webflow Tutorials with this guy.
- Foo the Flowerhorn
- Impractical Jokers
- Kinos Journey - The beautiful world.
"Sometimes I'm a curser but I hold back so I don't sound like an a-" these videos are so great 😂
Better than Netflix. University should teach like this! :)
💙
OMG!!!! Vlad is the CEO of Webflow. Nice to see you Vlad Magdalin :)
These tutorials actually brighten up my day
how come these have so few views, the production values of the videos is outstanding
These videos are probably the best content of the whole internet. So glad to have discovered Webflow.
It's crazy how this tool allows you to create amazing web-stuff while actually learning what codes does.
Thank you :)
Best video lessons ever! This should be the way to teach in a school/university. Everything is so well covered without any waste of extra time, and all the little jokes makes you want the lesson to last forever! Hard things becomes easy, and just sticks in your mind. What else? Ah right, no advertising at all! Lessons just goes smooth like a smoothie. Thanks for your work Webflow's team! Much Love from Italy!!
ABSOLUTELY LOVE all of your guys' videos - so well done! I've rarely understood so much, so quickly - testament to your teaching expertise!!
This is the most high quality content I have ever come across
You guys are super awesome. I am a WordPress Developer. But now I think I have to move towards web flow. the way you guys deliver is super cool. Thank you
Just incredible videos, attention-grabbing, funny and incredibly easy to follow, effective tutorials 🙏🏻
Every video I watch, I have something to praise about it. Cinematic & Engrossing Tutorials.
you dont see this type of tutorial everyday, good job!
Thank you guys! Such great tutorials. All stuff I thought I knew but needed this kick to actually understand.
Simply the best videos out there! It has to be scripted it's too seamless not to be ... Love it.
These types of tutorials and at this quality really sell the product, it made it easier to use.
This presenter is an absolute legend. I'd watch a tutorial on literally anything at all if it was presented by him.
Glimour plays well in his role of being naughty, This is the best vids I have ever had, I will be finishing the course in the next one week, Which has saved me 695 bucks. Men I don't know how to express my gratitude 🙌🙌
Thank you so much for these tutorials. Amazing work!
These tutorials are the best tutorial I have ever seen. So informative and extremely funny. I found myself laughing so loud my neighbor 200m away could almost hear me. I think I actually have to see these again. Thank you!
Glad you enjoyed it!
I rarely comment on videos but holy crap you guys have better comedy than Netflix, literally watching this at 1am for the lols (as well as the informative .... information)
😂😂 learning should be fun web flow tuts will keep u in the mood for learning. Web flow team should get an award for this🙏🏾💯
how does this only have 1.4k likes. this is literally a free course to learn EVERYTHING in Webflow
So engaging, really fun to watch you guys. Thanks!
The best thing in my life recently is Webflow!
I am a hardcor e Elementor fanboy.. but Boy you guys make great content! Well made... funny and very informative.. thank you ! Everyone who is working on this should get a Raise !
Great video as usual more in-depth information in the best funniest and easy way to understand... More please
This is amazing... I hope webflow helps designers build more than websites...think bigger... web applications with databases and mobile apps... the possibilities.
Amazing, super clear and valuable videos!
We can learn css with this tutorials. Greit job all guys
Nothing new here for me, but lots of entertainment. Thanks! ❤️
So good, thanks team.
This seems to be a suitable update to the 3D Styles and Effects section of the 'Ultimate Web Design Course' that you guys have.
Very nice to see you again
“It’s really a matter of perspective....Thank you Vlad!” 😹😹😹that was hilarious.
Bravo on the animations!
Yet another amazingly good and fun video. Thanks a bunch!
Glad you enjoyed it!
Annnnnd he’s back! 😁👌❤️
Great video! Unto the next one
8:40 i actually never thought about this! the fact that all filters effect all elements within is a great side note, but this doesn't help answer the question you posed lol
I don't even use Webflow but I really appreciate these videos!
hahaha.. awesome! just love to watch!!
this is an amazing lesson XD
I wish I had seen this course earlier.😂
Best tutorials humanity has to offer - I am inspired! I scoured comments on your prior videos and found that you use Screenflow, Iris, and Quicktime. One thing I cannot figure out is how you zoom into your screen recording and still retain high quality? That is not what happens when I zoom in on my recordings. What is this devilry? I will get smoothies for everyone at your company...oh wow 180+ people...I will spread the word of webflow with the same effort as creating and distributing 180 smoothies to your employees if you tell me
Smoothies first, please.
Amazing tutorial..!
this makes me want to cry, i was about to use blender with my very very limited knowledge in it to make my prints 3d on webflow, thank you thank you
If every tutorial ever made was this hilarious, learning would be tremendously fun.
"it's really a matter of persfective"😂
New transition is called hilarious !
Great 👍Thanks a lot
These guys are hilarious!!!!
I see a new video and click like! ❤️
everyone in this video deserves a promotion after every one of these videos lol
wow this awesome
Nice 👌
Why is 18000ms not the default? In those 36 seconds I gained a new perspective on life.
We've been trying to get this done for years.
seems I'm the only one to think that sometimes they try too hard to be fun... but nonetheless this is absolutely great content.
We'd have to try harder to NOT have fun. 😆 We have a blast making these!
thanks
Does Webflow support the box-sizing property?
"sometimes im a cursor" 🤣🤣🤣
How do you set a 3d transform as an interaction as you can't define an origin there?
Are these template dynamic?
I just realized how ahead the world is...
that other guy cracked me up lol
I have a foto with no Background but I want add to my image some shadow but it appears some Border bahind my image and i can not add shadow because it looks not beautiful I hope you could help me
we need a library with animation presets..
New Webflow video out: *drops everything to watch it, when done, resumes day*
0:30 😂😂😂
Actually i don't know what you guys talking about, but i do enjoyed it🤣
Funniest tutorial I've ever watched.
You remind me so much of Ryan Reynolds. (That's a compliment.)
damn it Stacy
Agreed😅
.
Damn... I just thought i was watching the intro to a Netflix original
What about shadow peaple
Lol mark and u know who u already know
I watched this purely for entertainment, I don't even use webflow
Decreasing the opacity decreases the opacity 😂.
Who needs Comedy Central.
Ok, so basically this is like photoshop for web designers who have limited programming knowledge, why would someone want to use something like this, than traditional JavaScript etc?
good question
Same reason Designers use Photoshop or Sketch instead of doing math in notepad.exe to draw things :)
@@nosekbk ok
Speed and efficiency. Plus, you have immediate visual feedback which makes it really useful.
You just answered your own question... "limited programming knowledge".
How to make something a little boring to get a lot of fun!!!
Why cant teachers be like this
"chRILdren"
grimuuuuuuuuuuuuurrrrrrrrrrrrrrrrrrrrrrr....hahahahahahahahahahahaha.......
lol text thing