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.
@@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.
@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.
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
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
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
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.
This is impractical unless the container DIV has an absolute position with the z-index of zero and then on the span:hover event get changed to the largest z-index. So there is a need for a little javascript after all.
¯\_(ツ)_/¯ From what was used here, it works on every major browser. Did it on safari which is the only one that even looked questionable (besides internet explorer which doesn't support anything) with the lack of support for animations.
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
Hey Gary I was wondering: why do you make multiple rulesets of the kind "&:hover ***" ? I usually do it that way: .container { .a {...} .b {...} ... &:hover { .a {...} .b {...} ... } } Is there a particular reason why you do it the way you do it?
Super cool but I feel this design is really brittle with "magic-numbers" like 4% moving things into place and centering just-so. "There has to be a better way..." - Not that being truly responsive is an issue (you can't hover with touch-interface), but changing fonts or sizes will kill this layout. Also, wouldn't it be more performant to only change the opacity and not the color transition on the "i" ?
Agreed, this isn't very responsive. Also regarding performance; Don't pre-optimizing for something until it becomes a problem. Test across devices. That said, the way that color, opacity and transform are animated using transition are very performant, compared to layout such as positions (top, left, bottom, right) and box model stuff like margins, paddings, borders, width and heights, etc. Regarding using opacity vs color for transitions and animations, there are differences but they mostly depend on your needs. Opacity is applied to the whole element, rather than individual font, background and border color. It may cause problems with antialiasing for text if you're using opacity instead of rgba/hsla for example (depends on browser and device). There are some great explanations for why this happens that you can find in the wild.
@@dealloc And imagine all the extra work Sass would make when you try to make changes to something like this in the future? To the authors credit, he wasn't making a website really, just teaching us about a specific subject.
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
Hello, so I am having a problem when using clip path and I have no clue if there is a solution. Apparently I cannot use overflow auto because clip path makes it by default overflow hidden. This is an issue more in iOS safari Can anyone please help me?
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?
![ROSÉ (로제) - number one girl [더 시즌즈-이영지의 레인보우] | KBS 241129 방송](http://i.ytimg.com/vi/A9oByH9Ci24/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.
I've been doing front end for 15 years and never heard of clip path before.
Never too old to learn!
Love the video, pls do more UI interactions and aimations, it's so fun!
It never ceases to amaze me how powerful CSS can be. Setting this up with JS must be a nightmare... As always, great video!
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.
just go straight to 5:45... that's where the clip-path comes in... good vid as always..
wow! i've been searching for this so long...thank you sir!
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!
@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.
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.
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
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 just learnt a bunch of CSS and VScode tricks. amazing stuff. you earned a new sub!!
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
How does youtube know what I need to watch suddenly? Thx a lot for this Gary 😄
Great sir...Thanks am gonna do this tonight till dawn!
😂😂 Till dawn
Love to see some love for pure Sass/Css animations! You earned a subscribe from me!
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
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.
Honestly, KISS principle applies here.....amazing tutorial, thank you...
Always wanted to try clip path but never got around to it. Thank you for this , straightforward explanation & inspiring tutorial. ❤️ from 🇿🇼
i really like that circle part. thanks sir
With grid you can use place items, which is a combination of both justify and align items
ooohhh that will make my projects look way better! thank you!
So cool didn't even know this was a thing , so many cool User interactions could be done with this
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.
Lots of cool syntax i didnt know before
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!
You're teaching me things I didn't know I needed, and now I can't live without. Thanks... I think? ;-)
Thanks again Jeremy Renner!
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!
Good series of video i saw in your channel, thanks for all.
This is impractical unless the container DIV has an absolute position with the z-index of zero and then on the span:hover event get changed to the largest z-index. So there is a need for a little javascript after all.
That was awesome! I really love all these stylish gradients and animations in css. Thanks for the great vid!
Great info! I'd never used clip path so I'm stoked to experiment
This kinda opened my eyes. Thanks a lot
Awesome. Just updated a client's website with this little trick. Thanks. :)
what a crazy reaction at 06:25 - "what is the fourth one?"
Quite an interesting css property
The outro is lit
Please, more tutorials like this one!!!
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
Your intro makes me crazy!!! My brain is just expecting the third circle getting filled - BUT IT DOES NOT HAPPEN!!!!
Wow, excellent video, I liked this effect! Thanks 😄
After looking at the Browser compatibility of clip-path, I would currently not use it.
¯\_(ツ)_/¯ From what was used here, it works on every major browser. Did it on safari which is the only one that even looked questionable (besides internet explorer which doesn't support anything) with the lack of support for animations.
Good video, like always I learned something new :D
Thanks for this cool tips on css. I am looking for applying this to my project!
Hello Gary. Thanks for the great video.
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
Hey Gary I was wondering: why do you make multiple rulesets of the kind "&:hover ***" ? I usually do it that way:
.container {
.a {...}
.b {...}
...
&:hover {
.a {...}
.b {...}
...
}
}
Is there a particular reason why you do it the way you do it?
Obligatory not Gary, but reason is - rule locality, if you have lots of selectors it comes handy to have regular/hover styles nearby.
You are hero man 👏🏼
Keep going forward..
Like always,
amazing video
Excellent tutorial, thank you!
Thank you Hawk-eye
Nunito instead of Montserrat what a crazy man you are !!!
Super cool but I feel this design is really brittle with "magic-numbers" like 4% moving things into place and centering just-so. "There has to be a better way..." - Not that being truly responsive is an issue (you can't hover with touch-interface), but changing fonts or sizes will kill this layout.
Also, wouldn't it be more performant to only change the opacity and not the color transition on the "i" ?
Agreed, this isn't very responsive.
Also regarding performance; Don't pre-optimizing for something until it becomes a problem. Test across devices.
That said, the way that color, opacity and transform are animated using transition are very performant, compared to layout such as positions (top, left, bottom, right) and box model stuff like margins, paddings, borders, width and heights, etc.
Regarding using opacity vs color for transitions and animations, there are differences but they mostly depend on your needs.
Opacity is applied to the whole element, rather than individual font, background and border color. It may cause problems with antialiasing for text if you're using opacity instead of rgba/hsla for example (depends on browser and device). There are some great explanations for why this happens that you can find in the wild.
@@dealloc And imagine all the extra work Sass would make when you try to make changes to something like this in the future?
To the authors credit, he wasn't making a website really, just teaching us about a specific subject.
Thanks a lot! Easy and awesome! can't wait to put it somewhere :)
Great Tutorial, Very Helpful! Thank you very much!
you made it look super easy 👌🏻
Great tutorial but can you show/recommend an alternative way of doing this without clip-path. Clip-path is not currently fully supported. Thanks!
After some research, I've found some tutorials doing this with divs, if anyone is interested. Just search 'morphing menu button'.
You can do this with pseudo elements which will just take some effort to place and resize them on hover.
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
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
Is there an advantage to using the rgb() function of the color as opposed to changing opacity?
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
Pretty cool 🤓 Thanks!
Side navigation bar still not found... I am not going to college for now...😅
Waiting for your video on the same...
A big fan of your work...🤩🤩
I've done some sidenav bar tuts! What are you looking for specifically?
@@DesignCourse Can you give me the link
@@DesignCourse Are those CSS based? Or any other language... I might have been looking it in wrong place all this time
Hi I want to ask you that you used nested class in css but how and what plugin you used for this purpose
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?
Amazing sir, thanks a lot 😊😊🙏
The last time I checked I was not able to apply transitions on Clippath property . What is happening?
Awesome plan
Crazy man😻. Will try it.
Great tutorial!, thanks for share, greetings from Mexico :)
That was brilliant. Concise, with a ton of great techniques. Thanks!
Very informative .. can you show a basic tutorial of svg animation
Creative As usual . Thanks
Hello, so I am having a problem when using clip path and I have no clue if there is a solution.
Apparently I cannot use overflow auto because clip path makes it by default overflow hidden.
This is an issue more in iOS safari
Can anyone please help me?
Thank You Sir!❤
Thanks for this video, it's so cool!
Wow, tks so much, it's great video
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?
That was amazing. I dont need gsap after watching this!
Thanks Gary
Pretty cool with minimal code.
Cool video thanks for sharing
Really cool stuff!
Nice metal outro song
Awesome brother
bro Programming BY TSH This channel is so good bro .....channel name - Programming BY TSH
Hii sir,
Ur Indian Fan here
Love ur videos ❤
Post these amazing techniques very helpful for Web Designers ☺
your ui video was awesome
awesome tutorial !
Hi love css and also u r teaching is awesome .... love you friend please give me more vidoe like this types of ui intraction... :)
this is AWESOME!
well done
Thank you so much!
what are the the extension which you use for css and html?
Inspiration! thank you!!
Clip path partially supported yet
really fantastic