"if you find this 6 months from now" me coming 2 years later: i wonder how good it is now
@achalsankat78984 жыл бұрын
Lol, I just thought the same buddy! XD
@robertjustineduardo33954 жыл бұрын
so.. is it? XD
@fuseteam4 жыл бұрын
@@robertjustineduardo3395 appears pretty solid if we drop IE like a rock xD
@naveenvenkateshk3 жыл бұрын
me seeing this for the first time 3 years after the video was posted.
@HorizonHuntxr3 жыл бұрын
@@naveenvenkateshk same, I'm pretty sure browser support is now very good
@Mwtorres892 жыл бұрын
This video is GOLD. Thank you, Kevin. We need these types of simplified videos more often.
@anad64485 жыл бұрын
You're such a great communicator! Thanks for breaking things down so nicely!
@ReligionAndMaterialismDebunked Жыл бұрын
You're* Yee ^_^
@timkimdesign4 жыл бұрын
display: grid; place-items: center; Ahhhhhhh, simple and easy. Thank you.
@trungbuichi78644 жыл бұрын
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!!
@WingedDestinyX5 жыл бұрын
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
@teppichkuchen86066 жыл бұрын
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!
@KevinPowell6 жыл бұрын
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 :)
@dustinpoissant6 жыл бұрын
If im centering text in a fixed height container just use line-height: 100px and text-align: center
@williampelletiervslol19496 жыл бұрын
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
@williampelletiervslol19496 жыл бұрын
nvm tried something and it work
@williampelletiervslol19496 жыл бұрын
emojji is just a h1/6 lol
@brandon50583 жыл бұрын
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!*
@typingmasterpro67623 жыл бұрын
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.
@01RobPwr6 жыл бұрын
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 🙂
@KevinPowell6 жыл бұрын
Hah, that's awesome, glad my timing was so good Rob!
@nathanb52413 жыл бұрын
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.
@fpgroups3 жыл бұрын
It is like a magician revealing tricks of the trade! Nice work.
@MarkOhanesian4 жыл бұрын
Kevin, this is one of the best CSS tutorials I've ever watched! Thank you so much.
@BasicMike2 жыл бұрын
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.
@abdessadekelaasri88622 жыл бұрын
The best Teacher ever!! I have seen a lot of your videos and I don't think anyone loves CSS more than you do : )
@ricardopassos11804 жыл бұрын
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.
@Harpagophytum674 жыл бұрын
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.
@adanedhelbg6 жыл бұрын
Just binged a few videos of yours - awesome work, man. Can't wait to see more from you :)
@KevinPowell6 жыл бұрын
So glad you're enjoying my content Kaloyan!
@recursionError3446 жыл бұрын
Looked everywhere for a good explanation of polygon coordinates! Thank you :D
@KevinPowell6 жыл бұрын
Glad that this helped you out!
@marvinschulze61526 жыл бұрын
great video men! I haven't seen any video about css as good in the last month
@Glow01105 жыл бұрын
so many useful gems in this video
@pradipktimsina86953 жыл бұрын
you are such a genius... love your work...
@blackpurple9163 Жыл бұрын
Please continue this series, doesn't matter if it's 5 minutes or 10 or 15, your choice, but bring these back
@RussDnB4 жыл бұрын
Very cool tips. Thank you Kevin :)
@jamesrosemary29325 жыл бұрын
The use of calc() was clever ;)
@jnoah75376 жыл бұрын
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
@christinejurewicz30576 жыл бұрын
Just what I needed for something I ran into recently. Thank you!
@KevinPowell6 жыл бұрын
Awesome, glad the timing was good Christine!
@Devronization5 жыл бұрын
Fantastic video. Thanks a lot.
@Melvin420x126 жыл бұрын
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!
@KevinPowell6 жыл бұрын
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?
@anishadhikari36904 жыл бұрын
This channel is GEM. Thank you so much :) :)
@lizalizaveta18823 жыл бұрын
Wow, now I know how they do it, gonna try . Thank you!
@narayanarao4bsnl4 жыл бұрын
Learned something new..... Thank You...!
@AlexGeekly3 жыл бұрын
Really like this one! Thanks 😀
@siarotleahmae81803 жыл бұрын
This is so great for a beginner like me Kevin.
@jacquesduplessis61755 жыл бұрын
Nice video, thanks!
@lloyd7miller6 жыл бұрын
click-path: polygon with calc and vw is sickkk 👌
@KevinPowell6 жыл бұрын
Yeah, calc has so many awesome possibilities. Always fun finding cool stuff like this.
@evergreen77813 жыл бұрын
That's awesome ♥️♥️♥️ Can you please make a video on making wavy templates using CSS3 & a detail about transform, z-index,skew & all...
@akashbond8624 жыл бұрын
I love your method of explaining things, thanks!!!
@incinerator71465 жыл бұрын
just the perfect video i've been looking for ! your channel's amazing
@raphaelandrade5552 жыл бұрын
Thank you, man! Helped a lot, i owe you a coffee
@mosescodes36773 жыл бұрын
Thank you kevin! we love your contents please keep up with good work
@syberiaok4 жыл бұрын
Super cool and well explained! Thanks!!
@XexusNH2 жыл бұрын
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.
@malangope4 жыл бұрын
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; }
@chandrakant62832 жыл бұрын
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.
@swatichoudhary1008 Жыл бұрын
You videos are really worthy.Learnt so much and still learning.Thank you
@nathancornwell14554 жыл бұрын
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 ...
@nathancornwell14554 жыл бұрын
Also, you can actually double click anywhere on the perimeter of your shape and add in new points to alter the shape .
@southgecko36535 жыл бұрын
Thank you for this video. This has been incredibly helpful
@moizkhalid27145 жыл бұрын
wow. Your Videos Are So Informative. Love your Videos.
@terrap0b_ps9952 жыл бұрын
Kevin is my go to guy for CSS always!
@geralt90365 жыл бұрын
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
@thewisecoder41283 жыл бұрын
Great work! You got my subscribe!
@Fabian-_-6 жыл бұрын
Exactly what I searched for long! Thank you so much :D
@ahmmadawshaf3 жыл бұрын
Awesome content! keep it up!
@ben-cb5er3 жыл бұрын
When it comes to anything related to css you are god lol 🙌 thank you! Great video and please do more on grid layouts 🙏
@martalost5 жыл бұрын
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!
@nellywasti32902 жыл бұрын
Thank you so much for your way of teaching i really enjoy it .. Thank you
@airlobster25 жыл бұрын
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!
@lambo-ca4 жыл бұрын
Thanks for the last one.
@nevildst6 жыл бұрын
Awesome work, Kevin. Thanks for everything :)
@chamnil86663 жыл бұрын
cool stuff.Thank you sir.
@Konstantah8885 жыл бұрын
Very useful video, thanks a lot! Gonna try it out on my projects.
@dimtodim5 жыл бұрын
great job man :) very helpful
@ShadiMuhammad6 жыл бұрын
Thanks a lot Kevin, I like your tutorials too much. keep going. 👌
@KevinPowell6 жыл бұрын
So glad to hear that!
@mddurulislam60212 жыл бұрын
Thanks for these wonderful videos.
@spaceghost78072 жыл бұрын
Thanks man! I needed this!
@vishavaroraYT6 жыл бұрын
do more videos on css tricks etc... i really enjoyed it.. subbed
@KevinPowell6 жыл бұрын
Glad you liked it The Great Cheater, thanks for subbing :D
@williampelletiervslol19496 жыл бұрын
me too
@hossam_okasha4 жыл бұрын
I was lucky to find this channel!! thank you, Kevin.
@KevinPowell4 жыл бұрын
Glad you enjoy it!
@unfairracing81135 жыл бұрын
awesome tutorial as always, thank you
@fuad72583 жыл бұрын
Thank u so much for this video, love from Bangladesh 😍. Subscribe done!
@44turtlepower2 жыл бұрын
Thanks, Kevin! Very cool, and very helpful.
@fhkodama2 жыл бұрын
Kevin, you are awesome! Congratulations on your incredible work and to being such a nice guy! :)
@thefaredevil5 жыл бұрын
Brilliant video! Very informative and to the point
@captainzappa85614 жыл бұрын
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%; }
@adamwright80505 жыл бұрын
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! 👍👍👍👍
@betheprogrammer53595 жыл бұрын
thanks kevin for unique shapes
@ARTICFR0ST5 жыл бұрын
Thanks for this, was looking around for it.
@tomd56785 жыл бұрын
Very interesting - useful
@kumarshantanu30843 жыл бұрын
KEVIN on the rescue just like always. :)
@CarlosGomes-yc3nm3 жыл бұрын
This is so amazing! Thanks!
@miscany2 жыл бұрын
I learned so much in so little time, and I was not bored. I love your voice man (no homo of course).
@SamuelRamirezTijuana5 жыл бұрын
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.
@KevinPowell5 жыл бұрын
Thanks so much Samuel! Very appreciated!
@TheSatheeshmca4 жыл бұрын
Great learning, thanks for such a wonderful video ☺️👍👌👌👌
@vonshitz3 жыл бұрын
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.
@andrewt2486 жыл бұрын
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 }.
@KevinPowell6 жыл бұрын
Oh I like that :)
@preetamvarun92192 жыл бұрын
Thanks for the tutorial!
@Sammorris2073 жыл бұрын
thank you!
@tr73434 жыл бұрын
Well Done. thanks man.😻😻
@AshishKumar-ed1ru6 жыл бұрын
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 !!
@KevinPowell6 жыл бұрын
No problem at all, super glad to have been able to help 😁
@agamdeepsingh0013 жыл бұрын
Nice video sir, it helped me a lot. Thanks 👍👍
@AntonSlavik6 жыл бұрын
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.
@josevalente16675 жыл бұрын
Very very good! I have learned a lot!
@NikolaZagorac5 жыл бұрын
There is a simpler way to put text in the vertical center, just set the line-height to the height of the container
@KevinPowell5 жыл бұрын
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 :)
@Blazephoenix6 жыл бұрын
Great videos. Subscribed.
@atwarwithlife2 жыл бұрын
such a lifesaver. thank you!
@rofa20456 жыл бұрын
Thank you Kevin ♥
@KevinPowell6 жыл бұрын
No problem!
@bhaveshasnotkar52105 жыл бұрын
learned something new..thnk u
@SuperIraq12345 жыл бұрын
Thank you for this video.
@markystudio143 жыл бұрын
This what I am looking for 🤩😍😍
@tristanforward90946 жыл бұрын
Thanks Kevin your note about content: ""; is super helpful!