Hello Kevin, thanks for that input! :) I have one hint for you: you can also centering things with "top: 50%; transform: translateY(-50%);". Its very useful and crossbrowser compatible. Keep up the good work!
is .one a div? cause now im rlly confuse about the emojji and the fack tht you wrote place-item: center; and the circle goes right in the middle of the emojji
you're literally the css god i have been looking for! my css skills have gone through the roof since I am doing the cssbattles with your videos. *THANKYOU!*
Oh my god. Place-items? are you kidding me? how have I not seen that. There's gold information for css learners from beginning to end here. Ty. Subbed.
Ha I was just thinking the other day “how the hell do I do different shapes” and was going to have a look this weekend and what pops up, your video! Perfect 🙂
A really fantastic explaination of how to make shapes with CSS. I hope you'll produce a more extensive explaination on what you can do with clip-path and the difference between clip-path and clip-rule.
I could feel what you felt when you used the calc function and everything worked as expected. In addition, your "strategy" in your last example gave me some insights on how to use the calc() function.
I was looking all over for this type of CSS Tut! You sir are the best!!!! 👍🏽 Thanks a lot for the knowledge. I'm going to be trying this out to expand my css arsenal
Thanks for the video, loved it! It's so sad that we won't learn these kinds of things in the study I'm doing. ( Graphics Design ). It's all so incredibly basic stuff that you could learn in less than a month but spread in 3 years. Thanks to people like you I can step up my game without depending on my study and learn more than the basic properties!
First time using code pen, that's a nice site. I added in a slow infinite animation and a transform rotate (100deg 80deg) to make the smile move back and forth. Silly, but fun :) I've been watching your videos for a few weeks now, makes me interested in web design again.
Great video, your voice sees to be created to make educational videos, so good! I already used your tips this on my website and I love the effects. Thanks!
Absolutely amazing information. I find clip-path fascinating to use in my design, it's just the browser support that keeps me from abusing it to form complex shapes.
Regarding the angle shape between the sections at the end, if you want IE support you could use borders instead. Something like this: .wedge { background: #5B5F97; border-width:0 0 10vw 100vw; border-style:solid; border-color:transparent #FF6B6C #FF6B6C transparent; }
I like You and I love what you do... so I'm becoming a Patron of yours. Hope more people show their admiration to your work and gratitude for you knowledge sharing by being patrons also. Keep it up Kevin.
Firefox has a really awesome feature in their dev tools like their grid dev tools , where you can click on a clip-path icon and shows you all the points in your clip path and you can drag the points around to see different shapes ...
Awesome! I'm crap and making things look nice (in the 2010s) and I design my own business website once every year or so, which always looks.... boxy. This helps a lot.
Awesome man, you are my mentor you show so much efforts towards teaching has those topics that are faded away in process of learning web development and design. Thanks a ton !!
You are a very good teacher. In video you said why do they keep hyper link underline by default. They did that to differentiate between text and hyperlinks or else it will be difficult to differntiate.
I know you know this but. Love your videos learning a lot thanks for the info #main{ position:absolute; left:10%; top:10%; width:40%; height:80%; background-color:orange; background-image:linear-gradient(45deg,black 50%, transparent 0), linear-gradient(-45deg,transparent 50%, rgb(60,60,60) 0); background-size:100% 100%, 100% 100%; background-position:50%,50%; }
clip-path is awesome! I also discovered another cool thing: I needed to created a down-arrow shape which also needs to stretch vertically. obviously I used an arrow shape polygon. however, the arrow's triangle part looks horrible when stretched. So....here is what I've done: clip-path: polygon( 20% 0%, 80% 0%, 80% calc(100% - 15px), 100% calc(100% - 15px), 50% 100%, 0% calc(100% - 15px), 20% calc(100% - 15px) ); works like a charm!
I didn’t really look to see if this has been suggested yet, but you could do your normal layout and then wrap your clip-path-specific styles (including things like the negative margin) in an @supports (clip-path: polygon(0 0)) { block }.
Hi Kevin, first of all thanks for all your great content. I'm learning so much from you! I recently found a video where i found a different way to make shapes using a chrome extension called shapes where you can manipulate images and copy paste the paramaters into your code. this works very nice with shape-outside and then pasting in the polygon paramaters.
Thanks a lot :) I’ve been trying to find a simple way to get the exact angle you are using on the background clip path in the first section so I can slide a logo coming from behind it and then back behind it on scroll. Thanks a lot dude nice vid! 👍👍👍👍
A couple of days ago I was googling how to do this and some info about Adobe Xd, and you randomly appeared on my youtube feed. Amazing work, keep it up!
Thank you for sharing useful CSS Tricks. But how to put border outside shape? I tried many times but I couldn't do. Please also make some video about Polygon Border. Thank you!
As long as you have only one line of text :) - The problem with that is it's a 'magic number', meaning that number only works in that exact situation. That said, I have used it :)
Such a helpful video.. great to catch up with you I just wonder where do you live? Coz your 'lovely clear' accent is not pure-american.. :) Love from Egypt
This video is GOLD. Thank you, Kevin. We need these types of simplified videos more often.
You're such a great communicator! Thanks for breaking things down so nicely!
You're*
Yee ^_^
display: grid;
place-items: center;
Ahhhhhhh, simple and easy. Thank you.
"if you find this 6 months from now"
me coming 2 years later: i wonder how good it is now
Lol, I just thought the same buddy! XD
so.. is it? XD
@@robertjustineduardo3395 appears pretty solid if we drop IE like a rock xD
me seeing this for the first time 3 years after the video was posted.
@@naveenvenkateshk same, I'm pretty sure browser support is now very good
I was desparate of trying to create different shapes by border combine with transparent and then I found this. What a badass vid! Thanks a bunch!!
I am an iOS dev and I just started getting into building websites again (love to do front-end work). Your videos are gold! Thanks a lot :D
Hello Kevin, thanks for that input! :) I have one hint for you: you can also centering things with "top: 50%; transform: translateY(-50%);". Its very useful and crossbrowser compatible. Keep up the good work!
For sure, I use that a lot! I do like that we don't have to with flex and grid, but as you mentioned, that has better browser support :)
If im centering text in a fixed height container just use line-height: 100px and text-align: center
is .one a div?
cause now im rlly confuse about the emojji and the fack tht you wrote place-item: center; and the circle goes right in the middle of the emojji
nvm tried something and it work
emojji is just a h1/6 lol
you're literally the css god i have been looking for!
my css skills have gone through the roof since I am doing the cssbattles with your videos.
*THANKYOU!*
I have seen your lot of videos and this one is helped me a lot than others. Nice little work you have put in this video. Thanks, mate.
Kevin, this is one of the best CSS tutorials I've ever watched! Thank you so much.
Oh my god. Place-items? are you kidding me? how have I not seen that. There's gold information for css learners from beginning to end here. Ty. Subbed.
Ha I was just thinking the other day “how the hell do I do different shapes” and was going to have a look this weekend and what pops up, your video! Perfect 🙂
Hah, that's awesome, glad my timing was so good Rob!
The best Teacher ever!! I have seen a lot of your videos and I don't think anyone loves CSS more than you do : )
Just binged a few videos of yours - awesome work, man. Can't wait to see more from you :)
So glad you're enjoying my content Kaloyan!
It is like a magician revealing tricks of the trade!
Nice work.
A really fantastic explaination of how to make shapes with CSS. I hope you'll produce a more extensive explaination on what you can do with clip-path and the difference between clip-path and clip-rule.
Looked everywhere for a good explanation of polygon coordinates! Thank you :D
Glad that this helped you out!
great video men! I haven't seen any video about css as good in the last month
just the perfect video i've been looking for ! your channel's amazing
I could feel what you felt when you used the calc function and everything worked as expected. In addition, your "strategy" in your last example gave me some insights on how to use the calc() function.
I was looking all over for this type of CSS Tut! You sir are the best!!!! 👍🏽 Thanks a lot for the knowledge.
I'm going to be trying this out to expand my css arsenal
Just what I needed for something I ran into recently. Thank you!
Awesome, glad the timing was good Christine!
Thanks for the video, loved it! It's so sad that we won't learn these kinds of things in the study I'm doing. ( Graphics Design ). It's all so incredibly basic stuff that you could learn in less than a month but spread in 3 years. Thanks to people like you I can step up my game without depending on my study and learn more than the basic properties!
Really glad that I've been able to help Melvin! In Graphic Design, how much of what you're studying is dealing with the web specifically?
Thank you for your response on the other video. On this one speak to you much more calmly.
Keep going, you're doing a good job.
so many useful gems in this video
Exactly what I searched for long! Thank you so much :D
This channel is GEM. Thank you so much :) :)
you are such a genius... love your work...
11:14 thank you for that!
That's all I needed for this video
Thanks! You're the only dev that's helping me to get to know around
Fantastic video. Thanks a lot.
First time using code pen, that's a nice site. I added in a slow infinite animation and a transform rotate (100deg 80deg) to make the smile move back and forth. Silly, but fun :)
I've been watching your videos for a few weeks now, makes me interested in web design again.
Please continue this series, doesn't matter if it's 5 minutes or 10 or 15, your choice, but bring these back
I love your method of explaining things, thanks!!!
That's awesome ♥️♥️♥️
Can you please make a video on making wavy templates using CSS3 & a detail about transform, z-index,skew & all...
click-path: polygon with calc and vw is sickkk 👌
Yeah, calc has so many awesome possibilities. Always fun finding cool stuff like this.
Great video, your voice sees to be created to make educational videos, so good! I already used your tips this on my website and I love the effects. Thanks!
Absolutely amazing information. I find clip-path fascinating to use in my design, it's just the browser support that keeps me from abusing it to form complex shapes.
Thank you kevin! we love your contents please keep up with good work
Learned something new..... Thank You...!
When it comes to anything related to css you are god lol 🙌 thank you! Great video and please do more on grid layouts 🙏
Very cool tips. Thank you Kevin :)
The use of calc() was clever ;)
You videos are really worthy.Learnt so much and still learning.Thank you
Thank you for this video. This has been incredibly helpful
Nice video, thanks!
This is so great for a beginner like me Kevin.
Regarding the angle shape between the sections at the end, if you want IE support you could use borders instead. Something like this:
.wedge {
background: #5B5F97;
border-width:0 0 10vw 100vw;
border-style:solid;
border-color:transparent #FF6B6C #FF6B6C transparent;
}
Thanks man! I needed this!
I like You and I love what you do... so I'm becoming a Patron of yours. Hope more people show their admiration to your work and gratitude for you knowledge sharing by being patrons also. Keep it up Kevin.
Thanks so much Samuel! Very appreciated!
Kevin, you are awesome! Congratulations on your incredible work and to being such a nice guy! :)
I was lucky to find this channel!!
thank you, Kevin.
Glad you enjoy it!
Awesome work, Kevin. Thanks for everything :)
Super cool and well explained! Thanks!!
Firefox has a really awesome feature in their dev tools like their grid dev tools , where you can click on a clip-path icon and shows you all the points in your clip path and you can drag the points around to see different shapes ...
Also, you can actually double click anywhere on the perimeter of your shape and add in new points to alter the shape .
great job man :) very helpful
Really like this one! Thanks 😀
Thanks a lot Kevin, I like your tutorials too much.
keep going. 👌
So glad to hear that!
wow. Your Videos Are So Informative. Love your Videos.
Wow, now I know how they do it, gonna try . Thank you!
Thank you, man! Helped a lot, i owe you a coffee
Kevin is my go to guy for CSS always!
Awesome! I'm crap and making things look nice (in the 2010s) and I design my own business website once every year or so, which always looks.... boxy. This helps a lot.
Awesome man, you are my mentor you show so much efforts towards teaching has those topics that are faded away in process of learning web development and design. Thanks a ton !!
No problem at all, super glad to have been able to help 😁
You are a very good teacher. In video you said why do they keep hyper link underline by default. They did that to differentiate between text and hyperlinks or else it will be difficult to differntiate.
Brilliant video! Very informative and to the point
I know you know this but. Love your videos learning a lot thanks for the info
#main{
position:absolute;
left:10%;
top:10%;
width:40%;
height:80%;
background-color:orange;
background-image:linear-gradient(45deg,black 50%, transparent 0),
linear-gradient(-45deg,transparent 50%, rgb(60,60,60) 0);
background-size:100% 100%, 100% 100%;
background-position:50%,50%;
}
Thank u so much for this video, love from Bangladesh 😍.
Subscribe done!
Great work! You got my subscribe!
clip-path is awesome! I also discovered another cool thing: I needed to created a down-arrow shape which also needs to stretch vertically. obviously I used an arrow shape polygon. however, the arrow's triangle part looks horrible when stretched. So....here is what I've done: clip-path: polygon(
20% 0%,
80% 0%,
80% calc(100% - 15px),
100% calc(100% - 15px),
50% 100%,
0% calc(100% - 15px),
20% calc(100% - 15px)
);
works like a charm!
I didn’t really look to see if this has been suggested yet, but you could do your normal layout and then wrap your clip-path-specific styles (including things like the negative margin) in an @supports (clip-path: polygon(0 0)) { block }.
Oh I like that :)
Very useful video, thanks a lot! Gonna try it out on my projects.
do more videos on css tricks etc... i really enjoyed it.. subbed
Glad you liked it The Great Cheater, thanks for subbing :D
me too
Hi Kevin, first of all thanks for all your great content. I'm learning so much from you! I recently found a video where i found a different way to make shapes using a chrome extension called shapes where you can manipulate images and copy paste the paramaters into your code. this works very nice with shape-outside and then pasting in the polygon paramaters.
Thanks a lot :) I’ve been trying to find a simple way to get the exact angle you are using on the background clip path in the first section so I can slide a logo coming from behind it and then back behind it on scroll. Thanks a lot dude nice vid! 👍👍👍👍
Thanks, Kevin! Very cool, and very helpful.
This is so amazing! Thanks!
awesome tutorial as always, thank you
I learned so much in so little time, and I was not bored. I love your voice man (no homo of course).
thanks kevin for unique shapes
Awesome content! keep it up!
Thank you so much for your way of teaching i really enjoy it .. Thank you
A couple of days ago I was googling how to do this and some info about Adobe Xd, and you randomly appeared on my youtube feed.
Amazing work, keep it up!
Thanks a lot. Google is spooky like that sometimes, lol.
Not random,...google literally listens to you through your computer....google it, it's true...
such a lifesaver. thank you!
Thanks for these wonderful videos.
Thank you for sharing useful CSS Tricks. But how to put border outside shape? I tried many times but I couldn't do. Please also make some video about Polygon Border. Thank you!
It won't really work... You'd probably want to go with an SVG if you need a border on it.
You can't do that normally. But there are ways to achieve it.
stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style
I've just discovered your channel thank you for your work is amazing
Thanks for this, was looking around for it.
Thanks for the last one.
cool stuff.Thank you sir.
Thank you for this video.
Very interesting - useful
Thanks Kevin your note about content: ""; is super helpful!
There is a simpler way to put text in the vertical center, just set the line-height to the height of the container
As long as you have only one line of text :) - The problem with that is it's a 'magic number', meaning that number only works in that exact situation. That said, I have used it :)
This what I am looking for 🤩😍😍
Thank you so much! Best channel on youtube!!
Thanks Nikhil!
Great learning, thanks for such a wonderful video ☺️👍👌👌👌
Amazing, thank you !
Thank you Kevin ♥
No problem!
Thanks for the tutorial!
Such a helpful video.. great to catch up with you
I just wonder where do you live? Coz your 'lovely clear' accent is not pure-american.. :)
Love from Egypt
I'm in Canada :)