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.
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.
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!
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; }
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.
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!
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! 👍👍👍👍
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.
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 }.
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 ...
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.
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 !!
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!
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.
but the thing is although I have a slanted rectangle, it still takes up space like a square. I have this slanted rectangle next to each other for a design and I can't fit them side by side exactly because they still take up space like a square.
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!
Thank you so much for sharing knowledge, i really like this, but i am not getting who the hell is these people who don't like these cool designs (people gave dislike to this cool thing). Anyways i really thankful to you for this this video
Thanks! It works BUT when I add the negative margin it takes away the slant and just becomes straight at the bottom again... maybe its because this divs are absolute positioned...
