How to make shapes with CSS

  Рет қаралды 347,552

Kevin Powell

Kevin Powell

Күн бұрын

It's pretty easy to makes shapes with only a small amount of HTML and some CSS. We have super simple options like border-radius, we've got slightly more complicated things we can do with pseudo elements, and if you need some really unique shapes, we can use clip-path.
Border radius is nice for making some very simple shapes, and it's very easy to do. I don't explore it too much in this video, but it's a nice option that has awesome browser support.
Pseudo elements also have awesome browser support, and they allow us to make some rather complicated shapes with only CSS if you're up to the task! In this video, I make a chevron type thing with them.
For the really complicated shapes, clip-path is the answer. You can create literally any shape you want, the only thing to watch out for is browser support. It's not terrible, but there are some places where it won't work, so make sure whatever you're using it for isn't an essential design element, but something which can fail gracefully.
CodePen from this video: codepen.io/kevinpowell/pen/bv...
Clip-path website: bennettfeely.com/clippy/
Clip-path browser support: caniuse.com/#search=clip-path
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Пікірлер: 347
@anad6448
@anad6448 5 жыл бұрын
You're such a great communicator! Thanks for breaking things down so nicely!
@ReligionAndMaterialismDebunked
@ReligionAndMaterialismDebunked Жыл бұрын
You're* Yee ^_^
@Mwtorres89
@Mwtorres89 2 жыл бұрын
This video is GOLD. Thank you, Kevin. We need these types of simplified videos more often.
@timkimdesign
@timkimdesign 4 жыл бұрын
display: grid; place-items: center; Ahhhhhhh, simple and easy. Thank you.
@trungbuichi7864
@trungbuichi7864 4 жыл бұрын
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!!
@fuseteam
@fuseteam 3 жыл бұрын
"if you find this 6 months from now" me coming 2 years later: i wonder how good it is now
@achalsankat7898
@achalsankat7898 3 жыл бұрын
Lol, I just thought the same buddy! XD
@robertjustineduardo3395
@robertjustineduardo3395 3 жыл бұрын
so.. is it? XD
@fuseteam
@fuseteam 3 жыл бұрын
@@robertjustineduardo3395 appears pretty solid if we drop IE like a rock xD
@naveenvenkateshk
@naveenvenkateshk 3 жыл бұрын
me seeing this for the first time 3 years after the video was posted.
@HorizonHuntxr
@HorizonHuntxr 3 жыл бұрын
@@naveenvenkateshk same, I'm pretty sure browser support is now very good
@jnoah7537
@jnoah7537 6 жыл бұрын
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
@WingedDestinyX
@WingedDestinyX 4 жыл бұрын
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
@brandon5058
@brandon5058 3 жыл бұрын
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!*
@typingmasterpro6762
@typingmasterpro6762 3 жыл бұрын
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.
@geralt9036
@geralt9036 5 жыл бұрын
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
@adanedhelbg
@adanedhelbg 6 жыл бұрын
Just binged a few videos of yours - awesome work, man. Can't wait to see more from you :)
@KevinPowell
@KevinPowell 6 жыл бұрын
So glad you're enjoying my content Kaloyan!
@teppichkuchen8606
@teppichkuchen8606 6 жыл бұрын
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!
@KevinPowell
@KevinPowell 6 жыл бұрын
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 :)
@dustinpoissant
@dustinpoissant 6 жыл бұрын
If im centering text in a fixed height container just use line-height: 100px and text-align: center
@williampelletiervslol1949
@williampelletiervslol1949 5 жыл бұрын
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
@williampelletiervslol1949
@williampelletiervslol1949 5 жыл бұрын
nvm tried something and it work
@williampelletiervslol1949
@williampelletiervslol1949 5 жыл бұрын
emojji is just a h1/6 lol
@marvinschulze6152
@marvinschulze6152 6 жыл бұрын
great video men! I haven't seen any video about css as good in the last month
@Fabian-_-
@Fabian-_- 6 жыл бұрын
Exactly what I searched for long! Thank you so much :D
@abdessadekelaasri8862
@abdessadekelaasri8862 Жыл бұрын
The best Teacher ever!! I have seen a lot of your videos and I don't think anyone loves CSS more than you do : )
@nevildst
@nevildst 6 жыл бұрын
Awesome work, Kevin. Thanks for everything :)
@recursionError344
@recursionError344 6 жыл бұрын
Looked everywhere for a good explanation of polygon coordinates! Thank you :D
@KevinPowell
@KevinPowell 6 жыл бұрын
Glad that this helped you out!
@01RobPwr
@01RobPwr 6 жыл бұрын
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 🙂
@KevinPowell
@KevinPowell 6 жыл бұрын
Hah, that's awesome, glad my timing was so good Rob!
@southgecko3653
@southgecko3653 5 жыл бұрын
Thank you for this video. This has been incredibly helpful
@christinejurewicz3057
@christinejurewicz3057 6 жыл бұрын
Just what I needed for something I ran into recently. Thank you!
@KevinPowell
@KevinPowell 6 жыл бұрын
Awesome, glad the timing was good Christine!
@akashbond862
@akashbond862 4 жыл бұрын
I love your method of explaining things, thanks!!!
@nathanb5241
@nathanb5241 3 жыл бұрын
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.
@ARTICFR0ST
@ARTICFR0ST 5 жыл бұрын
Thanks for this, was looking around for it.
@ricardopassos1180
@ricardopassos1180 3 жыл бұрын
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.
@martalost
@martalost 5 жыл бұрын
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!
@Konstantah888
@Konstantah888 5 жыл бұрын
Very useful video, thanks a lot! Gonna try it out on my projects.
@betheprogrammer5359
@betheprogrammer5359 5 жыл бұрын
thanks kevin for unique shapes
@BasicMike
@BasicMike 2 жыл бұрын
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.
@unfairracing8113
@unfairracing8113 4 жыл бұрын
awesome tutorial as always, thank you
@thefaredevil
@thefaredevil 5 жыл бұрын
Brilliant video! Very informative and to the point
@Melvin420x12
@Melvin420x12 6 жыл бұрын
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!
@KevinPowell
@KevinPowell 6 жыл бұрын
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?
@adamwright8050
@adamwright8050 4 жыл бұрын
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! 👍👍👍👍
@fpgroups
@fpgroups 3 жыл бұрын
It is like a magician revealing tricks of the trade! Nice work.
@ben-cb5er
@ben-cb5er 3 жыл бұрын
When it comes to anything related to css you are god lol 🙌 thank you! Great video and please do more on grid layouts 🙏
@tristanforward9094
@tristanforward9094 6 жыл бұрын
Thanks Kevin your note about content: ""; is super helpful!
@fhkodama
@fhkodama 2 жыл бұрын
Kevin, you are awesome! Congratulations on your incredible work and to being such a nice guy! :)
@syberiaok
@syberiaok 4 жыл бұрын
Super cool and well explained! Thanks!!
@incinerator7146
@incinerator7146 5 жыл бұрын
just the perfect video i've been looking for ! your channel's amazing
@chandrakant6283
@chandrakant6283 2 жыл бұрын
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.
@mosescodes3677
@mosescodes3677 3 жыл бұрын
Thank you kevin! we love your contents please keep up with good work
@vonshitz
@vonshitz 3 жыл бұрын
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.
@Alessandro-nq3tm
@Alessandro-nq3tm 5 жыл бұрын
I've just discovered your channel thank you for your work is amazing
@anishadhikari3690
@anishadhikari3690 4 жыл бұрын
This channel is GEM. Thank you so much :) :)
@SamuelRamirezTijuana
@SamuelRamirezTijuana 5 жыл бұрын
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.
@KevinPowell
@KevinPowell 5 жыл бұрын
Thanks so much Samuel! Very appreciated!
@spaceghost7807
@spaceghost7807 2 жыл бұрын
Thanks man! I needed this!
@lizalizaveta1882
@lizalizaveta1882 3 жыл бұрын
Wow, now I know how they do it, gonna try . Thank you!
@onihonker
@onihonker 6 жыл бұрын
Thank you for this video. I learned something new and it was easy to understand.
@larry.lam.
@larry.lam. 5 жыл бұрын
Amazing, thank you !
@CarlosGomes-yc3nm
@CarlosGomes-yc3nm 3 жыл бұрын
This is so amazing! Thanks!
@AlexGeekly
@AlexGeekly 3 жыл бұрын
Really like this one! Thanks 😀
@swatichoudhary1008
@swatichoudhary1008 Жыл бұрын
You videos are really worthy.Learnt so much and still learning.Thank you
@narayanarao4bsnl
@narayanarao4bsnl 4 жыл бұрын
Learned something new..... Thank You...!
@hossam_okasha
@hossam_okasha 3 жыл бұрын
I was lucky to find this channel!! thank you, Kevin.
@KevinPowell
@KevinPowell 3 жыл бұрын
Glad you enjoy it!
@mddurulislam6021
@mddurulislam6021 2 жыл бұрын
Thanks for these wonderful videos.
@44turtlepower
@44turtlepower 2 жыл бұрын
Thanks, Kevin! Very cool, and very helpful.
@RussDnB
@RussDnB 3 жыл бұрын
Very cool tips. Thank you Kevin :)
@atwarwithlife
@atwarwithlife 2 жыл бұрын
such a lifesaver. thank you!
@preetamvarun9219
@preetamvarun9219 2 жыл бұрын
Thanks for the tutorial!
@Devronization
@Devronization 4 жыл бұрын
Fantastic video. Thanks a lot.
@ShadiMuhammad
@ShadiMuhammad 6 жыл бұрын
Thanks a lot Kevin, I like your tutorials too much. keep going. 👌
@KevinPowell
@KevinPowell 6 жыл бұрын
So glad to hear that!
@theartofwarren
@theartofwarren 5 жыл бұрын
Awesome! Great explanation!
@thewisecoder4128
@thewisecoder4128 3 жыл бұрын
Great work! You got my subscribe!
@MarkOhanesian
@MarkOhanesian 4 жыл бұрын
Kevin, this is one of the best CSS tutorials I've ever watched! Thank you so much.
@AshishKumar-ed1ru
@AshishKumar-ed1ru 6 жыл бұрын
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 !!
@KevinPowell
@KevinPowell 6 жыл бұрын
No problem at all, super glad to have been able to help 😁
@Glow0110
@Glow0110 5 жыл бұрын
so many useful gems in this video
@josevalente1667
@josevalente1667 5 жыл бұрын
Very very good! I have learned a lot!
@dimtodim
@dimtodim 5 жыл бұрын
great job man :) very helpful
@nellywasti3290
@nellywasti3290 2 жыл бұрын
Thank you so much for your way of teaching i really enjoy it .. Thank you
@blokche_dev
@blokche_dev 6 жыл бұрын
Great tips and tricks, as always I should say! Thanks!
@KevinPowell
@KevinPowell 6 жыл бұрын
Glad you liked it :D
@SuperIraq1234
@SuperIraq1234 5 жыл бұрын
Thank you for this video.
@mann3604
@mann3604 6 жыл бұрын
Very helpful! Thanks a lot
@KevinPowell
@KevinPowell 6 жыл бұрын
No problem at all Mann :D
@pradipktimsina8695
@pradipktimsina8695 3 жыл бұрын
you are such a genius... love your work...
@SahilSinghal1998
@SahilSinghal1998 5 жыл бұрын
I am going to be a fan of yours .... Its so amazing . 😍
@moizkhalid2714
@moizkhalid2714 5 жыл бұрын
wow. Your Videos Are So Informative. Love your Videos.
@ahmmadawshaf
@ahmmadawshaf 3 жыл бұрын
Awesome content! keep it up!
@jacquesduplessis6175
@jacquesduplessis6175 5 жыл бұрын
Nice video, thanks!
@siarotleahmae8180
@siarotleahmae8180 2 жыл бұрын
This is so great for a beginner like me Kevin.
@tarunjuluru99
@tarunjuluru99 6 жыл бұрын
Great! Thanks
@KevinPowell
@KevinPowell 6 жыл бұрын
Glad you liked it :)
@vishavaroraYT
@vishavaroraYT 6 жыл бұрын
do more videos on css tricks etc... i really enjoyed it.. subbed
@KevinPowell
@KevinPowell 6 жыл бұрын
Glad you liked it The Great Cheater, thanks for subbing :D
@williampelletiervslol1949
@williampelletiervslol1949 6 жыл бұрын
me too
@chamnil8666
@chamnil8666 3 жыл бұрын
cool stuff.Thank you sir.
@alirezazakeri84
@alirezazakeri84 4 жыл бұрын
thank you bro that was really cool
@TheSatheeshmca
@TheSatheeshmca 4 жыл бұрын
Great learning, thanks for such a wonderful video ☺️👍👌👌👌
@bhaveshasnotkar5210
@bhaveshasnotkar5210 5 жыл бұрын
learned something new..thnk u
@raphaelandrade555
@raphaelandrade555 Жыл бұрын
Thank you, man! Helped a lot, i owe you a coffee
@tr7343
@tr7343 4 жыл бұрын
Well Done. thanks man.😻😻
@lambo-ca
@lambo-ca 4 жыл бұрын
Thanks for the last one.
@blackpurple9163
@blackpurple9163 Жыл бұрын
Please continue this series, doesn't matter if it's 5 minutes or 10 or 15, your choice, but bring these back
@shreyasrajagopal4433
@shreyasrajagopal4433 7 ай бұрын
Cool stuff!
@AntonSlavik
@AntonSlavik 6 жыл бұрын
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.
@XexusNH
@XexusNH 2 жыл бұрын
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.
@aleksandarv.1459
@aleksandarv.1459 3 жыл бұрын
Keep up the good work!
@markystudio14
@markystudio14 3 жыл бұрын
This what I am looking for 🤩😍😍
@Sammorris207
@Sammorris207 3 жыл бұрын
thank you!
@nikhiltyagi1080
@nikhiltyagi1080 6 жыл бұрын
Thank you so much! Best channel on youtube!!
@KevinPowell
@KevinPowell 6 жыл бұрын
Thanks Nikhil!
@terrap0b_ps995
@terrap0b_ps995 Жыл бұрын
Kevin is my go to guy for CSS always!
@agamdeepsingh001
@agamdeepsingh001 2 жыл бұрын
Nice video sir, it helped me a lot. Thanks 👍👍
@sonamuhialdeen7866
@sonamuhialdeen7866 2 жыл бұрын
Very useful tutorial
@sumankathet2560
@sumankathet2560 6 жыл бұрын
Looking forward for more this kind of videos 😉😉
@KevinPowell
@KevinPowell 6 жыл бұрын
Glad you liked it :D
@jamesrosemary2932
@jamesrosemary2932 5 жыл бұрын
The use of calc() was clever ;)
@Harpagophytum67
@Harpagophytum67 4 жыл бұрын
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.
Using CSS Position Absolute: some practical examples
26:18
Kevin Powell
Рет қаралды 122 М.
OMG🤪 #tiktok #shorts #potapova_blog
00:50
Potapova_blog
Рет қаралды 16 МЛН
Why You Should Always Help Others ❤️
00:40
Alan Chikin Chow
Рет қаралды 131 МЛН
СНЕЖКИ ЛЕТОМ?? #shorts
00:30
Паша Осадчий
Рет қаралды 7 МЛН
Final muy increíble 😱
00:46
Juan De Dios Pantoja 2
Рет қаралды 26 МЛН
Awesome UI Interactions with the CSS Clip Path Property
16:15
DesignCourse
Рет қаралды 336 М.
Blender - SERPENT Creature 3D Sculpt (Timelapse)
10:52
David P - Digital Art
Рет қаралды 117
min(), max(), and clamp() are CSS magic!
18:12
Kevin Powell
Рет қаралды 290 М.
Amazing 3D CSS creations from my community
1:09:06
Kevin Powell
Рет қаралды 78 М.
Can you beat me at a CSS Battle?
49:42
Kevin Powell
Рет қаралды 357 М.
Creative Section Breaks Using CSS Clip-Path
12:27
CSS Weekly
Рет қаралды 6 М.
NextJS Server-Side Product Modals using URL, Suspense & Fetch
17:12
Taylor Lindores-Reeves
Рет қаралды 10 М.
Making Shapes With CSS
21:42
StoneColdProfessor
Рет қаралды 23 М.
OMG🤪 #tiktok #shorts #potapova_blog
00:50
Potapova_blog
Рет қаралды 16 МЛН