Awesome UI Interactions with the CSS Clip Path Property
Vložit
- čas přidán 10. 07. 2019
- Hey all! Today, we're going to take a close look at the CSS clip-path property. Specifically, we'll take a look at 3 different examples of how to use clip-path to create a micro interaction that reveals a card of information.
Codepen demo:
codepen.io/designcourse/pen/v...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi! - Jak na to + styl
![Is AGI imminent? The test and Kurzweil tell us [EP392] | The AI Guide](http://i.ytimg.com/vi/Q0FexvYfm9s/mqdefault.jpg)
What have you done with clip-path? Show me!
What is your choice, XD, Sketch or Invision. Would love to know your opinion as a designer
Nothing yet
@@mirrorlineentertainments9950 XD or Figma....Invision next....Sketch maybe never
@@thedeveloper4207 Why never?
@@mirrorlineentertainments9950 Tools are just tools. They all work in a similar way. What really matters is how you build your design.
Love the video, pls do more UI interactions and aimations, it's so fun!
I've been doing front end for 15 years and never heard of clip path before.
Never too old to learn!
wow! i've been searching for this so long...thank you sir!
just go straight to 5:45... that's where the clip-path comes in... good vid as always..
The best ever design content I have found on youtube.
The fact that you are making tutorials on responsive css already made me sub😊
Keep up the good work!
DUDE that is so cool! 😱😱 Was watching this while I'm out and about and I can't wait to get to my computer and experiment with that!
It never ceases to amaze me how powerful CSS can be. Setting this up with JS must be a nightmare... As always, great video!
Always wanted to try clip path but never got around to it. Thank you for this , straightforward explanation & inspiring tutorial. ❤️ from 🇿🇼
Love your videos. clean and easy to follow and they are well presented in efficient manner. Also your sound is good which is always appreciated or more unappreciated when sound is bad haha. Cheers
Great info! I'd never used clip path so I'm stoked to experiment
Wow this is effective and easy to use! A lot of video's I can play at 1.5 but your speed is great. Thanks for the tutorial.
Great sir...Thanks am gonna do this tonight till dawn!
😂😂 Till dawn
Thanks a lot sir. I really enjoyed every second of your video. After a lot of googling finally I figured out how to use clip-path
I just learnt a bunch of CSS and VScode tricks. amazing stuff. you earned a new sub!!
Amazing sir, thanks a lot 😊😊🙏
So cool didn't even know this was a thing , so many cool User interactions could be done with this
This is amazing! Please do more animations like this. I want to try making this with click event and add it to a div which already contains a paragraph.
Great video and very good explanations. Cheers!
That was awesome! I really love all these stylish gradients and animations in css. Thanks for the great vid!
You're teaching me things I didn't know I needed, and now I can't live without. Thanks... I think? ;-)
This kinda opened my eyes. Thanks a lot
Use box-sizing: border-box; over width: calc(100% - 2em); This will take padding in to account when calculating widths. You don't want to be duplicating your code. Keep it DRY!
Also no units needed for 0, *rgba(255, 255, 255, 0);* can be *rgba(0, 0, 0, 0);* or simply *opacity: 0;* but don't forget to animate the opacity property in transition.
I always use this at the beginning of every css file:
*{
box-sizing: border-box;
}
@@musthavechannel5262 You're correct with using opacity. But if you use rgba(0,0,0,0) the color would be changing during the .5s transition. So halfway during the transition the text would actually be rgba(127,127,127,0.5). Hardly noticeable that the "i" is gray at half opacity, but it's still an unwanted side effect you'd want to avoid. I'm with you on using opacity though.
Love to see some love for pure Sass/Css animations! You earned a subscribe from me!
Thanks for this cool tips on css. I am looking for applying this to my project!
i really like that circle part. thanks sir
ooohhh that will make my projects look way better! thank you!
Great Tutorial, Very Helpful! Thank you very much!
Good video, like always I learned something new :D
Good series of video i saw in your channel, thanks for all.
Hello Gary. Thanks for the great video.
Thank you sir very much
Your way of teaching is so brilliant by the way
i am hovering many channel videos but most of the video that I like is yours.
How does youtube know what I need to watch suddenly? Thx a lot for this Gary 😄
Wow, excellent video, I liked this effect! Thanks 😄
Amazing, didn't know so much was possible without any real coding like JavaScript or jQuery. Thanks!
Ya css has gotten pretty powerful over the years.
This is the first video I watched about sass and my brain is fried.
If you understand CSS then Sass won't be that hard. It's really useful as it greatly shortens down repetitive code, for example putting classes inside of the container class which would compile it to ".container .class"
There's also functions, variables (which are a thing in CSS now but still) and a bunch more. Quite interesting, W3Schools has a really good tutorial on it if you think it sounds useful
Like always,
amazing video
Lots of cool syntax i didnt know before
Thanks a lot! Easy and awesome! can't wait to put it somewhere :)
Awesome. Just updated a client's website with this little trick. Thanks. :)
Excellent tutorial, thank you!
Pretty cool 🤓 Thanks!
Please, more tutorials like this one!!!
You are hero man 👏🏼
Keep going forward..
Creative As usual . Thanks
Quite an interesting css property
Honestly, KISS principle applies here.....amazing tutorial, thank you...
Thanks again Jeremy Renner!
Thanks for this video, it's so cool!
Thank You Sir!❤
The outro is lit
you made it look super easy 👌🏻
Great tutorial!, thanks for share, greetings from Mexico :)
Omg, thanks alot !!!!!. I learn a lot from your video :333
bro Programming BY TSH This channel is so good bro .....channel name - Programming BY TSH
Crazy man😻. Will try it.
Wow, tks so much, it's great video
this is AWESOME!
Really cool stuff!
Cool video thanks for sharing
Really cool !
really fantastic
Thank you so much!
Awesome brother
bro Programming BY TSH This channel is so good bro .....channel name - Programming BY TSH
With grid you can use place items, which is a combination of both justify and align items
That was brilliant. Concise, with a ton of great techniques. Thanks!
awesome tutorial !
Inspiration! thank you!!
Awesome plan
Thank you Hawk-eye
GREAT VIDEO but i think you should do like a review at the end and explain what's happening because sometimes it can be confusing
Hi ! thanks for your videos :D u can use "place-items: center" instead "justify-items and align-items" or "place-items: start auto" for example if u want to combine both
Hate to be 'that guy', but place-items doesn't work in Edge. : (
thks
I’m a big fan on using radial menus on mobile devices and other software where appropriate but never really thought about using it in a web app; thanks for the great content! Would be interested in seeing how to leverage this technique with something like Angular to manage view click events inside of the expanded radial. Anyway, thanks again
your ui video was awesome
well done
I managed to follow the video really good doing it now as you say it but dude you are so fast the number of times i had to pause was just so much slow-down alil bit
Thank you
Great video,
I really love your videos.
I think we can do this using css border raduis and css transition.
Very helpful 👍👍👍👍
Really awesome
it's look really nice.
Amazing
Gary, you are an awesome dude. So much knowledge & tips on your channel.
Thank you for everything, seriously.
A quick question-
I want to get into graphic design but don't know should I focus just on one thing (logo deisgn or web design for example) or be a ninja master like you?? :) I mean you know EVERYTHING ( logo design, web/UI deisgn, front-end dev)
Specialize or generalize? What is in demand?
Hey you bad guy :D, you made me just stick to Montserrat then you switch it!! Now I'll go this path again with Nunito I think :D
you are the best
Maestro de maestro :D
Hi love css and also u r teaching is awesome .... love you friend please give me more vidoe like this types of ui intraction... :)
very, very cool
THANK YOU 🙏
Love it
Thanks a lot
what a crazy reaction at 06:25 - "what is the fourth one?"
That was amazing. I dont need gsap after watching this!
Thanks Gary
Nice dude
Thank you...so re awesome
@DesignCourse, why would you transition color of the span instead of opacity?
Browsers recalculate a lot of layout information for all CSS properties except for opacity and transform. Those two properties are utilized in the Paint method of a browser so it's FAR less taxing on the computer/mobile device.
Another way to optimzie the transitions/animations of your elements would be to use the 'will-change' property which is supported by most major browsers to tell the browser itself to optimize those transitions. This will ensure a smoother and less taxing UI for computer and mobile users.
Just want to share this for all up-coming developers who want to learn the best practices.
PS: Great tutorial. I love this concept behind this element.
In additon, You should mention that `will-change` shouldn't be overused, and attached possibly just before transition happens, because it forces browser to create new layout layer ;)
I would say, these online web tutors should always mention this as a side note whenever they're animating the properties that are expensive.
The clip-path may be easier to create this effect but not so performant on mobile devices. There should be more tutorials on creating animations like these but by only using transform as much as possible.
I did something like what he showed in the video but using only transform property and it was pretty difficult to achieve compared to the clip-path, height/width method but much more smoother.
When designing or programming, performance is important, but it is also too easy to jump in the rabbit hole of pre-optimization which is bad, because then you're writing code for optimization rather than readability most of the times, and that can hurt maintainability. Build first, optimize later.
I like to think of performance as an accessibility, but don't overdo it. Sometimes it comes with costs too. E.g. the overuse of things like will-change, memoization, etc. can cause a design or an app to become slower over time.
Test different devices and browsers to see if it affects performance, or has different visual artifacts.
If your animations causes performance issues, just remove them. The less animation, the better. They may look fancy, but animations can hurt accessibility if it's overdone, so use it sparingly.
Also opacity and color are different operations. Depending on what you're trying to achieve, you may have to consult to using one or the other. For example can animating opacity cause antialiasing on text to glitch in some browsers and devices such as WebKit/Safari, Opera, etc.
Makes far more sense to use `opacity` or `display: none` over just changing color. What if I want to change the font color to orange? You'll get a weird gradient change from orange to white to transparent by using the color property.
Nunito instead of Montserrat what a crazy man you are !!!
Your intro makes me crazy!!! My brain is just expecting the third circle getting filled - BUT IT DOES NOT HAPPEN!!!!
awesome
nice video. What's the extension for auto open/closing the html tags and writing the class which created the html tag with the class?
Nice metal outro song