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
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
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.
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
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.
@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.
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?
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
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
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?
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.
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.
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!
just go straight to 5:45... that's where the clip-path comes in... good vid as always..
It never ceases to amaze me how powerful CSS can be. Setting this up with JS must be a nightmare... As always, great video!
wow! i've been searching for this so long...thank you sir!
The fact that you are making tutorials on responsive css already made me sub😊
Keep up the good work!
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
How does youtube know what I need to watch suddenly? Thx a lot for this Gary 😄
The best ever design content I have found on youtube.
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
I just learnt a bunch of CSS and VScode tricks. amazing stuff. you earned a new sub!!
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!
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.
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.
Great sir...Thanks am gonna do this tonight till dawn!
😂😂 Till dawn
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
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.
i really like that circle part. thanks sir
ooohhh that will make my projects look way better! thank you!
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!
So cool didn't even know this was a thing , so many cool User interactions could be done with this
Good series of video i saw in your channel, thanks for all.
Always wanted to try clip path but never got around to it. Thank you for this , straightforward explanation & inspiring tutorial. ❤️ from 🇿🇼
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.
You're teaching me things I didn't know I needed, and now I can't live without. Thanks... I think? ;-)
Great video and very good explanations. Cheers!
Wow, excellent video, I liked this effect! Thanks 😄
@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.
Lots of cool syntax i didnt know before
Honestly, KISS principle applies here.....amazing tutorial, thank you...
Great info! I'd never used clip path so I'm stoked to experiment
That was awesome! I really love all these stylish gradients and animations in css. Thanks for the great vid!
With grid you can use place items, which is a combination of both justify and align items
The outro is lit
Quite an interesting css property
Thanks for this cool tips on css. I am looking for applying this to my project!
Excellent tutorial, thank you!
what a crazy reaction at 06:25 - "what is the fourth one?"
This kinda opened my eyes. Thanks a lot
Good video, like always I learned something new :D
Thanks again Jeremy Renner!
You are hero man 👏🏼
Keep going forward..
Amazing sir, thanks a lot 😊😊🙏
Hello Gary. Thanks for the great video.
Great Tutorial, Very Helpful! Thank you very much!
you made it look super easy 👌🏻
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
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
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. :)
Pretty cool 🤓 Thanks!
Like always,
amazing video
Thank you Hawk-eye
Crazy man😻. Will try it.
Please, more tutorials like this one!!!
Thank You Sir!❤
Nunito instead of Montserrat what a crazy man you are !!!
Cool video thanks for sharing
Awesome plan
Wow, tks so much, it's great video
Thanks for this video, it's so cool!
Hi love css and also u r teaching is awesome .... love you friend please give me more vidoe like this types of ui intraction... :)
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.
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
Really cool stuff!
Your intro makes me crazy!!! My brain is just expecting the third circle getting filled - BUT IT DOES NOT HAPPEN!!!!
Great tutorial!, thanks for share, greetings from Mexico :)
well done
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
your ui video was awesome
Very helpful 👍👍👍👍
awesome tutorial !
Inspiration! thank you!!
Thank you so much!
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
Thanks for sharing 4:38 🤣
Creative As usual . Thanks
That was brilliant. Concise, with a ton of great techniques. Thanks!
Awesome brother
bro Programming BY TSH This channel is so good bro .....channel name - Programming BY TSH
Nice metal outro song
it's look really nice.
really fantastic
this is AWESOME!
Really cool !
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?
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.
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?
Hii sir,
Ur Indian Fan here
Love ur videos ❤
Post these amazing techniques very helpful for Web Designers ☺
That was amazing. I dont need gsap after watching this!
Thanks Gary
Really awesome
Is there an advantage to using the rgb() function of the color as opposed to changing opacity?
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
Very informative .. can you show a basic tutorial of svg animation
Maestro de maestro :D
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.
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.
Wow. Seems like you know most of css properties. Great video by the way.