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

[@koigorfogbawa8238]

Kevin...your KZbin 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 KZbin 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!!

[@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 KZbin 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...

[@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 *

[@ryanthompson2462]

Kevin, you are an absolute god send. Im self studying, and you are my number one go-to channel for CSS. You really did help me fall in love with CSS

[@linak1909]

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!

[@aln.2366]

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

[@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"!

[@mattroddev]

Kevin, you are my hero. Thank you for what you do.

[@sijiadegoke]

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

[@matt.604]

I like your angles on the angels. 👼

[@joshuacooks]

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

[@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

[@davidlafontant2185]

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

[@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

[@TeamROsky]

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

[@mediadinger]

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

[@abacealeycagan2896]

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

[@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]

*googling "pedagogic"....

[@oredeinbabajide3419]

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

[@benderbg]

You are born to be a teacher Kevin.

[@javieru5871]

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

[@daveskye]

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

[@ryo_5748]

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

[@mkl.stranger]

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.

[@Linuxdirk]

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

[@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 😅

[@krzysztofs3t532]

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

[@giovannisoulkbenedetti7127]

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

[@1909jaya]

I love this! Thank you CSS king of kings!

[@ZenhostPanel]

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

[@eybietie]

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

[@kamraniqbal17]

Beautifully Explained!

[@HarryEland]

Learned a lot in a short time and well explained

[@Glow0110]

Always such helpful videos brother!

[@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!

[@hugosales8102]

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 ... 🎉🎉🎉

[@Allformyequine]

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

[@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 KZbin 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

[@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.

[@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...

[@chinodanxd]

Thank you for sharing! 🙌🏼

[@nomadshiba]

Thank you Kevin, very cool!

[@travellingstranger3378]

...you sir, are the best!

[@madaraplays247]

Thank you sir 😃

[@TheMrChristli]

thx this helped me a lot :)

[@Abdulwahab-hj4me]

Absoulutely Fansastic 😵

[@Paulo280713]

great content

[@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 😀

[@smgraphics3012]

@kevin Powell plz help i got stuck as -webkit-mask-image: url('triangle.svg'); not working

[@nahidahmed9153]

nice video love it

[@ElZyko]

I can't see the spike either, even when I download the source code. I'm on firefox 109.0.1. Stop working as soon as I had the image-mask

[@kc-ep8yx]

Thank you

[@kavehghanbarabbasi2013]

awesome , mate .. awesome

[@omersoncruz1081]

whoaah finally a tutorial for shapes and stufss. Thanks Kevin

[@TeamROsky]

omg did I just spot eye tracker your eyes go over your glasses at 1:18 mhhhh

[@KevinPowell]

haha, yup, testing using one for my intros 😅

[@TeamROsky]

@@KevinPowell haha honestly good idea it really pulls me in with my full attention when openingen your video keep it up!💡

[@fredhair]

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

[@ricardodesirat2590]

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

[@sheilawilliams5684]

Thank you!

[@NurioonSoftware]

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

[@gamingmode2868]

@25:12 In my case spike does not take background color as a variable instead it takes as a hard coded background color. Any suggestions?

[@innerinsights224]

Can you make a video on how to find work as a web developer?

[@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.

[@zorglub8949]

Why not id's for sections?? :)

[@BrandonFunk]

im stuck on the spikes! webkit-mask-image is crossed out in VScode, and mask-image doesnt work! what am i supposed to do to make it show up? its driving me crazzzy

[@scooby554]

Hello Kevin, could you show how you configured "Prettier" for HTML and CSS? There's some problem with and tags

[@KevinPowell]

What's the issue?

[@scooby554]

@@KevinPowell On Save it does this to and tags

[@bobhearinger]

6:20 how to set this dark mode? I have a dark theme on windows and chrome, but my websites are light?

[@maidnuu]

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

[@mikhalpalych]

28:45 In some cases i fixed this with transform scale 1.01 or 1.02

[@sobertillnoon]

Why not scaleY(-1) instead of rotate(.5turn)? Would you still get the graphical issues when zooming?

[@ilijapajkanovic9514]

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

[@mthia]

11:47 how did he move the line like this?

[@Technoph1le]

Wondering if there's CSS doc, just like JSdoc? 🤔 Can you also make a video about it? Like CSS documentation...

[@asappi1]

w3schools is great.

[@z-tech4703]

Thank you for this

[@DamienCarbery]

Is it possible to convert the triangle SVG into a CSS data so that you won't need the external file?

[@XoIoRouge]

Your file is saved under `.css` - I'm returning to the field and for the past few months, I've been using `.scss` because I've heard it "can do more things than CSS." I expected this to be using SCSS instead of CSS, but it's not? Can you describe the difference and inform me which you think is better?

[@bradleyandrews2444]

i was thinking how can i have an svg in css instead of in the html it self while still being able to control it color

[@a.galvaop.787]

Angels

[@blac-whit]

Thank you for this {

[@--bountyhunter--]

Let's see if I'm lucky enough to get a heart Amazing vid btw

[@Klaus53123]

Hi Kevin, great stuff. I immediately started to play around with it. One issue I couldn’t solve: if I wasn’t only one spike in the centre of the section, I gave the .spike a property of width 60px and height 25px and the .spikes:: before, . spikes::after a width of 60px. I then tried to centre this one spike. I tried to give the .spikes:: before and after elements a left and right auto but that didn’t work. Giving them a 50%left margin works about, but not correctly. Any idea what to do? Best regards Klaus

[@GregPerham]

left: calc( 50% - (var(-spike-width) / 2) ); (NB iOS wont let me type two hyphens)

[@marcmeijer6044]

Kevin i literally followed your tutorial here and am at Firefox but the spikes is not working. I have no clue . Update tested all browsers with your code an no joy

[@brianmanderino355]

Are you running the html file directly in the browser? If so, you'll have CORS issues. Kevin runs the Live Server extension in VS Code which loads the page in a local server. That could be your issue.

[@tumeden]

Angels? You mean Angles, right? A simple typo but means something completely different.

[@KevinPowell]

haha, oops

[@ipgamingnight6492]

--webkit-mask-image isn't working for me :(

[@asappi1]

might be because you put 2 "-"'s.

[@ipgamingnight6492]

@@asappi1 i literally copied his html and css later on and still got nothing out of it...

[@mahbubalamsarker6292]

yes, this is not working for me as well. tried several way but not working.

[@Ryan-ww7un]

Kevin... are you using an eye-contact AI in the post-processing step for your videos? I liked your videos better without the AI. The eye-contact AIs are kinda creepy, and the frequent jitter in the eye's position is jarring. A good example at 1:17

[@francois.steinel]

It really feels weird with the effect applied on your eyes at the beginning of the video, feels uncanny valley 😅

[@KevinPowell]

Experimenting with it, might not be worth it :D

[@bomj-valera]

angels 🤣

[@bryanburns3391]

Angles not angels! You can delete this if you want just wanted to point it out!

[@KevinPowell]

That's one of those typos I'll be making forever, lol

[@Ali_vazife]

Ttttnxxxx❤

[@SirBearingtonSupporter]

I'm not able to get the spikes mask to work in firefox. I've disabled security.fileuri.strict_origin_policy, as instructed in questions/1363411 (creating a new profile for development) I've tried serving the site (locally) through python3 and apache 2.4 I have no issue clicking on a link that takes me to and displays the SVG in another tab. I opted for 2 different files, though neither work, and using only one produces the same result. In my troubleshooting I moved the assets to the root folder. I've stripped out tags so youtube won't filter it. HTML section class="spikes" div class="wrapper" p Lorem ipsum /p /div /section CSS .spikes (working) --spike-height: 10px; --spike-width: 35px; position: relative; background: var(--gradient-2); color: var(--body-txt); .spikes::before, spikes::after (working) content: ''; position: absolute; width: 100%; height: var(--spike-height); background: var(--body-bg) .spike::before (working) top: 0; .spike::before (NOT working) -webkit-mask-image: url("triangle.svg"); mask-image: url("triangle.svg"); -webkit-mask-size: var(--spike-width) var(--spike-height); mask-size: var(--spike-width) var(--spike-height); Any help would be super appreciative.

[@anthonyage9124]

I have the same issue, i even copy/paste the code and it simply does not work on Firefox.

[@sosinformatique3470]

thanks kevin coming from France your very hepful ! !

[@norboost]

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

[@Jarrod0067]

the worst part about all of your tutorials is... I'm required by contract to support backwards to Safari 11. All of these new properties and selectors break on older iOS

[@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%) ;

[@smgraphics3012]

-webkit-mask-image: url('triangle.svg'); not work

[@KDesp73]

Is it me or does he have the nvidia eye contact thing that replaces your eyes so you can read the script?

[@julienjububibi6866]

Hi guys ! I can't set the aspect ratio of the SVG to none on the second part.. Any idea ?

[@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. 😀

[@renrecommends5347]

Such a great video! I’m currently stuck on the spikes section when we put in the WebKit mask image. I’m following the video step by step and I’ve looked over my code and it’s the exact same yet when I input the path into the WebKit, it’s not creating the spikes and stays as regular horizontal bars. I don’t know what I’m doing wrong 😢 any help from anyone figuring out how to deal with this would be great. I’ve never used WebKits before so is it possibly a setting I don’t have set?

[@renrecommends5347]

Actually, they don’t stay as regular bars, they just disappear I’m using Chrome

[@renrecommends5347]

@Dustin Yochim so I tried that and it still didn’t work 😭

[@untaoshorts]

Same problem here

[@untaoshorts]

I found the solution. The problem: (Chrome don't recognize "mask-image: URL" on computer), The Solution: Create a Chrome browser's shortcut. Right-click on the icon and in properties, edit target to "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" and save. Then using Chrome open the page using ctrl+o. NOTE: Do NOT use this shortcut for regular browsing .

[@rainofwalrus]

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?