3 useful CSS hacks

There are times when we need to take more... unconventional approaches to solving a given problem, so in this video I look at 3 (or 4, really), hacky, but useful solutions that we can use in our CSS.
🔗 Links
✅ vmax, and the other viewport units: • CSS Units: vh, vw, vmi...
✅ dialog element: • dialog = the easiest w...
✅ CSS Secrets book: www.amazon.com/CSS-Secrets-So...
✅ Logical properties: • Write better CSS using...
✅ CSS Challenges Twitter: / challengescss
✅ CSS Challenges website: css-challenges.com/
⌚ Timestamps
00:00 - Introduction
00:41 - Using border-radius: 100vmax
02:05 - full-screen shadows
04:11 - break out of the container 01
06:55 - break out of the container 02
#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!

[@turboballer]

Man Kev, all of your videos are incredibly valuable but these videos lately - going over specific CSS topics that relate to easily dealing with real-world problems that developers face every day when building sites - are beyond valuable and I’m incredibly grateful.

[@sylvio1687]

Kevin please make a video building a website from scratch we'll see all things, like your thought process/building methods and other things. The video will be extremely popular as well

[@c0d3r91]

I AGREE

[@Anth-ony]

He's literally done that multiple times in the past. Check out all his older videos. He's made a responsive website from scratch, designed and built a brewery website, etc.

[@quintenmantez6934]

Me too! I agree! 😀

[@nigelnix1]

true, he's already done this multiple times.

[@Pupu._]

Agreeee!!!!🎉

[@AM-rl8lv]

I think Kevin found a golden sweet spot with his new type of video’s!!! Fixing the “css problems / limitations” we face!!

[@mdmizanurrahman3190]

The last one is life-saving. Can't tell how many times I ran into problem when had to work on other dev's project. Thank you very much, Kevin.

[@xentric313]

Everyone knows and loves you already, Kevin. No need for that introduction part anymore! :)

[@franco-cespi]

As usual Kevin, your channel if full of all that content that I need on a daily basis to solve a problem at my job, keep up with the latest thing CSS related, or to keep improving my skills. Can’t thank you enough!!! I have been following you from my early days with web programming.

[@Kaptain-T]

Hey, Kevin! I just wanted to say Thank you! I'm a huge fan. Started my Frontend journey a month ago and you've been of tremendous help.

[@NiceChange]

absolutely loving your vids. making CSS a passion for me...thank you

[@wfl-junior]

The full width hack is awesome, I never thought that being possible, I use to put containers manually on the children for those situations, now that hack is gonna come in hand for sure! Thank you!

[@WePiphany]

I spy class="something | another-think" and now I have something else to learn. Always something new to learn, which is very refreshing considering how stale CSS used to be when held hostage by Internet Explorer not long ago.

[@eioluseyi]

This is awesome! I remember some situations I've been in where this could have come in handy, using WordPress. I had to take the longer route of going into the code to find where the html was placed. This would save my time in future. Thanks a lot!!

[@chimadivine7715]

Powerful hacks overall. The first hack reveals the potentials of using percentages as margin values. I recently ran into the first issue you addressed. I had to change the overall layout of the site I was building which was a bit depressing. But now I have one extra tool in my toolbox. Thanks so much, Kevin

[@VasilyPavlik]

The last case is absolutely insane and very useful. Thanks a lot!

[@m3awna]

For a long time, I thought Kevin's intro was: "Hello my friend and friends" and I was wondering why the heck he would say so... then today ... well, it's "front-end friends" 🤣🤣🤣🤣😂😂😂 silly me

[@KevinPowell]

Oh, you aren't the only one, don't feel bad 😂

[@deejaydev]

Thank you Keven - Becuse of you enjoy working with CSS

[@brianparchamento9349]

Bravo! Thank u Guys & Ladies...I could NOT have This Quick Turnaround.

[@NiceChange]

Love this. Thank you

[@Deezmazing]

Another full width trick I like doing is this. You make the main wrapping tag for the site content display grid and have 3 columns with 1fr for the left and right values and your container width for the middle value. Ex: body { grid-template-column: 1fr min(1196px, 90%) 1fr; } Then set all the initial children to use the second column. Ex: body > * { grid-column: 2; } and then have a full-width class that spans all the columns Ex: .full-width { grid-column: 1 / -1 } For responsive design this can all be set in a media query to trigger at a tablet/desktop breakpoint, or you can set a media query at a small tablet/mobile breakpoint that will also just make the initial children span all the columns so that there is no white space on the side.

[@Stoney_Eagle]

It's a challenge to shift layouts with css alone but definitely satisfying when you get it working without ever touching the markup.

[@insaneviruss]

Hey wow look at you dropping these nuggets as if they are nothing. This is so helpful! Thanks Kevin!

[@adamsDevArt]

thanks! it helped a lot !

[@SatadruChique]

Holy! The full width container breakout is gold!

[@kylevandeusen]

Love these kinds of videos. As a WordPress fella (yes, we watch you too!), tips like this are super useful

[@user-hm9wz6nd5p]

Thanks you MR.Kevin this video is very helpful😍

[@billychanclub8622]

Oh I love hacks with box shadow, that last one is great!

[@shaderone07]

Those are some killer Hacks! loved it 😍

[@gamertag8721]

what a coincidence you dropped in a video just as I was thinking of how to extend the background color for my one image that I had to refer to, and could not change.

[@craiggazimbi]

Amazing , thank you.I hope to be better at css from your content

[@smartTechn0l0gy]

Please keep it up and post more

[@smohammadhn]

back here watching this video again when i finally realized that forcing full-width sometimes can be a lifesaver, I knew I saw the trick somewhere

[@HuynhLuong227]

wow,...many thanks

[@pf2174]

I'm stunned very impressive thnx

[@ggsingla]

Literally blew my mind, these were some really clever tricks kinda forces you to think out of the box

[@tigrafale4610]

literally, for a couple of them. hehe

[@PlayWithNiz]

It'd be cool to see the last solution working with a background image!

[@MrMarkRGray]

Commenting because you are awesome 👌

[@celflowers74]

Hi Kevin, I really enjoy your videos as its very intuitive and really very interesting. I'm working on Oracle ERP but watching your video's I fell in love with HTML/CSS/Javascript so I usually watch your video's several times and try practice during my free time. Now I was wondering if you have the time, can you make a video on extracting data from oracle database and load and update it in HTML/Javascript form/page and update/insert back to oracle table. Just a simple name, age, bday form and will try to get idea on how to do it and learn. Appreciate it very much.

[@alvaroprietovideos]

🎉🎊 First time ever YT picks the "front-end friend" right!!

[@joshrhubarb]

Great vid

[@ararthepro3972]

The second full width is pretty useful if you want to keep the alignment of the page

[@micron9921]

Excellent keyboard sound, what model do you have, switches, review?

[@christophadamek2555]

As long as we don't have logical transforms, I wouldn't use the logical margin together with transform. margin-inline start together with translateX would break for vertical writing mode.

[@jcc5018]

Hey, So I know CSS is typically used for web projects, but I am wondering if you have ever considered it for print layouts. For example, downloadable content that could potentially be customized by the end user. In my case, planner templates. But other use cases could be tickets, or itineraries or potentially even book layouts. From what I've learned so far, I will need a print media set, but I havent gotten too far beyond that. I believe I can change classes or styles with a bit of JS like Alpine.JS or something, but havent got that far yet. But the biggest challenge I think I will face is creating a preview screen that shows a layout of a page. Similar to what the various coding playground sites would offer, but the container must not alter the layout, but simply be zoomable. (If I set a 5x 6 page layout, that layout needs to print at that size even if the viewport is bigger or smaller.) My thought process was to create a container that corresponds to a standard page width. from memory, I think that comes out to 816 by 1056 px And then use grid or something to create various containers. with set margins, and styling applied for my different formats. Then a simple save to PDF and print, and you've got yourself a template. I'd imaging that I would need to turn overflow scrolling off, but I'm not sure if CSS could create new pages (instead of columns) on the fly or if I'd need another coding solution for that. Any thoughts? perhaps you could use this as a new challenge video/ tutorial? Why should we spend money on something like InDesign when we know CSS?

[@jornzander1285]

Cool!

[@Lord_zeel]

I came up with a nearly good solution for the full width, as long as your main column is centered: margin-inline-start: calc(-50vw + 50%); margin-inline-end: calc(-50vw + 50%); This has the advantage over the shadow of working with background images, gradients, etc. The problem with this though, is that the scrollbar will cause a little overflow if the page is taller than the window. This doesn't appear to be an issue in Firefox, which seems to render the scrollbar over the content. You can compensate for the scrollbar by adding the width of the scrollbar to the calculation: margin-inline-start: calc(-50vw + 50% + 5px); margin-inline-end: calc(-50vw + 50% + 5px); That's half the width on each side. Unfortunately, to ensure you know the width of the scrollbar you need to use ::-webkit-scrollbar, which would mean some silly nonsense to make this work correctly in all browsers. Scrollbars... ugh.

[@vm-dev]

That is actualy in some way the exact thing Kevin mentioned in video .. But, hard-coding scrollbar width in CSS will still cause trouble, because scrollbars could be different widths in different browsers .. You could use CSS variable that is set by JS on body, and then add it into you calculation .. Though it might still produce some "glitchy" behaviour, if page renders quicker with CSS than the CSS variable is set..

[@IorPerry]

for border-radius instead of 100vmax you can use 9in that mean 864px usually is enough

[@lonleybeer]

Thanks for making CSS less frustrating, i have started coding for less than a year now and I discovered your channel 8 months ago, you really helped me improve my CSS skills! Also, what theme are you using in your VS Code?

[@angelojimmy1]

One Dark Pro Theme probably

[@dusanlukic6784]

it's called atom one dark :)

[@geforcesong]

awesome

[@sumitanand5187]

Can anyone let me know if there is any way to put position:absolute element outside it's relative scrollable parent element...?

It would be nice to know how much the shadow hacks impact the performance (speed/memory). I have impression that they might be heavy. I also do not like css which basically requires comments in order to be understood... but that's just my personal opinion. Nice video as always.

[@amjadshadid90]

thanks

[@FreeSkypeGenerator1]

thankyou

[@somnathgolui2912]

when using linear gradient in CSS should I use a background image or the background property

[@clevermissfox]

How are there no closing curly braces? 4:01

[@mebamme]

I never knew about vmax, this will definitely come in handy for something I'm working on!

[@eioluseyi]

I'm on this table too! I can't believe it existed and I was oblivious to it 😂

[@nicothefreelancer]

please do a tuts how to make a child div bleed fullwidth from a contained parent (section). example I have image-content layout and I want the image to bleed or touch the screen corners but the content stays contained and aligned based on parent(section) width. hope this make sense.

[@drementer9]

🔥

[@Nurtylek]

hi, did u remove ripple effect video?)

[@Laura69]

For the border-radius case, can't we just use em units to make it adapt to the font-size of the element?.

[@KevinPowell]

You could, this is just one of those `100vmax` and never even think about it things. 10em and never think about it would work just as well :)

[@animeclub1500]

Awesome 👌 That gonna help alot . Thanks Css king 🤴 . Can you please make a tutorial of how to full control on classes within a container of background image cover, because it get really kind of messy 😅 when it comes to positioning other elements inside a background image.

[@KevinPowell]

I have a video that goes pretty in-depth on background images that might help: kzbin.info/www/bejne/aYXCe6xneNZ7b80 . If it's a background image, it should be decorational though...

[@_Greenflag_]

Your advices about full width within a container are really VILAIN. Just use negative left & right margin.

[@seize2581]

For the 3rd one you can also use negative margins.

[@razanajan7271]

Kevin please complete the beyond css course, i've been waiting since April and you haven't completed the course, you say it will be there on May but it hasn't been there till now

[@avneet12284]

Can't I use display:contents for removing things out of their container?

[@wetballs1]

Woah vmax is awesome

[@faycetoofayce7721]

Hi Kevin, please how do you get the result in real time in the browser with vscode ? Big Thank for all from France.

[@jsart_pl]

Brilliant video as always! I just have two little questions. Is this syntax: rgb(0 0 0 / 0.5) the same as: rgb(0, 0, 0, 0.5)? Seems new to me (it might be old tho, I'm not keeping up with new CSS standards). Does that work in all browsers?

[@KevinPowell]

That is the new syntax, and yup, works the same as what you put. Its supported everywhere except for IE.

[@jsart_pl]

@@KevinPowell Ah, cool! Thank you for your replay :)

[@smashICE1]

Problem is also that Sass compilers do throw a failure when using this syntax :(

[@pawpaaj]

@@smashICE1 Which compiler are you using? If it's the VSCode plugin my guess is that it's not up to date and/or isn't maintained anymore. I'm using npm sass 1.49.8 (which btw is 4 months old at the time I post this message) and it's compiling correctly for me.

[@isaiahphilbert]

Hi Sir!! Love the Tutorial and the hacks. Can you please make a video showing how to make a Working contact page that is linked with my Gmail using html, CSS and JavaScript. I'm really struggling with it Please help. God bless.

[@beautieshelp5973]

Sir please reply How to reduce opacity of background image bcz the div containing reduces the items opacity also within that div.

[@KevinPowell]

Either a pseudo-element that overlaps the background image, or use an app to change the image itself.

[@TrueSQN]

What does vertical bar "|" between classes in html? like in your code at 36line

[@agent-33]

Nothing. It's just a visual separator to make it more readable when you have many classes.

[@beinyourguard]

what does the vertical bar in the class attribute (line 36 in 4:32) mean?

[@KevinPowell]

It's just a visual separation, it doesn't do anything :)

[@beinyourguard]

@@KevinPowell thank you! great video as always

[@RobertMcGovernTarasis]

Have a lovely weekend

[@sly218]

Hello Kevin, great video as always! Btw, how long of practice would it take to be a front end developer and actually be hired?

[@KevinPowell]

That's such a hard question to answer! Depends on how fast they pick things up, the job market where they live, and on a lot of luck, lol. I wish I had a good answer.

[@sly218]

@@KevinPowell Alright, sorry for the complicated question hehe. Though, thank you for taking the time to answer my question! :)

[@hcjlimits3321]

It's depend on how you love what you do

[@quintenmantez6934]

👍

[@thedacian123]

Hello.Whici is the catch with | between classes,as far as i ikow this is not a valid html /css syntax.Thanks

[@KevinPowell]

It's just a visual separator, it doesn't do anything :)

[@8koi139]

"Creative" ways lmaooo My whole FE journey in a nutshell

[@okopyl]

Break out of a container - negative margin

[@blazi_0]

I miss css so much 😔

[@ghostandgoblins]

I just spoke to CSS, and they said they miss you too as tears were cascading down their cheeks.

[@okopyl]

Regarding the limitations of the last method - clip path support is terrible

[@c__beck]

::SMASHES THAT LIKE BUTTON::

[@ahsath]

Both last tips are a bit overkill, I'm doing a website and had this same use case, you can just create a container that center your content and place it inside your wrapper, footer > .container and that is it, obviously if you have control of your HTML and CSS

[@KevinPowell]

The issue is, we don't always have control over the HTML, otherwise, yes, I wouldn't do this 🙂

[@somnathgolui2912]

do you write blogs because like to read blogs than watching videos

[@KevinPowell]

not at the moment, but I do have plans to start

[@somnathgolui2912]

​@@KevinPowell please do so i always prefer written tutorials like blogs or something because while coding for 12 hour per day every seconds matters but if the thing is that complex then need to watch video explanations

[@eeew2691]

@@somnathgolui2912 Dude you wrote it like he should comply your demands 😅😅. Man is busy creating amazing content

[@somnathgolui2912]

@@eeew2691 Yes obviously he is a very busy man how also helping us to learn CSS for free so that we can prosper in our careers, he is contributing in the community and i truly grateful that we have teacher like him. Usuly content creater ask to give feedback that's why I just commented it whithout think deep If it's hurt or any of you find my comment rude then all I can said is "sorry for my words"

[@alexanderrydberg6118]

early

[@flowerofash4439]

custom dialog? just use alert() like a man

[@lycan2494]

Hi Kevin. I'm a HUGE FAN! I just sent you a message on twitter. Could you please take a look?

[@hikari1690]

Yay! I knew the first 2 and understood what's going on in the other 2 even before the explanation! Can I finally graduate from being a junior dev? 🥲