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
✅ codepen.io/kevinpowell/pen/QW...
⌚ 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
💬 / 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 KZbin 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!

[@zachjensz]

I'll add this to my div centering list

[@MrWebDesignerAnas]

how many do you have yet?

[@CodeMuscle00]

Nice😂

[@chotai]

How did you comment 10 hours before published video? (Video 2 hours ago, comment 12 hours ago)

[@sumitpurohit8849]

@@chotai ye lives in another part oh world he gets video first

[@chhavimanichoubey9437]

i think this is probably 69th trick for centring divs

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

[@lukas.webdev]

Nice one! 😜

[@Itay38]

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

[@essem4979]

For real?!? I always have to use that stupid margin 50 and transform translate to center an absolute div, it was about time

[@petiks6391]

wow that's absolutely useful

[@doug7897]

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

[@KevinPowell]

Same here, lol. I ran into something that was using that on a page, and I was so confused with how it was centered. Good to know though!

[@simoncallelaverde]

Instead, that's how I centered things for the last 6 years. It works with "position:absolute" too!

[@krzysztoffurmaga3811]

there is only one thing with margin:auto - it works only if you have width and height set - if there would be no aspect-ratio - then it would center it only vertically.

[@simoncallelaverde]

@@krzysztoffurmaga3811 Exactly! To use position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; the element to center must also have set width/height. So it works for many things, but still stupid margin-top:50%, margin-left:50%, transform(translate(-50%)) is still useful half the times. Glad now we can almost center everything using Flexbox ;)

[@musthavechannel5262]

The last trick is totally surprising. "Impressive, very nice!"

[@5upl1an]

"Now lets see Paul Allens card!"

[@maelstrom57]

Let's see Web Dev Simplified's random CSS tricks.

[@oskrm]

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

[@MrBlaq]

Safari would be the new IE if it NEVER implemented any new spec.

[@domminiksarchiv1007]

Firefox fully supported it with version 89 which came out about 1 month ago and Chrome released the first version with support for this function in January…

[@koubinhanz]

and how do you deal with that if you want to use aspect-ratio in your project?

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

[@ashuzon]

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

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

[@daryltang8903]

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!

[@skillzorskillsson8228]

Trick 2 with fixed position also works with absolute position

[@carstenberggreen7509]

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

[@Frankslaboratory]

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

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

[@SelfMadeSystem]

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

[@ayushdedhia25]

Loved the last trick ❤️❤️ Box-shadow one 🔥😍

[@sarvagya-sharma]

This was so cool! Thanks for sharing!

[@think-forge]

Great video, especially the last trick. I just experimented with your CodePen and by adding some transition to the box, and a hover event - you can get some pretty interesting hover effects from the box-shadow, i.e. borders.

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

[@titusayyasamy3035]

Super! position elements & margin combination for centering. Thank you Kevin

[@MrWebDesignerAnas]

thank you sir it was really helpful

[@AbdicateDotNet]

Totally cool! Thanks for sharing!

[@joemon7463]

So fricking sick!!!! You're the best Powell!

[@7h3mon]

Wow! This is great tricks! Thank you sir!

[@kr9091]

Awesome tricks! Thanks for sharing 😁

[@rhuzaifa]

box-shadow trick was new to me, Thanks Kevin

[@Mario112352]

Thanks for the information, you are always helpful!!!

[@mindbro]

Cool tricks, I did know about the last one but not about the others! Cheers!

[@lefxxwill7740]

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

[@lukas.webdev]

Just yesterday I posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉

[@nobledsmarts]

I think trick 2 works with relative too, that's the first way I learnt to center div before flexbox

[@RaveKev]

Thx, the last border example looks great with colors that have a alpha value

[@debasishgayen3608]

Hi kevin, I find your tutorials very interesting. I learn a lot from your videos. Thanks man you are doing a great job.

[@MrMattpnk]

Really interesting video! Thank you!

[@FrankKynard-yf9yu]

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

[@Arvy565]

these were actually so good. I'm glad I watched this video

[@js-swift]

I Love a lot your css tricks Keep bring it as soon as css 3 come with new stuff thanks a lot Kevin

[@sebiporini]

Ouuuu. 3rd trick is cooooool. Thanks :)

[@aniketbhalla1521]

Aspect ratio just saved my life. Thanks Kevin.

[@unpluggedaman]

Amazing. Thanks a lot

[@technikhil314]

You can use text-shadow to create outline text. One of my favorite.

[@jimhuber]

How are you doing that? Inquiring minds need to know. Spread doesn't work on text-shadow, only box-shadow, from what I understand.

[@technikhil314]

@@jimhuber Yeah you are right there only blur on text-shadow. But a small value of blur that is not perceivable to user can work plus you can give multiple comma seperated values to text-shadow so you can mix the blur to give effect of spread.

[@godfathermikal]

Huh... never thought of any of these. Thanks!

[@piromaniaco3579]

Thanks Kev!

[@Shanvel26]

Awesome as always!

[@_parassolanki]

Your isolation: isolate trick saved me today 😊

[@sandeeps7547]

Awesome video as always, Kevin.

[@obed.raimundo]

Lines 5 through 7 just made me go "WHAAAAAAAAAAAAAAAAAT?!" LMAO! Thank you, thank you, THANK YOU! Was recently working on a perfect center situation and if I knew this beforehand, woo!

[@bloxzyo]

Thank uuu learnt new stuff.....

[@suchitsheth1192]

By Last trick of box shadow we can make loading animation very easily Thanks you for sharing

[@ahmedbasher8541]

Man you are amazing I don't know how to thank you ❣️❣️

[@denmccormik7654]

box-shadow thing as a lowest part of footer is very usefull, thank you

[@MosDev__]

Awesome Shirt Kevin !

[@marcuusrydell]

The third trick would have been useful for me earlier this year. Im studying front-end dev and in our first HTML / CSS course we had to build out a page from a sketch which had that "stacked card" effect. I endend up using :before and :after with some calc() to offset to create it but it took a while to figure out for me.

[@khaled4212]

Great job

[@SushilKumar-ig8ls]

WOW.... every video of yours is like "exactly what I was searching for". 😊😊😊😊

[@cbobka14]

Thank you for your tutorials and knowledge as I have come to realize that I was only taught the bare minimum in css after starting to watch your tutorials. Your knowledge is very much appreciated. In one of your videos you mentioned a colleague of yours that has a seminar or course in freelance charges and taxes you should take out. I lost that information but was wondering if you could offer that information again. Thank you for your time and Knowledge.

[@maheshbhatt9483]

Awesome trick👍

[@speeden7553]

Wow thanks a lot man.

[@michelaveline]

Always amazing!

[@NNNedlog]

Thanks a lot

[@Kitulous]

idk if anyone said that, but I found aspect-ratio is essential if you use width: max-content. because height: max-content doesn't do what aspect-ratio: 1 / 1 does.

[@aboudejeber1976]

Now that's amazing stuff 👏

[@DatDat59]

I used a lot the box-shadow trick in the past when trend was still skeuomorphic, to render a kind of paper stack 😅

[@alwinter]

I was just handed a design to begin developing that has borders around the document like you show at 3:15. I wasn't sure yet how I'd go about doing this. Looks like the inset property should do the trick. Thanks!

[@benjaminschneider]

I love these videos!

[@vladimirpetroski7089]

It is pretty neat!!

[@Knards]

Good stuff!

[@simoncallelaverde]

3:48 This also works with position:absolute! The top:0; right:0; bottom:0; left:0; margin:auto; trick I've been centering things like this for 6 years! (Now more with flexbox, but before it was with this)

[@HKRazieL]

this is pretty cool

[@IshanKesharwani]

Now I know how to give borders to the selected menu in navigation. I hope it turns out to be the breeze as much as I am thinking.

[@KevinPowell]

If it's a single border, either a pseudo-element (or a border) might be easier to control.

[@MaxWeir]

That inset is awesome, would you approach a modal in this way?

[@praveenvp9959]

Hi Kev u r my hero....

[@ransomecode]

HEY KEVIN!! Can you please make a video on css offset-path and motion-offset properties! I've seen some cool animations with them..

[@niteshsaini4956]

Hats of to you 🙌

[@lucadifazio2735]

Trick 2 is awesome ahaha

[@srinathmuthusamy9661]

Kevin powell 's nickname = Css 👑

[@devkasunlakshitha]

Those tricks are really really cool. I'm using position fixed to when creating popups. inset: 0; definitely very useful for me. Yeah thanks a lot

[@simoncallelaverde]

It works with position:absolute too. Been centering like this for 6 yrs.

[@sidewaysdesign]

The one-sided border trick is commonly used for link underline styles with controllable color and spacing (via padding).

[@KevinPowell]

You can do most of that with text-decoration properties now, from color to offset and thickness. I think support is decent as well 🙂

[@abhishekrawat8579]

awesome 🔥

[@totalolage]

Bonus trick: Use a blurred box-shadow together with clip-path to only get a shadow on one side.

[@mis0025033]

It's interesting, nice

[@rifatno1]

I knew that aspect-ratio before but the other two were new to me.

[@yahyasalimi3254]

Aristoteles, Platon all were wrong. The ultimate reality is made of only shadows. Thanks to Kevin for this discovery

[@michaelm8044]

Finally a use for position: fixed

[@d.l.3807]

Nice video.

[@sovereignlivingsoul]

the box-shadow trick could be handy in animations, I believe it counts within the border-box, would using the drop-shadow filter in the same way do the trick but allowing less spacing issues, good tips, thank you.

[@KevinPowell]

shadows aren't part of the box-model, so no worries there at all. You do want to be careful animating them though, they're pretty expensive to animate and can be pretty janky.

[@sovereignlivingsoul]

@@KevinPowell I animated the box shadow, it doesn't do too bad, the drop shadow looks to be more problematic when animated.

[@cooljohnny9402]

i would love some aspect ratio tricks on img elements. they are super hard to do

[@KevinPowell]

Use aspect-ratio + object-fit: cover and your good to go!

[@facundocorradini]

Never used the centering trick with position fixed, but it also works with position absolute, and that one is much more practical ;)

[@KevinPowell]

Oh, definitely! And I should have thought of that!

[@heshankumarasinghe3159]

Kevin, I really like your content and everyday I learn something I haven't known before from your videos. I have a little question regarding CSS and was wondering if you can answer it if it's not a bother. Are there any advantages we gain by using ems or rems for box-shadows and text-shadows rather than using just pixels? I see a lot of developers doing it. Thanks....

[@KevinPowell]

It depends a little on the context, but say for a button, if you use `em`, if you make a bigger or smaller button by changing the font-size of the button, the shadow will grow in proportion with the size increase, which is nice :). I tend to avoid pixels these days, there aren't really advantages to them, and in certain situations there are disadvantages, so unless it's 1px for a border or something, I don't really bother.

[@namelsse]

Thank you for all your videos. Had to subscribe to your channel as soon as I found it and have been watching these every time KZbin notifies me. But this one thing has been bugging me a long while as your content is very audio heavy. The compression artefacts in your audio are like looking at JPEGs compressed at 10% :D I don't know if this is a KZbin thing, but it makes the audio very hard to listen to... Other than that, thank you for all the hints and ideas you provide.

[@KevinPowell]

Is it that bad? I don't listen back to them on YT, but it seems okay on when I'm editing. Granted audio is black magic as far as I'm concerned 😂

[@namelsse]

@@KevinPowell Well, maybe not quite 10% bad :D, but a constant bugbear. Some part of the chain adds a very noticeable ringing artifact to the audio. Doesn't diminish the value of the content, but just had to get it out :)

[@KevinPowell]

@@namelsse just listened back with earphones and I didn't notice any ringing? Is it an echo or something? Even if your enjoying the content I want to make sure it's as good as I can make it, so I'll try to get it figured out

[@namelsse]

@@KevinPowell Hello again. I've been trying to find examples of this, but can only find subjective, roundabout descriptions that really don't help much without samples. But a kind of a metallic ringing/slight warbly hissiness that can be heard at the "edge" of sibillant sounds (and also normal speech). Sometimes happens when transcoding audio at low bitrates, I think (if you've ever watched a potato quality video from over 10 years ago, it's usually very pronounced). People do seem to get used to it, especially in light cases, so it might sound normal over time. Opus seems to have some examples of audio quality (opus-codec.org/examples/), and under "bitrate scalability" you can just pick up the same type of noise when the audio switches to full bandwidth & stereo and the bitrate is around 35kbit. My guess would be that it has to do with the original audio compression/bitrate and the conversion to Opus that KZbin does when uploading a video. TLDR: Maybe more bitrate, or just shake fist at KZbin and carry on😀 And sorry for taking up your time, as well.

[@boodyyahmed7999]

So cool👍

[@grinsk3ks]

You CAN actually animate gradients right now. Define a custom property with @property. Put a transition on it =)

[@KevinPowell]

Yes! @property is awesome :) - waiting for support to hit Safari and FF though!

[@solvedfyi]

This vid should have been launched with the assumption that it will be a regular series

[@KevinPowell]

Seems like a lot of people are liking it, so I'll keep it up 🙂

[@bunnyboy7008]

Ever since you've mentioned that you say "Front end friends" instead of "friend & friends" I can't help but notice it xD

[@aakashsingh604]

Amazing 🚀🚀🚀

[@HarDarkable]

Do more css Battles!

[@adamjamiu6764]

I love this

Cool, but how to have text centered in this box ? text-align: center; // will align horizontally, but how to have it vertically ?

[@lvekua]

Kevin please tell me did you deliberately match box and shadow colors with your t-shirt and your background?

[@KevinPowell]

I'd like to say yes, but no, I didn't 😂

[@lvekua]

@@KevinPowell I love your content and ways of teaching, thank you so much!

[@i-yusuf]

Hey kevin, Can you make a 5 min video on "javascript:void(0);" and "#" used in anchor tag. What is the use of it and why people get used to it ? Any suggestions would be appreciated.

[@Kitulous]

i believe href="#" is used in order for an anchor to actually have a href, because otherwise it will be just like a span void(0) evaluates to undefined, so basically it's a no-op, so to say but I still would like it if Kevin made a video

[@2ne]

You can also use margin auto on absolute