Spice up your site | Easy waves, angles, & other creative shapes with CSS

Рет қаралды 157,652

Күн бұрын

The web is made of boxes, and boxes are bland, boring, and all look the same.
We can spice things up with bringing in some angels, shapes, and waves like these, which makes things a heck of a lot more interesting.
In this tutorial, we’ll see how we can take one of those typical, boring layouts and make it spicy by using a few different CSS techniques.
🔗 Links
✅ Finished code: github.com/kevin-powell/creat...
✅ The ::before and ::after pseudo-elements explained: • Before and After pseud...
✅ Intro to mask-image: • mask-image lets you do...
✅ SVG Path Editor: yqnn.github.io/svg-path-editor/
✅ Wavy shape generator: css-generators.com/wavy-shapes/
⌚ Timestamps
00:00 - Introduction
00:21 - Goals for creating each of these
01:40 - Project set up
02:06 - The HTML
05:37 - General CSS stylings
08:14 - CSS - the diagonal section
15:20 - CSS - the spiky section
17:42 - Making a triangle SVG
20:09 - CSS - continuing the spiky section
31:17 - CSS - the wavy section
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 186

@koigorfogbawa8238 Жыл бұрын

Kevin...your KZfaq channel is literally a beginner to advance CSS course...and it's for free and constantly updated 😀.. Thanks Kev...really really appreciate you.

@Allformyequine Жыл бұрын

TOTALLY AGREED!! :)

@johnnyjev9840 Жыл бұрын

😂! Everything I know in css I learned from Kevin's KZfaq channel... I'm super grateful 🙌

@Allformyequine Жыл бұрын

@@johnnyjev9840 I would probably stop making money if he quit this channel LOL!

@8koi245 Жыл бұрын

his Scrimba course is also free!!

@rickardelimaa Жыл бұрын

12:39 - this is why I listen to all your videos. I think I'm pretty good at CSS, but having you present newer CSS properties keeps me constantly updated. _margin-inline_ and _padding-inline_ are new to me as well. This video felt really pedagogic, even more than usual. Thanks!

@daleryanaldover6545 Жыл бұрын

As someone who usually works with CSS for a decade now, keeping up with these new properties and functions are both godsend and a nightmare.

@ihelpdogs 5 ай бұрын

*googling "pedagogic"....

@trueberryless Жыл бұрын

I want to thank you Kevin because I agree with each goal you discussed in the first few minutes and I also think that it is much better, programming without SVGs as long as it is possible. And you are one of the only people on KZfaq knowing how to create anything with only CSS. This is what your channel stands for... Thank you!

@trueberryless Жыл бұрын

Oh, maybe I didn't quite understood what you said... Unfortunately, I don't like using SVGs...

@sijiadegoke Жыл бұрын

Kev, you're an angel, absolute godsend. Cant tell you how much your videos do to my progress. Thank you

@aln.2366 10 ай бұрын

I'm new to web development, and you are a golden source of knowledge. thanks a million.

@TeamROsky Жыл бұрын

awsome video btw love the way you repeat the basics of everything helps refresh the mind, subbed!

@norboost Жыл бұрын

You could flip the after element in the triangle example horizontally as well, that way they would be symmetrical on top and bottom.

@mobile_genshin 4 ай бұрын

Wow! Omg this is amazing, thank you so much! I was making a website for my firend as a practice and I wasted so much time trying to figure out ways to do this diagonal section and nothing was working, but now thanks to this video my firend will get his cool skewed sections design! I am so grateful, this channel is the best!

@jadranko0o Жыл бұрын

Kevin, you did it : I’m in love with css! You’re amazing, thanks for all 🙌🏻

@KevinPowell Жыл бұрын

Amazing! So happy to hear that :D

@patrickmcnelis1520 Жыл бұрын

A great video mate. Thanks again Kevin!! These are great little tricks that produce a big punch, and not too difficult to achieve!! Just awesome!

@thescientisthorse 4 күн бұрын

So effortless! Thanks Kevin!

@bellow247 Жыл бұрын

I Learned 90 percent of all my css from this guy. Thank you Kev!!!

@daveskye Жыл бұрын

Good Video, nice to see the full fresh start approach.

@abacealeycagan2896 Жыл бұрын

Love you Kevin, You really make us fall in love with CSS

@prathameshpalkar514 Жыл бұрын

I'm learning something new all the time with fundamentals too. Thank you so much KP sir🙏🏼🙏🏼

@gravy1770 Жыл бұрын

Damn. I considered myself a CSS master since taking your Conquering Responsive Layouts course... But you keep showing me there's new levels to this

@matt.604 Жыл бұрын

I like your angles on the angels. 👼

@xenialxerous2441 Жыл бұрын

Thanks, Kev! You're a seasoned css practitioner 🙏✌🏻

@BryanMaxDobberstein Жыл бұрын

Are you peppering him with accusations of being salty?

@xenialxerous2441 Жыл бұрын

@@BryanMaxDobberstein Not at all, my intentions and appreciations for him have always been authentic, since I've known him (via inter webs) as long as since 2014'ish when I myself first got into the web dev world, migrating from Java and C++ programming. I can't say for sure whether he had his own dedicated channel back then, however he was one of the patreons of another awesome channel named "devTips"!

@thomasp6208 Жыл бұрын

Hey Kevin, as a beginner I can't thank you enough for the first 8 minutes of this video. So much helpful advise that 99% of the other tutorials/guide would just completely skip. Thanks a lot 🙂

@girabbit Жыл бұрын

“So I’ve got here an HTML file with content and a CSS file with 600 lines of code, now all I need to do is…” *Viewer crying in amateur *

@giovannisoulkbenedetti7127 Жыл бұрын

Wow.. with just one of your videos I learn a lot. They are very exciting! 🔝Thank you Kevin

@Rocadamis Жыл бұрын

Really great video! Thanks again Kevin!

@arafhasan1533 Жыл бұрын

just exactly what I needed right now.THANK YOU SO MUCH!

@javieru5871 Жыл бұрын

Kevin you're truly the boss, thanks your content is top notch...

@joshuacooks Жыл бұрын

I'm a Sr. Dev and I learned quite a few helpful things from this video, very well done! 🏆

@ryo_5748 8 ай бұрын

Thank you for the easy to understand explanation! I'll try it on my website right away.

@oredeinbabajide3419 3 ай бұрын

God bless you Kevin. Thank you for all that you do.

@1909jaya Жыл бұрын

I love this! Thank you CSS king of kings!

@alessandroformica6824 Жыл бұрын

Honoured to watch you styling, Master! ^^

@kamraniqbal17 Жыл бұрын

Beautifully Explained!

@ZenhostPanel Жыл бұрын

This channel is just so good... It has solution to everything i am concerned abt in web development

@nomadshiba Жыл бұрын

Thank you Kevin, very cool!

@Glow0110 Жыл бұрын

Always such helpful videos brother!

@Chinodan1994 Жыл бұрын

Thank you for sharing! 🙌🏼

@FlorinPop Жыл бұрын

Great video! Learned a bunch! 🙏

@KevinPowell Жыл бұрын

Thanks Florin ☺️

@HarryEland Жыл бұрын

Learned a lot in a short time and well explained

@sebastian.schwarz Жыл бұрын

Awesome stuff! Thank you!

@eybietie Жыл бұрын

pretty cool things. I am really confident with css but some solutions are just so smooth and clean. thanks for the video /cheers

@sosinformatique3470 Жыл бұрын

thanks kevin coming from France your very hepful ! !

@benderbg Жыл бұрын

You are born to be a teacher Kevin.

@ispepsi2023 Жыл бұрын

Awesome content! 😍

@heavylog1c Жыл бұрын

Pretty cool stuff. I'm stuck with using clip-path and triangles made from borders. Now I'm gonna try mask-image.

@noelfrancisco5778 Жыл бұрын

Thank you for sharing these tips, very helpful :)

@krzysztofs3t532 Жыл бұрын

OMG, man! I love your videos! isolation: property... I would never know something that usefull even exist!

@omotehinseelvis9845 Жыл бұрын

Frankly speaking, your videos are priceless. Whenever youtube suggests them, even though I'm doing something else, I always wanna stop by because there's always something valuable to learn that will improve my CSS. Thank you so much Kevin

@mediadinger Жыл бұрын

"margin-inline" ... "padding-block"... you saved my life !

@davidlafontant2185 Жыл бұрын

Unfortunately it's not allowed for one person to give 100000 likes for a video. It's awesome. Thank you very much. 👏🏿👏🏿👏🏿👏🏿👏🏿

@KlausOppermann Жыл бұрын

Great, thank you so much!

@kavehghanbarabbasi2013 Жыл бұрын

awesome , mate .. awesome

@travellingstranger3378 Жыл бұрын

...you sir, are the best!

@TheMrChristli 7 ай бұрын

thx this helped me a lot :)

@madaraplays247 8 ай бұрын

Thank you sir 😃

@mthia Жыл бұрын

today i finished my page with svgs to create some waves etc and now im seeing this video :O

@jefferymuter4659 Жыл бұрын

Super thankful for this channel as I slowly learn to stop hating CSS...... By learning CSS properly 😅

@Allformyequine Жыл бұрын

So FUN!!! Luv this; once again you blow it right out of the water :) 😃

@nahidahmed9153 Жыл бұрын

nice video love it

@kc-ep8yx Жыл бұрын

Thank you

@Paulo280713 Жыл бұрын

great content

@Abdulwahab-hj4me Жыл бұрын

Absoulutely Fansastic 😵

@StephenBolger 8 ай бұрын

Only starting to use custom CSS variables. Setting one for --spike-color that references the one set for --body-bg is interesting. It seems like it complicates things unnecessarily, but I will have to ponder on this one a little longer to see the worth. Overall, great lesson.

@hdubey64 Ай бұрын

Awesome

@Linuxdirk Жыл бұрын

I love your tutorials. Semantic HTML and easy to understand pure CSS are just the best! 👍

@ernestechie Жыл бұрын

FIRST HERE. Loving your content since 2019

@stevealliance4370 Жыл бұрын

Kevin, j"aime ton chandail :) from Quebec Canada

@ShaunLevett Жыл бұрын

I often run in to these little rendering issues. I used a skew technique for an angled panel in a project, with the background being a radial gradient. I didn’t want the gradient skewed though, so I made the gradient a child element and skewed it the opposite way so it looked normal again, but Firefox wasn’t having it. Little 1px gaps in the gradient.

@LePhenixGD Жыл бұрын

21:38 You can actually do it with just linear-gradients ex: background-image: linear-gradient(-135deg, purple 15px, transparent 0%), linear-gradient(135deg, purple 15px, transparent 0%) ;

@LMHM Жыл бұрын

Just discovered ur channel. Feels like I found a cheatcode 😃

@worldpeace1822 4 ай бұрын

Kevin regarding the issue with the rendering when zooming in I suggest trying to transform the image in by 0.5 px in so that there is an overlap… this might do the trick and fix the problem. You might have to adjust the svg vor that.

@mkl.stranger 6 ай бұрын

Hi Kev, thank you very much for your consistent effort. It's gets a little distracting with the position of your selfi camera view. Please adjust somewhere it don't distract.

@hugosales8102 10 ай бұрын

25:00 You could use either `background: transparent`, or even better `background: none` and you could have a gradient underneath

@toisetrothanhmavuongbaaonh4725 Жыл бұрын

Godd of CSS is here ... 🎉🎉🎉

@lynx242 Жыл бұрын

you rock

@omersoncruz1081 Жыл бұрын

whoaah finally a tutorial for shapes and stufss. Thanks Kevin

@snackss_ Жыл бұрын

Hey, nice sweater! Greetings from Ottawa haha :)

@KevinPowell Жыл бұрын

I'm just outside of Montreal, though will be relocating to Halifax shortly :)

@snackss_ Жыл бұрын

@Kevin Powell Wow nice! Enjoy the move, hope it goes well!

@blac-whit Жыл бұрын

Thank you for this {

@c-eagle Жыл бұрын

Regarding the rendering issues with rotation-transforms... I've been writing a JS/CSS-based dungeon crawler (3D and grid-based like Dungeon Master), and I've had the same rendering issues between textures/walls - only using HTML elements for those, no WebGL or anything, so it works on more devices. And after a lot of frustration, I found a fix by accident: I just added 0.01 to each and every deg-value in rotation-transforms. That was the lowest I could go before the problem would re-appear. So for example, instead of 180deg I'd use 180.01deg. Suddenly I really regretted deleting a CSS-based shading-engine (using gradients with different alpha values to add light/shadows) I developed for 5 weeks prior to noticing this rendering issue...

@metin1504 Жыл бұрын

Kevin, with all these videos you seem to be the kind of man who has his chair/desk setup and sitting position dialed in. Now i have personally tried to follow many KZfaq videos about how to sit for extended periods of time without feeling like a grandpa climbing a mountain after each sit. Perhaps i wasn't asking it to the right people, maybe i should've asked a fellow coder. So, mister Kevin sir. Any advice or personal insights on how you deal with this constant risk of back pain? i know it's a bit off topic but i would genuinely appreciate any kind of advice at this point really hahah. P.S. This video was yet again one of those videos i didn't know was going to be so helpful and motivating for my own project, really only clicked because i know the welcoming quality of your videos and also for the nice colors and shapes in the thumbnail :p

@nszbf Жыл бұрын

看到有人说是给初学者的视频，我认为即使是有经验的人，也能学到很多东西，谢谢

@brucenorton Жыл бұрын

I love skiing Owl’s Head

@KevinPowell Жыл бұрын

I've spent the last 30 odd years skiing there, my parents live pretty close to it 😀

@ricardodesirat2590 Жыл бұрын

Great video! To fix the zoom in and out, maybe a -1px on top and bottom of the ::before & ::after ?

@sheilawilliams5684 8 ай бұрын

Thank you!

@johnKeysCloudSonics Жыл бұрын

a fix for the rotated bottom spike shape "sub-pixel-rendering" situation could be to add a bottom margin to the pseudo element

@NurioonSoftware Жыл бұрын

How come you have time to create all these contents and i dont have time to watch all of them. You amazing

@nomadshiba Жыл бұрын

i think one bad thing about using pseudo elements is if you have two different classes trying to use the same pseudo element, it becomes problematic and thats why we need unlimited pseudo elements like :before(foo) :before(bar) with an id

@KevinPowell Жыл бұрын

I'd love to have something like that :)

@shatadal_das Жыл бұрын

That's a really great concept. 😀

@rainofwalrus 6 ай бұрын

Great video! I'm in the process of making a Parallax Effect using transparent .png(s), but would some of these mountainous container shapes be more optimal for a Parallax Effect?

@quintonsmylie5584 Жыл бұрын

Nice thumbnail

@maidnuu Жыл бұрын

I wonder if you could the waves the same way you do the spikes: make an svg of one wave and repeat it.

@graceljoyermena151 Жыл бұрын

Hello, Sir! Respectfully suggesting, can you make an update video of html and css? I've been looking for tutorials in yt to learn and your channel is a good place to start. TY.

@fredhair Жыл бұрын

"I don't want to use an SVG" Immediately uses an SVG

@ilijapajkanovic9514 Жыл бұрын

Could you do a video where you combine @mediaquery and animation to have responsive sizing those shapes?

@dnch Жыл бұрын

you should make version with custom backgrounds

@blu_ey Жыл бұрын

bro's using RTX Eyes ty for the video btw

@KevinPowell Жыл бұрын

Haha, yeah, might not keep up with it though, lol

@clevermissfox 9 ай бұрын

29:23 how do you highlight and delete -WebKit on both lines at the same time? I always see it giving a slight highlight to the same word that I’m selecting but never knew you could select a couple , what kind of dark arts is that???

@goodshiro10 Жыл бұрын

in the diagonal section, how can we make it only the top diagonal and bottom straight? is there any other method or any trick to do that in the same method?