3 useful CSS tricks

I love playing with CSS, and sometimes come across some fun tips and tricks that I can't find room for in other tutorials, so here are three of them in one video!

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:00 - Trick 1: aspect ratio
02:55 - Trick 1.5: inset
03:37 - Trick 2: margin auto with position fixed
04:48 - Trick 3: stacking shadows

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[tijsvlphotography]

For the aspect-ratio, if you want to get a square you can do aspect-ratio: 1; instead of aspect-ratio 1 / 1; Saves you four whole characters =)

[zachjensz]

I'll add this to my div centering list

[Itay]

4:00
This works with position:absolute too, which is HUGE because absolute is very common in complex layouts.

[musthavechannel]

The last trick is totally surprising.

"Impressive, very nice!"

[doug]

the inset:0 + margin:auto thing is driving me insane because I'd been doing stupid 50% + negative margin (or transform) shit for a decade

[thehonestabe]

This channel is so underrated! I've been a software engineer for 12 years and every time I watch one of your videos I learn something new!!

[Rocadamis]

I was playing with this and learned that you can make the ratio a variable. For example, if I want my ratio to be the golden-mean, I would create a variable "--goldenR" and write the css: "aspect-ratio: var(--goldenR);" and it works perfectly. Also, I put a box-shadow border of 1rem on each of the 4 sides of the box (separate lines) and then put a border-radius on it for a really interesting frame effect. It puts the radius on both the box AND the individual box-shadows.

[ashuzon]

This was pure gold. Especially, that box-shadow. Man! Keep these things coming.

[marinicamashinica]

You're like a God of CSS, thank you for these tricks and all other great videos! I learnt so much from them in just a couple of weeks, really helpful, and your enthusiasm and friendly personality make it so much cooler and wholesome ❤

[oskrm]

Of course Safari doesn't have aspect-ratio, the new IE

[FrankKynard-yfyu]

Man you drop so may gems I have to make a Kevin Css playlist

[carstenberggreen]

The inset is cool indeed. Position fixed for navigation and backgrounds. Quite usefull indeed.

[lefxxwill]

wow! came for the aspect-ratio and learned so much more useful tricks! Thanks

[Frankslaboratory]

I like this format Kevin, thank you for teaching us ❤

[daryltang]

Thank you! It happened exactly as you described. I saw this video some time ago, and recently encountered a situation where one of these tips would be perfect, came back, watched it again, and used it!

[skillzorskillsson]

Trick 2 with fixed position also works with absolute position

[aniketbhalla]

Aspect ratio just saved my life. Thanks Kevin.

[nitram_nosnibor]

This was very useful and perfect timing. I have been putting together a flip card type of design and I wanted it to look like a pack of cards, this was perfect. With your box-shadow idea I did exactly that, and it look great on a mobile (which is what it is for). Thanks Kevin, very useful 👍🏻

[rhuzaifa]

box-shadow trick was new to me, Thanks Kevin

[SelfMadeSystem]

Make more of thsee! This is really entertaining and educative.